From e2757cabfc8ff70af011dfa98110dc76ca26faba Mon Sep 17 00:00:00 2001
From: Self-hosted Renovate Bot
 <135776+cultureamp-renovate[bot]@users.noreply.github.com>
Date: Sun, 24 Dec 2023 18:36:12 +0000
Subject: [PATCH 1/8] fix(deps): update dependency date-fns to v3

---
 packages/components/package.json | 2 +-
 yarn.lock                        | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index b686b63d517..36c55c953f8 100644
--- a/packages/components/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 94c9543253e..dca5d759986 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7512,13 +7512,6 @@ dataloader@^1.4.0:
   resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
   integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
 
-date-fns@^2.30.0:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-
 date-fns@^3.0.6:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.2.0.tgz#c97cf685b62c829aa4ecba554e4a51768cf0bffc"

From 937694e7996d04d6eaa1eda1f539f924cba2ce35 Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Mon, 15 Jan 2024 18:07:05 +1100
Subject: [PATCH 2/8] chore: add changeset

---
 .changeset/small-tools-carry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/small-tools-carry.md

diff --git a/.changeset/small-tools-carry.md b/.changeset/small-tools-carry.md
new file mode 100644
index 00000000000..a7763f9ed52
--- /dev/null
+++ b/.changeset/small-tools-carry.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update dependency date-fns to v3

From 59c34891ab7a90b8fbfdf1a3759400905f3a3ae0 Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Tue, 16 Jan 2024 13:10:38 +1100
Subject: [PATCH 3/8] fix: add Locale type imports

---
 .../src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx    | 1 +
 packages/components/src/Calendar/utils/formatDateAsNumeral.ts   | 2 +-
 packages/components/src/Calendar/utils/formatDateAsText.ts      | 2 +-
 .../components/src/Calendar/utils/parseDateAsTextOrNumeral.ts   | 1 +
 .../src/Calendar/utils/parseDateFromNumeralFormatValue.ts       | 2 +-
 .../src/Calendar/utils/parseDateFromTextFormatValue.ts          | 2 +-
 .../src/DateInput/DateInputDescription/DateInputDescription.tsx | 1 +
 .../DateInputDescription/utils/formatDescriptionInputFormat.ts  | 2 ++
 .../DatePicker/subcomponents/DateInputField/DateInputField.tsx  | 1 +
 packages/components/src/DatePicker/utils/getLocale.ts           | 1 +
 .../src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts   | 1 +
 .../subcomponents/DateInputField/DateInputField.tsx             | 1 +
 .../Filter/FilterDatePicker/utils/transformDateToInputValue.ts  | 1 +
 .../DateRangeDisplayLabel/DateRangeDisplayLabel.tsx             | 1 +
 .../subcomponents/DateRangeInputField/DateRangeInputField.tsx   | 1 +
 15 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
index f5070eeea39..0330983a757 100644
--- a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
+++ b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DayPicker,
   DateRange,
diff --git a/packages/components/src/Calendar/utils/formatDateAsNumeral.ts b/packages/components/src/Calendar/utils/formatDateAsNumeral.ts
index bb58db5d8af..9b0401384cb 100644
--- a/packages/components/src/Calendar/utils/formatDateAsNumeral.ts
+++ b/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"
 
diff --git a/packages/components/src/Calendar/utils/formatDateAsText.ts b/packages/components/src/Calendar/utils/formatDateAsText.ts
index 758a895a119..7908f4d9275 100644
--- a/packages/components/src/Calendar/utils/formatDateAsText.ts
+++ b/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"
diff --git a/packages/components/src/Calendar/utils/parseDateAsTextOrNumeral.ts b/packages/components/src/Calendar/utils/parseDateAsTextOrNumeral.ts
index ea6b20ca4b5..1fbf19de056 100644
--- a/packages/components/src/Calendar/utils/parseDateAsTextOrNumeral.ts
+++ b/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"
 
