fix(DatePicker): Add aria-label to calendar header columns. (#1528)

Co-authored-by: Nikita Orliak <[email protected]>
cengage · Nov 6, 2024 · 8004c9f · 8004c9f · github-actions · Nov 6, 2024
1 parent e02cd4e
commit 8004c9f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/a11y-datepicker-calendar-header-columns.md 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
@@ -143,7 +143,12 @@ export const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = (
   const startOfWeek = days.indexOf(i18n.datePicker.startOfWeek);
   const sortedDays = days.slice(startOfWeek).concat(days.slice(0, startOfWeek));
   const tableDaysHeaders = sortedDays.map((day, index) => (
-    <Th key={index} theme={theme} isInverse={context.isInverse}>
+    <Th
+      key={index}
+      theme={theme}
+      isInverse={context.isInverse}
+      aria-label={i18n.days.long[day]}
+    >
       {i18n.days.min[day]}
     </Th>
   ));

diff --git 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<Date | undefined>(
+  const [chosenDate, setChosenDate] = React.useState<Date | undefined>(
     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,