From e6e658e7ebbdeb2c6a2d7369f10b4cd7d6d98624 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20=C3=98sterkilde?= <kevin@oesterkilde.dk>
Date: Thu, 2 Mar 2023 12:31:17 +0100
Subject: [PATCH 1/2] chore(accessibility): update roles

---
 .../react-day-picker/src/components/Day/Day.test.tsx |  6 +++---
 packages/react-day-picker/src/components/Day/Day.tsx |  2 +-
 .../Table/__snapshots__/Table.test.tsx.snap          | 12 ++++++++++++
 .../src/hooks/useDayRender/useDayRender.tsx          |  2 +-
 packages/react-day-picker/test/selectors.ts          |  4 ++--
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react-day-picker/src/components/Day/Day.test.tsx b/packages/react-day-picker/src/components/Day/Day.test.tsx
index 5ad5e8ca89..ee599b3bce 100644
--- a/packages/react-day-picker/src/components/Day/Day.test.tsx
+++ b/packages/react-day-picker/src/components/Day/Day.test.tsx
@@ -29,7 +29,7 @@ describe('when the day to render has an hidden modifier', () => {
     customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render an empty grid cell', () => {
-    const cell = screen.getByRole('gridcell');
+    const cell = screen.getByRole('gridcell', { hidden: true });
     expect(cell).toBeEmptyDOMElement();
   });
 });
@@ -52,7 +52,7 @@ describe('when a selection mode is set', () => {
     customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render a button named "day"', () => {
-    const cell = screen.getByRole('gridcell');
+    const cell = screen.getByRole('button');
     expect(cell.nodeName).toBe('BUTTON');
     expect(cell).toHaveAttribute('name', 'day');
   });
@@ -66,7 +66,7 @@ describe('when "onDayClick" is present', () => {
     customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render a button', () => {
-    const cell = screen.getByRole('gridcell');
+    const cell = screen.getByRole('button');
     expect(cell.nodeName).toBe('BUTTON');
   });
 });
diff --git a/packages/react-day-picker/src/components/Day/Day.tsx b/packages/react-day-picker/src/components/Day/Day.tsx
index cb52e814b6..5151181c03 100644
--- a/packages/react-day-picker/src/components/Day/Day.tsx
+++ b/packages/react-day-picker/src/components/Day/Day.tsx
@@ -21,7 +21,7 @@ export function Day(props: DayProps): JSX.Element {
   const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
 
   if (dayRender.isHidden) {
-    return <div role="gridcell"></div>;
+    return <div role="gridcell" aria-hidden="true"></div>;
   }
   if (!dayRender.isButton) {
     return <div {...dayRender.divProps} />;
diff --git a/packages/react-day-picker/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-day-picker/src/components/Table/__snapshots__/Table.test.tsx.snap
index ffce1e924c..e24cfb5831 100644
--- a/packages/react-day-picker/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-day-picker/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -74,6 +74,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -82,6 +83,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -90,6 +92,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -98,6 +101,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -106,6 +110,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -114,6 +119,7 @@ exports[`should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -544,6 +550,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -552,6 +559,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -560,6 +568,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -568,6 +577,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -576,6 +586,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
@@ -584,6 +595,7 @@ exports[`when showing the week numbers should render correctly 1`] = `
         role="presentation"
       >
         <div
+          aria-hidden="true"
           role="gridcell"
         />
       </td>
diff --git a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx
index 6a3cbddb3f..dc03572232 100644
--- a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx
+++ b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx
@@ -107,7 +107,7 @@ export function useDayRender(
   const buttonProps = {
     ...divProps,
     disabled: activeModifiers.disabled,
-    role: 'gridcell',
+    role: 'button',
     ['aria-selected']: activeModifiers.selected,
     tabIndex: isFocused || isFocusTarget ? 0 : -1,
     ...eventHandlers
diff --git a/packages/react-day-picker/test/selectors.ts b/packages/react-day-picker/test/selectors.ts
index 1ee5d04123..74e4720024 100644
--- a/packages/react-day-picker/test/selectors.ts
+++ b/packages/react-day-picker/test/selectors.ts
@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { format } from 'date-fns';
 
 export function getDayButton(day: Date, index = 0) {
-  return screen.getAllByRole('gridcell', {
+  return screen.getAllByRole('button', {
     name: day.getDate().toString()
   })[index];
 }
@@ -81,7 +81,7 @@ export function getMonthGrid(index = 0) {
 }
 
 export function queryMonthGrids() {
-  return screen.queryAllByRole('grid');
+  return screen.queryAllByRole('grid', { hidden: true });
 }
 
 export function getYearDropdown() {

From cad99ac3afa8f49c1dad903f1b2986030671be9e Mon Sep 17 00:00:00 2001
From: gpbl <io@gpbl.dev>
Date: Sat, 4 Mar 2023 12:13:46 -0500
Subject: [PATCH 2/2] Remove unwanted rule

---
 website/test/axe.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/website/test/axe.ts b/website/test/axe.ts
index 4ec50eec16..0a769e9d55 100644
--- a/website/test/axe.ts
+++ b/website/test/axe.ts
@@ -1,8 +1,3 @@
 import { configureAxe } from 'jest-axe';
 
-export const axe = configureAxe({
-  rules: {
-    'aria-allowed-role': { enabled: false },
-    'empty-table-header': { enabled: false }
-  }
-});
+export const axe = configureAxe();