fix(Calendar): aria-label format to day, month, year (#18146)

* Calenda :announce the date in the order [day], [month], [year] * Change files * Calendr:announce the date in the order [day], [month], [year] * Update packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Update packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> * Updated jest snapshot to include spaces Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
microsoft · May 14, 2021 · 6f5eb94 · 6f5eb94
1 parent 2fcfc2b
commit 6f5eb94
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 43 deletions.
diff --git a/change/@fluentui-react-30918b99-3db2-495f-8779-aa5042aaff74.json b/change/@fluentui-react-30918b99-3db2-495f-8779-aa5042aaff74.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Calenda :announce the date in the order [day], [month], [year]",
+  "packageName": "@fluentui/react",
+  "email": "tkrasniqi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/packages/react/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
@@ -207,7 +207,13 @@ export const CalendarGridDayCell: React.FunctionComponent<ICalendarGridDayCellPr
     }
   };
 
-  let ariaLabel = dateTimeFormatter.formatMonthDayYear(day.originalDate, strings);
+  let ariaLabel =
+    day.originalDate.getDate() +
+    ', ' +
+    strings.months[day.originalDate.getMonth()] +
+    ', ' +
+    day.originalDate.getFullYear();
+
   if (day.isMarked) {
     ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
   }