diff --git a/.changeset/a11y-datepicker-calendar-header-columns.md b/.changeset/a11y-datepicker-calendar-header-columns.md new file mode 100644 index 000000000..0b483cca1 --- /dev/null +++ b/.changeset/a11y-datepicker-calendar-header-columns.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(DatePicker): Add `aria-label` to calendar header columns. diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx index a55089500..50359c6b1 100644 --- a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx +++ b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx @@ -143,7 +143,12 @@ export const CalendarMonth: React.FunctionComponent = ( const startOfWeek = days.indexOf(i18n.datePicker.startOfWeek); const sortedDays = days.slice(startOfWeek).concat(days.slice(0, startOfWeek)); const tableDaysHeaders = sortedDays.map((day, index) => ( - + {i18n.days.min[day]} )); diff --git a/website/react-magma-docs/src/pages/api/date-pickers.mdx b/website/react-magma-docs/src/pages/api/date-pickers.mdx index 133f72429..d59e2f2c5 100644 --- a/website/react-magma-docs/src/pages/api/date-pickers.mdx +++ b/website/react-magma-docs/src/pages/api/date-pickers.mdx @@ -62,7 +62,7 @@ import React from 'react'; import { DatePicker, getDateFromString, inDateRange } from 'react-magma-dom'; export function Example() { - const [chosenDate, setChosenDate] = React.useState( + const [chosenDate, setChosenDate] = React.useState( undefined ); const minDate = '01/09/2024'; @@ -76,9 +76,12 @@ export function Example() { const convertedMinDate = getDateFromString(minDate); const convertedMaxDate = getDateFromString(maxDate); - if (chosenDate && !inDateRange(chosenDate, convertedMinDate, convertedMaxDate)) { + if ( + chosenDate && + !inDateRange(chosenDate, convertedMinDate, convertedMaxDate) + ) { return `Please enter a date within the range ${minDate} - ${maxDate}`; - } + } return; } @@ -416,6 +419,15 @@ export function Example() { friday: 'V', saturday: 'S', }, + long: { + sunday: 'Domingo', + monday: 'Lunes', + tuesday: 'Martes', + wednesday: 'Miércoles', + thursday: 'Jueves', + friday: 'Viernes', + saturday: 'Sábado', + }, }, datePicker: { ...defaultI18n.datePicker,