Merge pull request #115 from CodingItWrong/accessibility-labels

Button accessibility

Author: RichardLindhout

src/Date/CalendarHeader.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import { IconButton, useTheme } from 'react-native-paper'
 import DayNames, { dayNamesHeight } from './DayNames'
 import type { DisableWeekDaysType } from './dateUtils'
+import { getTranslation } from '../translations/utils'
 
 const buttonContainerHeight = 56
 const buttonContainerMarginTop = 4
@@ -48,6 +49,7 @@ function CalendarHeader({
           >
             <IconButton
               icon="chevron-left"
+              accessibilityLabel={getTranslation(locale, 'previous')}
               onPress={onPrev}
               // RN types bug
               hasTVPreferredFocus={undefined}
@@ -63,6 +65,7 @@ function CalendarHeader({
           >
             <IconButton
               icon="chevron-right"
+              accessibilityLabel={getTranslation(locale, 'next')}
               onPress={onNext}
               // RN types bug
               hasTVPreferredFocus={undefined}

src/Date/DatePickerModalContentHeader.tsx

@@ -79,6 +79,11 @@ export default function DatePickerModalContentHeader(
       {allowEditing ? (
         <IconButton
           icon={collapsed ? 'pencil' : 'calendar'}
+          accessibilityLabel={
+            collapsed
+              ? getTranslation(props.locale, 'typeInDate')
+              : getTranslation(props.locale, 'pickDateFromCalendar')
+          }
           color={color}
           onPress={onToggle}
           // RN types bug

src/Date/DatePickerModalHeader.tsx

@@ -31,6 +31,7 @@ export default function DatePickerModalHeader(
           <Appbar style={styles.appbarHeader}>
             <Appbar.Action
               icon="close"
+              accessibilityLabel={getTranslation(locale, 'close')}
               onPress={props.onDismiss}
               color={color}
               testID="react-native-paper-dates-close"

src/Date/Day.tsx

@@ -73,6 +73,7 @@ function Day(props: {
           styles.button,
           { backgroundColor: inRange ? selectColor : undefined },
         ]}
+        accessibilityRole="button"
         // RN types bug
         hasTVPreferredFocus={undefined}
         tvParallaxProperties={undefined}

src/Date/Month.tsx

@@ -260,6 +260,8 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
         <TouchableRipple
           disabled={!isHorizontal}
           onPress={isHorizontal ? () => onPressYear(year) : undefined}
+          accessibilityRole="button"
+          accessibilityLabel={`${monthName} ${year}`}
           style={[
             styles.yearButton,
             {

src/Date/YearPicker.tsx

@@ -74,6 +74,8 @@ function YearPure({
     <View style={styles.year}>
       <TouchableRipple
         onPress={() => onPressYear(year)}
+        accessibilityRole="button"
+        accessibilityLabel={String(year)}
         style={styles.yearButton}
         // RN types bug
         hasTVPreferredFocus={undefined}

src/translations/en.ts

@@ -11,5 +11,10 @@ const en: TranslationsType = {
   mustBeLowerThan: 'Must be earlier then',
   mustBeBetween: 'Must be between',
   dateIsDisabled: 'Day is not allowed',
+  previous: 'Previous',
+  next: 'Next',
+  typeInDate: 'Type in date',
+  pickDateFromCalendar: 'Pick date from calendar',
+  close: 'Close',
 }
 export default en

src/translations/enGB.ts

@@ -11,5 +11,10 @@ const enGB: TranslationsType = {
   mustBeLowerThan: 'Must be earlier then',
   mustBeBetween: 'Must be between',
   dateIsDisabled: 'Day is not allowed',
+  previous: 'Previous',
+  next: 'Next',
+  typeInDate: 'Type in date',
+  pickDateFromCalendar: 'Pick date from calendar',
+  close: 'Close',
 }
 export default enGB

src/translations/utils.ts

@@ -8,6 +8,11 @@ export type TranslationsType = {
   mustBeLowerThan: string
   mustBeBetween: string
   dateIsDisabled: string
+  previous: string
+  next: string
+  typeInDate: string
+  pickDateFromCalendar: string
+  close: string
 }
 
 let translationsPerLocale: Record<string, TranslationsType> = {}