chore: temp 2

cypress/components/date/date.cy.tsx

@@ -411,6 +411,10 @@ context("Test for DateInput component", () => {
             locale: () => localeValue,
             date: {
               dateFnsLocale: () => dateFnsLocaleValue,
+              ariaLabels: {
+                previousMonthButton: () => "Previous month",
+                nextMonthButton: () => "Next month",
+              },
             },
           }
         );
@@ -478,6 +482,10 @@ context("Test for DateInput component", () => {
             locale: () => localeValue,
             date: {
               dateFnsLocale: () => dateFnsLocaleValue,
+              ariaLabels: {
+                previousMonthButton: () => "Previous month",
+                nextMonthButton: () => "Next month",
+              },
             },
           }
         );
@@ -544,6 +552,10 @@ context("Test for DateInput component", () => {
             locale: () => localeValue,
             date: {
               dateFnsLocale: () => dateFnsLocaleValue,
+              ariaLabels: {
+                previousMonthButton: () => "Previous month",
+                nextMonthButton: () => "Next month",
+              },
             },
           }
         );

src/components/date-range/date-range.stories.tsx

@@ -285,7 +285,13 @@ export const LocaleOverrideExampleImplementation: ComponentStory<
       <I18nProvider
         locale={{
           locale: () => "fr-FR",
-          date: { dateFnsLocale: () => fr },
+          date: {
+            dateFnsLocale: () => fr,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+            },
+          },
         }}
       >
         <DateRange

