fix: update react-date-picker and date-fns

.changeset/little-badgers-appear.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Add accessible name to dialog for Filter components

.changeset/small-tools-carry.md

@@ -0,0 +1,9 @@
+---
+"@kaizen/components": patch
+---
+
+Update dependencies
+
+- "date-fns": "^3.0.6"
+- "react-day-picker": "^8.10.0"
+  - Note: We are aware that the update includes broken a11y behaviour from the library (https://github.com/gpbl/react-day-picker/issues/1688), but we have opted to prevent lagging behind version updates instead

packages/components/package.json

@@ -64,7 +64,7 @@
     "@react-stately/select": "^3.6.1",
     "@react-types/shared": "^3.22.0",
     "classnames": "^2.5.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.0.6",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.5.2",
@@ -79,7 +79,7 @@
     "prosemirror-utils": "^1.2.1-0",
     "prosemirror-view": "^1.32.7",
     "react-animate-height": "^3.2.3",
-    "react-day-picker": "8.4.1",
+    "react-day-picker": "^8.10.0",
     "react-focus-lock": "^2.9.6",
     "react-focus-on": "^3.9.1",
     "react-media": "^1.10.0",

packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -96,29 +96,40 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    monthName: string,
+    dayName: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    const month = within(calendar).getByRole("grid", { name: monthName })
+    return within(month).getByRole("gridcell", { name: dayName })
   }
 
   const calendarsPseudoStates = [
     {
       id: "id__calendar-range__start",
-      buttonDescription: "19th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "19",
     },
     {
       id: "id__calendar-range__middle",
-      buttonDescription: "26th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "26",
+    },
+    {
+      id: "id__calendar-range__end",
+      monthName: "March 2022",
+      dayName: "4",
     },
-    { id: "id__calendar-range__end", buttonDescription: "4th March (Friday)" },
   ]
 
