Adds accessibilityRole to calendar title for 508 compliance (#168)

* Adds accesibilityRole to calendar title for 508 compliance
* remove touchable from EmptyDay component

CalendarPicker/EmptyDay.js

@@ -1,29 +1,16 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity
-} from 'react-native';
+import { View } from 'react-native';
 import PropTypes from 'prop-types';
 
-export default function Day(props) {
+export default function EmptyDay(props) {
   const { styles } = props;
   return(
     <View style={styles.dayWrapper}>
-      <View style={styles.dayButton}>
-        <TouchableOpacity
-          style={styles.dayButton}
-        >
-          <Text style={styles.dayLabel}>
-          </Text>
-        </TouchableOpacity>
-      </View>
+      <View style={styles.dayButton} />
     </View>
   );
 }
 
-Day.propTypes = {
-  styles: PropTypes.shape({}),
-  day: PropTypes.number,
-  onPressDay: PropTypes.func,
+EmptyDay.propTypes = {
+  styles: PropTypes.shape({})
 }

CalendarPicker/HeaderControls.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   View,
   Text,
+  Platform
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { Utils } from './Utils';
@@ -18,6 +19,7 @@ export default function HeaderControls(props) {
     previousTitle,
     nextTitle,
     textStyle,
+    headingLevel
   } = props;
   const MONTHS = months? months : Utils.MONTHS; // English Month Array
   // getMonth() call below will return the month number, we will use it as the
@@ -27,6 +29,11 @@ export default function HeaderControls(props) {
   const month = MONTHS[currentMonth];
   const year = currentYear;
 
+  const accessibilityProps = { accessibilityRole: 'header' };
+  if (Platform.OS === 'web') {
+    accessibilityProps['aria-level'] = headingLevel;
+  }
+
   return (
     <View style={styles.headerWrapper}>
       <Controls
@@ -36,7 +43,7 @@ export default function HeaderControls(props) {
         textStyles={textStyle}
       />
       <View>
-        <Text style={[styles.monthLabel, textStyle]}>
+        <Text style={[styles.monthLabel, textStyle]} {...accessibilityProps}>
            { month } { year }
         </Text>
       </View>