diff --git a/packages/components/src/Calendar/utils/parseDateFromNumeralFormatValue.ts b/packages/components/src/Calendar/utils/parseDateFromNumeralFormatValue.ts
index 88738693d93..5a6594db84b 100644
--- a/packages/components/src/Calendar/utils/parseDateFromNumeralFormatValue.ts
+++ b/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 = (
diff --git a/packages/components/src/Calendar/utils/parseDateFromTextFormatValue.ts b/packages/components/src/Calendar/utils/parseDateFromTextFormatValue.ts
index 72e79730d3b..6dce77b2fb4 100644
--- a/packages/components/src/Calendar/utils/parseDateFromTextFormatValue.ts
+++ b/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 = (
diff --git a/packages/components/src/DateInput/DateInputDescription/DateInputDescription.tsx b/packages/components/src/DateInput/DateInputDescription/DateInputDescription.tsx
index 469b54ff98e..2e3b420cf4a 100644
--- a/packages/components/src/DateInput/DateInputDescription/DateInputDescription.tsx
+++ b/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"
diff --git a/packages/components/src/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.ts b/packages/components/src/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.ts
index 2f4204d3812..c3ed57a3d07 100644
--- a/packages/components/src/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.ts
+++ b/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()
diff --git a/packages/components/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx b/packages/components/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx
index f53c2b4283d..2797bf866e4 100644
--- a/packages/components/src/DatePicker/subcomponents/DateInputField/DateInputField.tsx
+++ b/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,
diff --git a/packages/components/src/DatePicker/utils/getLocale.ts b/packages/components/src/DatePicker/utils/getLocale.ts
index 4a1a1c61e75..26d7032df03 100644
--- a/packages/components/src/DatePicker/utils/getLocale.ts
+++ b/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"
 
diff --git a/packages/components/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts b/packages/components/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts
index fbb5706e211..3f7c7882d47 100644
--- a/packages/components/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts
+++ b/packages/components/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts
@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import {
   DisabledDays,
   formatDateAsNumeral,
diff --git a/packages/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx b/packages/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx
index 0a4a8f55934..39799f2f666 100644
--- a/packages/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx
+++ b/packages/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DateInput,
   DateInputProps,
diff --git a/packages/components/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts b/packages/components/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts
index 3b6baa95200..7816f029b74 100644
--- a/packages/components/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts
+++ b/packages/components/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts
@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { DisabledDays, formatDateAsText } from "~components/Calendar"
 
 export const transformDateToInputValue = (
diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx
index 67efa81a464..c204912cd4b 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import { formatDateAsText } from "~components/Calendar"
 import styles from "./DateRangeDisplayLabel.module.scss"
 
diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx
index b31f896c38c..b8906c2c465 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx
@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import {
   DateInput,
   DateInputDescription,

From 7931d00c75f8905114d0b61ae68175c66978fede Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Wed, 17 Jan 2024 11:53:49 +1100
Subject: [PATCH 4/8] chore(deps): update react-day-picker to ^8.10.0

---
 .changeset/small-tools-carry.md  | 6 +++++-
 packages/components/package.json | 2 +-
 yarn.lock                        | 8 ++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/.changeset/small-tools-carry.md b/.changeset/small-tools-carry.md
index a7763f9ed52..99ef784932f 100644
--- a/.changeset/small-tools-carry.md
+++ b/.changeset/small-tools-carry.md
@@ -2,4 +2,8 @@
 "@kaizen/components": patch
 ---
 
-Update dependency date-fns to v3
+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
diff --git a/packages/components/package.json b/packages/components/package.json
index 36c55c953f8..0de900b9fa0 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -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",
diff --git a/yarn.lock b/yarn.lock
index dca5d759986..7959ff2d3a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14804,10 +14804,10 @@ react-colorful@^5.1.2:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-react-day-picker@8.4.1:
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.4.1.tgz#341572d7110d7e286f311f8f173ed9cb304eae6a"
-  integrity sha512-uqp/d3POv7127MmL7A16BNW746zYM/CxwfFdVanHMunKh2/8Y2a188KUpiHZH2Ck8IQlcS0I5HgC7xpRbBxK9w==
+react-day-picker@^8.10.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.0.tgz#729c5b9564967a924213978fb9c0751884a60595"
+  integrity sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg==
 
 react-docgen-typescript@^2.2.2:
   version "2.2.2"

From 32d1c092f32a86ceaf6e65992d69234201301f31 Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Wed, 17 Jan 2024 12:02:29 +1100
Subject: [PATCH 5/8] test: update calendar day selectors

---
 .../utils/isSelectingDayInCalendar.spec.tsx   |  9 ++--
 .../utils/setFocusInCalendar.spec.tsx         | 37 +++++++------
 .../src/DatePicker/DatePicker.spec.tsx        | 28 +++++-----
 .../FilterBarDatePicker.spec.tsx              | 39 ++++++--------
 .../FilterBarDateRangePicker.spec.tsx         | 13 +++--
 .../FilterDatePicker.spec.tsx                 |  8 ++-
 .../FilterDatePickerField.spec.tsx            | 46 ++++++++--------
 .../FilterDateRangePickerField.spec.tsx       | 54 ++++++++++---------
 8 files changed, 118 insertions(+), 116 deletions(-)

diff --git a/packages/components/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx b/packages/components/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx
index 8425ea2633e..70e788900a4 100644
--- a/packages/components/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx
+++ b/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", () => {
diff --git a/packages/components/src/Calendar/utils/setFocusInCalendar.spec.tsx b/packages/components/src/Calendar/utils/setFocusInCalendar.spec.tsx
index 0286c3ff4f9..468309fb10a 100644
--- a/packages/components/src/Calendar/utils/setFocusInCalendar.spec.tsx
+++ b/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,9 +8,9 @@ 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}
@@ -18,38 +18,43 @@ const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
 )
 
 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()
   })
 })
