feat: custom accessibility labels

README.md

@@ -143,6 +143,16 @@ export function Calendar() {
 | `disableMonthPicker` | `boolean`                           | Whether to disable the month picker.                      |
 | `disableYearPicker`  | `boolean`                           | Whether to disable the year picker.                       |
 
+## Accessibility
+
+| Name                              | Type                           | Description                                 |
+| --------------------------------- | ------------------------------ | ------------------------------------------- |
+| `yearSelectorAccessibilityLabel`  | `string` \| `(date) => string` | Year selector custom accessibility label.   |
+| `monthSelectorAccessibilityLabel` | `string` \| `(date) => string` | Month selector custom accessibility label.  |
+| `timeSelectorAccessibilityLabel`  | `string` \| `(date) => string` | Time selector custom accessibility label.   |
+| `prevButtonAccessibilityLabel`    | `string`                       | Previous button custom accessibility label. |
+| `nextButtonAccessibilityLabel`    | `string`                       | Next button custom accessibility label.     |
+
 ## Styling
 
 DateTimePicker comes with a minimal style, making it easy to extend and customize according to your needs.

src/components/header/month-button.tsx

@@ -13,12 +13,18 @@ const MonthButton = () => {
     classNames,
     disableMonthPicker,
     monthCaptionFormat,
+    monthSelectorAccessibilityLabel,
   } = useCalendarContext();
 
   const currentMonthText = dayjs(currentDate)
     .locale(locale)
     .format(monthCaptionFormat === 'full' ? 'MMMM' : 'MMM');
 
+  const accessibilityLabel =
+    typeof monthSelectorAccessibilityLabel === 'function'
+      ? monthSelectorAccessibilityLabel(currentDate)
+      : monthSelectorAccessibilityLabel || currentMonthText;
+
   return (
     <Pressable
       disabled={disableMonthPicker}
@@ -27,7 +33,7 @@ const MonthButton = () => {
       }
       testID="btn-month"
       accessibilityRole="button"
-      accessibilityLabel={currentMonthText}
+      accessibilityLabel={accessibilityLabel}
     >
       <View
         style={styles?.month_selector}

src/components/header/next-button.tsx

@@ -27,6 +27,7 @@ const NextButton = ({ style, className }: NextButtonProps) => {
     onChangeYear,
     calendarView,
     components = {},
+    nextButtonAccessibilityLabel,
   } = useCalendarContext();
 
   const colorScheme = useColorScheme();
@@ -51,7 +52,7 @@ const NextButton = ({ style, className }: NextButtonProps) => {
       onPress={onPress}
       testID="btn-next"
       accessibilityRole="button"
-      accessibilityLabel="Next"
+      accessibilityLabel={nextButtonAccessibilityLabel || 'Next'}
     >
       <View
         style={[defaultStyles.iconContainer, defaultStyles.next, style]}

src/components/header/prev-button.tsx

@@ -27,6 +27,7 @@ const PrevButton = ({ style, className }: PrevButtonProps) => {
     onChangeMonth,
     onChangeYear,
     components = {},
+    prevButtonAccessibilityLabel,
   } = useCalendarContext();
 
   const colorScheme = useColorScheme();
@@ -51,7 +52,7 @@ const PrevButton = ({ style, className }: PrevButtonProps) => {
       onPress={onPress}
       testID="btn-prev"
       accessibilityRole="button"
-      accessibilityLabel="Prev"
+      accessibilityLabel={prevButtonAccessibilityLabel || 'Prev'}
     >
       <View
         style={[defaultStyles.iconContainer, defaultStyles.prev, style]}

src/components/header/time-button.tsx

@@ -14,6 +14,7 @@ export const TimeButton = () => {
     styles,
     classNames,
     numerals = 'latn',
+    timeSelectorAccessibilityLabel,
   } = useCalendarContext();
 
   const { hour, minute } = useMemo(
@@ -35,11 +36,17 @@ export const TimeButton = () => {
     return `${hourLabel}:${minuteLabel}`;
   }, [numerals, hour, minute]);
 
+  const accessibilityLabel =
+    typeof timeSelectorAccessibilityLabel === 'function'
+      ? timeSelectorAccessibilityLabel(date || currentDate)
+      : timeSelectorAccessibilityLabel ||
+        dayjs(date || currentDate).format('HH:mm');
+
   return (
     <Pressable
       onPress={() => setCalendarView(calendarView === 'time' ? 'day' : 'time')}
       accessibilityRole="button"
-      accessibilityLabel={dayjs(date || currentDate).format('HH:mm')}
+      accessibilityLabel={accessibilityLabel}
     >
       <View style={styles?.time_selector} className={classNames?.time_selector}>
         <Text

src/components/header/year-button.tsx

@@ -15,9 +15,16 @@ const YearButton = () => {
     classNames,
     disableYearPicker,
     numerals = 'latn',
+    yearSelectorAccessibilityLabel,
   } = useCalendarContext();
 
   const years = getYearRange(currentYear);
+
+  const accessibilityLabel =
+    typeof yearSelectorAccessibilityLabel === 'function'
+      ? yearSelectorAccessibilityLabel(currentDate)
+      : yearSelectorAccessibilityLabel || dayjs(currentDate).format('YYYY');
+
   return (
     <Pressable
       disabled={disableYearPicker}
@@ -27,7 +34,7 @@ const YearButton = () => {
       }}
       testID="btn-year"
       accessibilityRole="button"
-      accessibilityLabel={dayjs(currentDate).format('YYYY')}
+      accessibilityLabel={accessibilityLabel}
     >
       <View
         style={[defaultStyles.container, styles?.year_selector]}

src/types.ts

@@ -168,6 +168,11 @@ export interface DatePickerBaseProps {
   /** use to handle month and year selectors */
   month?: number;
   year?: number;
+  yearSelectorAccessibilityLabel?: string | ((date: DateType) => string);
+  monthSelectorAccessibilityLabel?: string | ((date: DateType) => string);
+  timeSelectorAccessibilityLabel?: string | ((date: DateType) => string);
+  prevButtonAccessibilityLabel?: string;
+  nextButtonAccessibilityLabel?: string;
   onMonthChange?: (month: number) => void;
   onYearChange?: (year: number) => void;
 }