diff --git a/README.md b/README.md index c247e58..0d06cdd 100644 --- a/README.md +++ b/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. diff --git a/src/components/header/month-button.tsx b/src/components/header/month-button.tsx index dd9873d..139f7e3 100644 --- a/src/components/header/month-button.tsx +++ b/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 ( { } testID="btn-month" accessibilityRole="button" - accessibilityLabel={currentMonthText} + accessibilityLabel={accessibilityLabel} > { 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'} > { 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'} > { 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 ( setCalendarView(calendarView === 'time' ? 'day' : 'time')} accessibilityRole="button" - accessibilityLabel={dayjs(date || currentDate).format('HH:mm')} + accessibilityLabel={accessibilityLabel} > { classNames, disableYearPicker, numerals = 'latn', + yearSelectorAccessibilityLabel, } = useCalendarContext(); const years = getYearRange(currentYear); + + const accessibilityLabel = + typeof yearSelectorAccessibilityLabel === 'function' + ? yearSelectorAccessibilityLabel(currentDate) + : yearSelectorAccessibilityLabel || dayjs(currentDate).format('YYYY'); + return ( { }} testID="btn-year" accessibilityRole="button" - accessibilityLabel={dayjs(currentDate).format('YYYY')} + accessibilityLabel={accessibilityLabel} > string); + monthSelectorAccessibilityLabel?: string | ((date: DateType) => string); + timeSelectorAccessibilityLabel?: string | ((date: DateType) => string); + prevButtonAccessibilityLabel?: string; + nextButtonAccessibilityLabel?: string; onMonthChange?: (month: number) => void; onYearChange?: (year: number) => void; }