diff --git a/packages/components/src/DatePicker/DatePicker.spec.tsx b/packages/components/src/DatePicker/DatePicker.spec.tsx
index 43553e9b104..cc71552a268 100644
--- a/packages/components/src/DatePicker/DatePicker.spec.tsx
+++ b/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)
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx
index 224bf0ade69..32976fc00aa 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -113,53 +113,48 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when selecting a date", async () => {
-    const { getByRole } = render(
+    render(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
     )
-    const triggerButton = getByRole("button", {
+    const triggerButton = screen.getByRole("button", {
       name: "Drank : 6 Jun 2023",
     })
 
     await user.click(triggerButton)
 
     await waitFor(() => {
-      const dialog = getByRole("dialog")
+      const dialog = screen.getByRole("dialog")
       expect(dialog).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(
-        getByRole("button", { name: "Drank : 7 Jun 2023" })
+        screen.getByRole("button", { name: "Drank : 7 Jun 2023" })
       ).toBeInTheDocument()
     })
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn<void, [Date | undefined]>()
-    const { getByRole } = render(
-      <FilterBarDatePickerWrapper onDateChange={onChange} />
-    )
-    const triggerButton = getByRole("button", { name: "Drank" })
+    const onChange = jest.fn()
+    render(<FilterBarDatePickerWrapper onDateChange={onChange} />)
 
+    const triggerButton = screen.getByRole("button", { name: "Drank" })
     await user.click(triggerButton)
+
     await waitFor(() => {
-      const dialog = getByRole("dialog")
-      expect(dialog).toBeInTheDocument()
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(onChange.mock.calls).toEqual([[new Date("2023-06-07")]])
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx
index 76f9f0db392..661df3bec86 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -134,9 +134,8 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
     await user.click(document.body) // Exit the focus lock
 
@@ -169,10 +168,10 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
+
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith({
         from: new Date("2022-05-01"),
diff --git a/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx b/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx
index 455358ac968..0c20858f221 100644
--- a/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx
+++ b/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx
@@ -1,5 +1,5 @@
 import React, { 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 { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDatePicker, FilterDatePickerProps } from "."
@@ -75,10 +75,8 @@ describe("<FilterDatePicker />", () => {
       expect(dialog).toBeInTheDocument()
     })
 
-    const targetDay = screen.getByRole("button", {
-      name: "2nd May (Monday)",
-    })
-
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "2" })
     await user.click(targetDay)
 
     await waitFor(() => {
diff --git a/packages/components/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx b/packages/components/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx
index cc23ad26b54..12f8b809b4b 100644
--- a/packages/components/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx
+++ b/packages/components/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } 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 { FilterDatePickerField, FilterDatePickerFieldProps } from "."
 
@@ -77,10 +77,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -91,7 +92,7 @@ describe("<FilterDatePickerField />", () => {
         await waitFor(() => {
           expect(inputDate).toHaveValue("1 May 2022")
           expect(inputDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -105,10 +106,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -116,7 +118,7 @@ describe("<FilterDatePickerField />", () => {
         await user.keyboard("{Enter}")
 
         await waitFor(() => {
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
           expect(inputDateOnSubmit).toHaveBeenCalledWith(new Date("2022-05-01"))
         })
       })
@@ -189,10 +191,10 @@ describe("<FilterDatePickerField />", () => {
       render(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-01")} />
       )
-      const targetDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {
@@ -208,14 +210,15 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputDate).toHaveValue("12 May 2022")
       })
     })
@@ -228,8 +231,9 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -323,10 +327,10 @@ describe("<FilterDatePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {
diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx
index 7274702b059..85edd17a6fb 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } 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 { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
@@ -92,10 +92,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("2 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputStartDate)
         await user.clear(inputStartDate)
@@ -108,7 +109,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("22 May 2022")
           expect(endDateOnBlur).not.toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
 
@@ -132,10 +133,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("1 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "31st May (Tuesday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "31",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputEndDate)
         await user.clear(inputEndDate)
@@ -148,7 +150,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).not.toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("31 May 2022")
           expect(endDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -236,14 +238,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputStartDate = screen.getByLabelText("Date from")
       expect(inputStartDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputStartDate).toHaveValue("12 May 2022")
       })
     })
@@ -261,14 +264,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputEndDate = screen.getByLabelText("Date to")
       expect(inputEndDate).toHaveValue("15 Jun 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "23rd June (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "23",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputEndDate).toHaveValue("23 Jun 2022")
       })
     })
@@ -288,8 +292,9 @@ describe("<FilterDateRangePickerField />", () => {
       expect(inputStartDate).toHaveValue("15 May 2022")
       expect(inputEndDate).toHaveValue("22 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -455,7 +460,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
 
@@ -470,7 +475,7 @@ describe("<FilterDateRangePickerField />", () => {
             expect(dateEndErrorContainer).not.toBeInTheDocument()
             // End date in Calendar is re-selected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(3)
           })
         })
@@ -499,7 +504,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
         })
@@ -636,8 +641,9 @@ describe("<FilterDateRangePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
       await user.click(targetDay)
 

From e69144dd5c143e1df6f59cb16a5f05bdf86714b0 Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Wed, 17 Jan 2024 15:00:13 +1100
Subject: [PATCH 6/8] fix(Filter): add accessible name to dialog

---
 .changeset/little-badgers-appear.md                 |  5 +++++
 .../components/src/Filter/Filter/Filter.spec.tsx    | 10 ++++++----
 packages/components/src/Filter/Filter/Filter.tsx    | 12 +++++++++++-
 .../src/Filter/FilterBar/FilterBar.spec.tsx         | 13 ++++++++++++-
 .../FilterBarButton/FilterBarButton.spec.tsx        |  2 +-
 .../FilterBarButton/FilterBarButton.tsx             |  6 +++---
 .../FilterBarDatePicker/FilterBarDatePicker.tsx     |  2 +-
 .../FilterBarDateRangePicker.tsx                    |  2 +-
 .../FilterBarSelect/FilterBarSelect.tsx             |  2 +-
 9 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/little-badgers-appear.md

diff --git a/.changeset/little-badgers-appear.md b/.changeset/little-badgers-appear.md
new file mode 100644
index 00000000000..8a7c0c22c70
--- /dev/null
+++ b/.changeset/little-badgers-appear.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Add accessible name to dialog for Filter components
diff --git a/packages/components/src/Filter/Filter/Filter.spec.tsx b/packages/components/src/Filter/Filter/Filter.spec.tsx
index 7cc5cb8e031..83baad2302c 100644
--- a/packages/components/src/Filter/Filter/Filter.spec.tsx
+++ b/packages/components/src/Filter/Filter/Filter.spec.tsx
@@ -25,13 +25,15 @@ const FilterWrapper = (customProps?: Partial<FilterProps>): JSX.Element => {
 describe("<Filter />", () => {
   it("does not show content initially", () => {
     render(<FilterWrapper />)
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole("dialog", { name: "Label" })
+    ).not.toBeInTheDocument()
   })
 
   it("shows content when isOpen is true", async () => {
     render(<FilterWrapper isOpen />)
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })
@@ -41,7 +43,7 @@ describe("<Filter />", () => {
     const filterButton = screen.getByRole("button", { name: "Label" })
     await user.click(filterButton)
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })
@@ -54,7 +56,7 @@ describe("<Filter />", () => {
     await user.keyboard("{Enter}")
 
     await waitFor(() => {
-      expect(screen.getByRole("dialog")).toBeVisible()
+      expect(screen.getByRole("dialog", { name: "Label" })).toBeVisible()
       expect(screen.getByText("Filter Contents")).toBeVisible()
     })
   })
diff --git a/packages/components/src/Filter/Filter/Filter.tsx b/packages/components/src/Filter/Filter/Filter.tsx
index 2b21c1253c3..b9c197e8370 100644
--- a/packages/components/src/Filter/Filter/Filter.tsx
+++ b/packages/components/src/Filter/Filter/Filter.tsx
@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, useEffect, useRef, useState } from "react"
+import React, {
+  HTMLAttributes,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
 import { FocusOn } from "react-focus-on"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { FilterPopover } from "./subcomponents/FilterPopover"
@@ -9,6 +15,7 @@ export type FilterProps = {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   renderTrigger: (triggerProps: {
+    id: string
     onClick: () => void
     isOpen: boolean
   }) => JSX.Element & { ref?: React.RefObject<FilterTriggerRef> }
@@ -24,9 +31,11 @@ export const Filter = ({
   onMount,
   ...restProps
 }: FilterProps): JSX.Element => {
+  const triggerId = useId()
   const [isRefLoaded, setIsRefLoaded] = useState<boolean>(false)
 
   const trigger = renderTrigger({
+    id: triggerId,
     onClick: (): void => setIsOpen(!isOpen),
     isOpen,
   })
@@ -59,6 +68,7 @@ export const Filter = ({
             referenceElement={
               filterButtonRef.current?.triggerRef?.current || null
             }
+            aria-labelledby={trigger.props.id}
           >
             {children}
           </FilterPopover>
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
index a573961e8ba..46536e5e519 100644
--- a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, waitFor, within } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { FilterMultiSelect } from "../index"
 import { FilterBar, FilterBarProps } from "./FilterBar"
@@ -149,6 +149,17 @@ describe("<FilterBar />", () => {
     expect(filters[2]).toHaveTextContent("Ice Level")
   })
 
+  it("retains Filter accessibility", async () => {
+    render(<FilterBarWrapper filters={simpleFilters} />)
+
+    const filterButton = screen.getByRole("button", { name: "Flavour" })
+    await user.click(filterButton)
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog", { name: "Flavour" })).toBeVisible()
+    })
+  })
+
   describe("Removable filters", () => {
     it("shows inactive filters in the Add Filters menu only", async () => {
       const { getByRole, queryByText } = render(
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx
index 114986d2e9b..ad5d511e307 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx
@@ -29,7 +29,7 @@ const FilterBarButtonWrapper = (
         {Object.values(filters).map(({ id, name }) => (
           <FilterBarButton
             key={id}
-            id={id}
+            filterId={id}
             label={name}
             isRemovable={false}
             {...props}
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx
index fd16bcbab4d..833259047d3 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx
@@ -8,21 +8,21 @@ import {
 } from "~components/Filter/FilterButton"
 
 export type FilterBarButtonProps = FilterButtonProps & {
-  id: string
+  filterId: string
   isRemovable: boolean | undefined
 }
 
 export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
->(({ id, isRemovable = false, ...props }, ref): JSX.Element => {
+>(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
   const { hideFilter } = useFilterBarContext()
 
   return isRemovable ? (
     <FilterButtonRemovable
       ref={ref}
       triggerButtonProps={props}
-      removeButtonProps={{ onClick: () => hideFilter(id) }}
+      removeButtonProps={{ onClick: () => hideFilter(filterId) }}
     />
   ) : (
     <FilterButton ref={ref} {...props} />
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx
index 634a9ec67f0..2e30d5dc27b 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx
@@ -45,7 +45,7 @@ export const FilterBarDatePicker = ({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx
index 53034dd36d4..9a87cd1c8b6 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx
@@ -44,7 +44,7 @@ export const FilterBarDateRangePicker = ({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx
index a87e26ef8c8..517750dbff0 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx
@@ -55,7 +55,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

From 6a46e4118cdba061444a98bd818b9ec745bd1119 Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Wed, 17 Jan 2024 15:23:13 +1100
Subject: [PATCH 7/8] chore(a11y): ignore react-day-picker a11y error

---
 storybook/global-a11y-rules.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/storybook/global-a11y-rules.ts b/storybook/global-a11y-rules.ts
index ca135abf8b5..ebbcec4f390 100644
--- a/storybook/global-a11y-rules.ts
+++ b/storybook/global-a11y-rules.ts
@@ -19,4 +19,10 @@ export const globalA11yRules = [
     id: "color-contrast",
     selector: ":not([data-sb-a11y-color-contrast-disable])",
   },
+  {
+    // Incorrect accessibility from react-day-picker
+    // https://github.com/gpbl/react-day-picker/issues/1688
+    id: "aria-allowed-role",
+    selector: ':not(button[name="day"][role="gridcell"])',
+  },
 ]

From 5b71d3b63e57eb462b58ce8c69d447404163fc2a Mon Sep 17 00:00:00 2001
From: Cassandra Tam <cassandra.tam@cultureamp.com>
Date: Wed, 17 Jan 2024 15:49:17 +1100
Subject: [PATCH 8/8] test: fix date-picker tests in stories

---
 .../CalendarRange.stickersheet.stories.tsx    | 27 +++++++---
 .../CalendarSingle.stickersheet.stories.tsx   | 51 ++++++++-----------
 .../FilterDatePicker.spec.stories.tsx         |  2 +-
 3 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx b/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx
index ef72f3d2ab9..1a2f2cd22c7 100644
--- a/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx
+++ b/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"
     )
diff --git a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx b/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx
index 495cca0b8c8..f64384828ee 100644
--- a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx
+++ b/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"
     )
diff --git a/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx b/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx
index 5ddf7dd225d..eee04a9a63a 100644
--- a/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx
+++ b/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx
@@ -61,7 +61,7 @@ export const SubmitInputViaEnterKey: Story = {
     })
 
     await step("Type value and press Enter key", async () => {
-      const inputDate = getByLabelText("Date")
+      const inputDate = getByLabelText("Date", { selector: "input" })
       await userEvent.click(inputDate)
       await userEvent.type(inputDate, "03/05/2022")
       await userEvent.keyboard("{Enter}")