src/components/date/__internal__/date-picker/date-picker.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import DayPicker, {
   DayPickerProps,
   DayModifiers,
@@ -115,6 +115,31 @@ export const DatePicker = ({
   }, [l, localize]);
   const ref = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (open) {
+      // this is a temporary fix for some axe issues that are baked into the library we use for the picker
+      const captionElement = ref.current?.querySelector(".DayPicker-Caption");
+      if (captionElement) {
+        captionElement.removeAttribute("role");
+        captionElement.removeAttribute("aria-live");
+      }
+
+      // focus the selected date or current date today first
+      const selectedDay =
+        ref.current?.querySelector(".DayPicker-Day--selected") ||
+        ref.current?.querySelector(".DayPicker-Day--today");
+      const firstDay = ref.current?.querySelector(
+        ".DayPicker-Day[tabindex='0']"
+      );
+
+      /* istanbul ignore else */
+      if (selectedDay && firstDay !== selectedDay) {
+        selectedDay?.setAttribute("tabindex", "0");
+        firstDay?.setAttribute("tabindex", "-1");
+      }
+    }
+  }, [open]);
+
   const handleDayClick = (
     date: Date,
     modifiers: DayModifiers,
@@ -150,8 +175,8 @@ export const DatePicker = ({
   };
 
   const handleOnDayKeyDown = (
-    day: Date,
-    modifiers: DayModifiers,
+    _day: Date,
+    _modifiers: DayModifiers,
     ev: React.KeyboardEvent<HTMLDivElement>
   ) => {
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
@@ -167,7 +192,7 @@ export const DatePicker = ({
 
       const input = inputElement.current?.querySelector("input");
 
-      if (input) {
+      if (input && filteredElements.length) {
         const nextIndex = filteredElements.indexOf(input as HTMLElement);
         setOpen(false);
         filteredElements[nextIndex + 1]?.focus();

src/components/date/__internal__/date-picker/date-picker.spec.tsx

@@ -228,7 +228,13 @@ describe("StyledDayPicker", () => {
 
     const buildLocale = (l: keyof typeof translations) => ({
       locale: () => l,
-      date: { dateFnsLocale: () => translations[l] },
+      date: {
+        dateFnsLocale: () => translations[l],
+        ariaLabels: {
+          previousMonthButton: () => "foo",
+          nextMonthButton: () => "foo",
+        },
+      },
     });
 
     type WeekdaysType = { long?: string[]; short?: string[] };

src/components/date/__internal__/navbar/navbar.component.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useRef } from "react";
 import StyledButton from "./button.style";
 import StyledNavbar from "./navbar.style";
 import Icon from "../../../icon";
+import Events from "../../../../__internal__/utils/helpers/events";
+import useLocale from "../../../../hooks/__internal__/useLocale";
 
 export interface NavbarProps {
   onPreviousClick?: () => void;
@@ -13,21 +15,41 @@ export const Navbar = ({
   onPreviousClick,
   onNextClick,
   className,
-}: NavbarProps) => (
-  <StyledNavbar className={className}>
-    <StyledButton
-      aria-label="date-picker-navigation-previous-month"
-      onClick={() => onPreviousClick?.()}
-    >
-      <Icon type="chevron_left" />
-    </StyledButton>
-    <StyledButton
-      aria-label="date-picker-navigation-next-month"
-      onClick={() => onNextClick?.()}
-    >
-      <Icon type="chevron_right" />
-    </StyledButton>
-  </StyledNavbar>
-);
+}: NavbarProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const locale = useLocale();
+  const { previousMonthButton, nextMonthButton } = locale.date.ariaLabels;
+
+  const handleKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (
+      Events.isLeftKey(ev) ||
+      Events.isRightKey(ev) ||
+      Events.isUpKey(ev) ||
+      Events.isDownKey(ev)
+    ) {
+      ev.stopPropagation();
+      ev.preventDefault();
+    }
+  };
+
+  return (
+    <StyledNavbar className={className} ref={ref}>
+      <StyledButton
+        aria-label={previousMonthButton()}
+        onClick={() => onPreviousClick?.()}
+        onKeyDown={handleKeyDown}
+      >
+        <Icon type="chevron_left" />
+      </StyledButton>
+      <StyledButton
+        aria-label={nextMonthButton()}
+        onClick={() => onNextClick?.()}
+        onKeyDown={handleKeyDown}
+      >
+        <Icon type="chevron_right" />
+      </StyledButton>
+    </StyledNavbar>
+  );
+};
 
 export default Navbar;

src/components/date/date.component.tsx

@@ -309,14 +309,14 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       }
 
       // if (Events.isEscKey(ev)) {
-      //   setOpen(false)
+      //   setOpen(false);
       // }
 
       // if (Events.isEnterKey(ev) && !open) {
       //   setOpen(true)
       // }
 
-      if (Events.isTabKey(ev)) {
+      if (open && Events.isTabKey(ev)) {
         if (Events.isShiftKey(ev)) {
           setOpen(false);
         } else if (!disablePortal) {

src/components/date/date.spec.tsx

@@ -42,46 +42,51 @@ import {
   enUS as enUSLocale,
 } from "../../locales/date-fns-locales";
 import Logger from "../../__internal__/utils/logger";
+import StyledButton from "./__internal__/navbar/button.style";
 
+const ariaLabels = {
+  nextMonthButton: () => "foo",
+  previousMonthButton: () => "foo",
+};
 const locales = {
   "en-GB": {
     locale: () => "en-GB",
-    date: { dateFnsLocale: () => enGBLocale },
+    date: { ariaLabels, dateFnsLocale: () => enGBLocale },
     separator: "/",
   },
   de: {
     locale: () => "de",
-    date: { dateFnsLocale: () => deLocale },
+    date: { ariaLabels, dateFnsLocale: () => deLocale },
     separator: ".",
   },
   es: {
     locale: () => "es",
-    date: { dateFnsLocale: () => esLocale },
+    date: { ariaLabels, dateFnsLocale: () => esLocale },
     separator: "/",
   },
   "en-ZA": {
     locale: () => "en-ZA",
-    date: { dateFnsLocale: () => enZALocale },
+    date: { ariaLabels, dateFnsLocale: () => enZALocale },
     separator: "/",
   },
   "fr-FR": {
     locale: () => "fr-FR",
-    date: { dateFnsLocale: () => frLocale },
+    date: { ariaLabels, dateFnsLocale: () => frLocale },
     separator: "/",
   },
   "fr-CA": {
     locale: () => "fr-CA",
-    date: { dateFnsLocale: () => frCALocale },
+    date: { ariaLabels, dateFnsLocale: () => frCALocale },
     separator: "/",
   },
   "en-US": {
     locale: () => "en-US",
-    date: { dateFnsLocale: () => enUSLocale },
+    date: { ariaLabels, dateFnsLocale: () => enUSLocale },
     separator: "/",
   },
   "en-CA": {
     locale: () => "en-CA",
-    date: { dateFnsLocale: () => enCALocale },
+    date: { ariaLabels, dateFnsLocale: () => enCALocale },
     separator: "/",
   },
 };
@@ -515,15 +520,16 @@ describe("Date", () => {
       });
     });
 
-    describe('and with the "Tab" key', () => {
-      it('then the "DatePicker" should be closed', () => {
+    describe('with the "Tab" key', () => {
+      it('then the "DatePicker" should be remain open and the previous month navigation button should be focused', () => {
         expect(wrapper.update().find(DayPicker).exists()).toBe(true);
         simulateOnKeyDown(wrapper, "Tab");
-        expect(wrapper.update().find(DayPicker).exists()).toBe(false);
+        expect(wrapper.update().find(DayPicker).exists()).toBe(true);
+        expect(wrapper.find(StyledButton).first()).toBeFocused();
       });
     });
 
-    describe('and with the key other that "Tab"', () => {
+    describe('with a key other that "Tab"', () => {
       it('then the "DatePicker" should not be closed', () => {
         expect(wrapper.update().find(DayPicker).exists()).toBe(true);
         simulateOnKeyDown(wrapper, "Enter");

src/components/date/date.stories.tsx

@@ -170,7 +170,7 @@ export const WithLabelHelp: ComponentStory<typeof DateInput> = () => {
 };
 
 export const WithDisabledPortal: ComponentStory<typeof DateInput> = () => {
-  const [state, setState] = useState("01/10/2016");
+  const [state, setState] = useState("02/10/2016");
   const setValue = (ev: DateChangeEvent) => {
     setState(ev.target.value.formattedValue);
   };
@@ -448,7 +448,13 @@ export const LocaleOverrideExampleImplementation: ComponentStory<
       <I18nProvider
         locale={{
           locale: () => "de-DE",
-          date: { dateFnsLocale: () => de },
+          date: {
+            dateFnsLocale: () => de,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+            },
+          },
         }}
       >
         <DateInput
@@ -460,7 +466,13 @@ export const LocaleOverrideExampleImplementation: ComponentStory<
       <I18nProvider
         locale={{
           locale: () => "zh-CN",
-          date: { dateFnsLocale: () => zhCN },
+          date: {
+            dateFnsLocale: () => zhCN,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+            },
+          },
         }}
       >
         <DateInput

src/locales/en-gb.ts

@@ -42,6 +42,10 @@ const enGB: Locale = {
   },
   date: {
     dateFnsLocale: () => enGBDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Previous month",
+      nextMonthButton: () => "Next month",
+    },
   },
   dialog: {
     ariaLabels: {

src/locales/locale.ts

@@ -31,6 +31,10 @@ interface Locale {
   };
   date: {
     dateFnsLocale: () => DateFnsLocale;
+    ariaLabels: {
+      previousMonthButton: () => string;
+      nextMonthButton: () => string;
+    };
   };
   dialog: {
     ariaLabels: {

src/locales/pl-pl.ts

@@ -101,6 +101,10 @@ const plPL: Locale = {
 
   date: {
     dateFnsLocale: () => plDateLocale,
+    ariaLabels: {
+      previousMonthButton: () => "Poprzedni miesiąc",
+      nextMonthButton: () => "Następny miesiąc",
+    },
   },
   dialog: {
     ariaLabels: {