-  calendarsPseudoStates.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(`${id}--hover`, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, monthName, dayName }) => {
+    getElementWithinCalendar(`${id}--hover`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-    getElementWithinCalendar(`${id}--focus`, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -109,9 +109,13 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    role: string,
+    name: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    return within(calendar).getByRole(role, { name })
   }
 
   const todayCalendarIds = [
@@ -121,44 +125,33 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   ]
 
   todayCalendarIds.forEach(id => {
-    getElementWithinCalendar(id, "1st May (Sunday)").classList.add(
-      styles.dayToday
-    )
+    getElementWithinCalendar(id, "gridcell", "1").classList.add(styles.dayToday)
   })
 
-  const calendarsHover = [
-    { id: "id--calendar--hover", buttonDescription: "5th September (Sunday)" },
+  const calendarsPseudoStates = [
+    {
+      id: "id--calendar",
+      role: "gridcell",
+      name: "5",
+    },
     {
-      id: "id--calendar-selected--hover",
-      buttonDescription: "5th September (Sunday)",
+      id: "id--calendar-selected",
+      role: "gridcell",
+      name: "5",
     },
     {
-      id: "id--calendar-navigation--hover",
-      buttonDescription: "Go to previous month",
+      id: "id--calendar-navigation",
+      role: "button",
+      name: "Go to previous month",
     },
   ]
 
-  calendarsHover.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, role, name }) => {
+    getElementWithinCalendar(`${id}--hover`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-  })
-
-  const calendarsFocus = [
-    { id: "id--calendar--focus", buttonDescription: "5th September (Sunday)" },
-    {
-      id: "id--calendar-selected--focus",
-      buttonDescription: "5th September (Sunday)",
-    },
-    {
-      id: "id--calendar-navigation--focus",
-      buttonDescription: "Go to previous month",
-    },
-  ]
-
-  calendarsFocus.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DayPicker,
   DateRange,

packages/components/src/Calendar/utils/formatDateAsNumeral.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { isInvalidDate } from "./isInvalidDate"
 

packages/components/src/Calendar/utils/formatDateAsText.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns"
+import { Locale, format } from "date-fns"
 import { DateFormat } from "../enums"
 import { DisabledDays } from "../types"
 import { isDisabledDate } from "./isDisabledDate"

packages/components/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx

@@ -1,15 +1,14 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { CalendarSingle } from "../CalendarSingle"
 import { isSelectingDayInCalendar } from "./isSelectingDayInCalendar"
 
 describe("isSelectingDayInCalendar", () => {
   it("returns true when target is a Calendar day", () => {
     render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
-    const calendarDayElement = screen.getByRole("button", {
-      name: "1st February (Tuesday)",
-    })
-    expect(isSelectingDayInCalendar(calendarDayElement)).toBe(true)
+    const targetMonth = screen.getByRole("grid", { name: "February 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(isSelectingDayInCalendar(targetDay)).toBe(true)
   })
 
   it("returns false when target is not a Calendar day", () => {

packages/components/src/Calendar/utils/parseDateAsTextOrNumeral.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { parseDateFromNumeralFormatValue } from "./parseDateFromNumeralFormatValue"
 import { parseDateFromTextFormatValue } from "./parseDateFromTextFormatValue"
 

packages/components/src/Calendar/utils/parseDateFromNumeralFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromNumeralFormatValue = (

packages/components/src/Calendar/utils/parseDateFromTextFormatValue.ts

@@ -1,4 +1,4 @@
-import { parse } from "date-fns"
+import { Locale, parse } from "date-fns"
 import { DateFormat } from "../enums"
 
 export const parseDateFromTextFormatValue = (

packages/components/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
 import { CalendarSingle, CalendarSingleProps } from "../CalendarSingle"
@@ -8,48 +8,53 @@ import { setFocusInCalendar } from "./setFocusInCalendar"
 const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
   <CalendarSingle
     id="calendar-dialog"
-    onDayClick={jest.fn<void, [Date]>()}
+    onDayClick={jest.fn()}
     locale={enUS}
-    onMount={(calendarElement): void =>
+    onMount={calendarElement =>
       setFocusInCalendar(calendarElement, props.selected)
     }
     {...props}
   />
 )
 
 const today = new Date()
-const todayFormatted = format(today, "do MMMM (eeee)") // e.g 6th June (Monday)
+const todayMonth = format(today, "MMMM yyyy") // e.g "June 2023"
+const todayDay = today.getDate().toString() // e.g "6"
 
 describe("setFocusInCalendar", () => {
   it("should focus on today when no date is selected", () => {
     render(<CalendarWrapper />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the selected day", () => {
     render(<CalendarWrapper selected={new Date("2022-08-15")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "15th August (Monday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "August 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "15" })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on today when selected date is invalid", () => {
     render(<CalendarWrapper selected={new Date("potato")} />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the first of the month when there is no selected day nor in the current month", () => {
     render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "1st May (Sunday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(targetDay).toHaveFocus()
   })
 })

packages/components/src/DateInput/DateInputDescription/DateInputDescription.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import type { Locale } from "date-fns"
 import { LabelledMessage } from "~components/LabelledMessage"
 import { formatDescriptionInputFormat } from "./utils/formatDescriptionInputFormat"
 import styles from "./DateInputDescription.module.scss"

packages/components/src/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.ts

@@ -1,2 +1,4 @@
+import type { Locale } from "date-fns"
+
 export const formatDescriptionInputFormat = (locale: Locale): string =>
   locale.formatLong?.date({ width: "short" }).toLowerCase()

packages/components/src/DatePicker/DatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { DatePicker } from "./DatePicker"
 import { ValidationResponse } from "./types"
@@ -166,9 +166,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
       const input = screen.getByLabelText("Input label")
@@ -193,9 +192,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -233,9 +231,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -278,9 +275,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -418,9 +414,9 @@ describe("<DatePicker /> - Validation", () => {
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
       await waitFor(() => {
         expect(onValidate).toBeCalledTimes(1)

packages/components/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -1,5 +1,6 @@
 import React, { useId } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import { enAU } from "date-fns/locale"
 import {
   DateInputDescription,

packages/components/src/DatePicker/utils/getLocale.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { enAU, enUS } from "date-fns/locale"
 import { StringSuggestions } from "~types/StringSuggestions"