Merge pull request #5808 from Hacker0x01/feat/jest-axe-accessibility-improvements

Add jest-axe Accessibility Testing and Fix ARIA Structure Issues

Author: martijnrusschen

package.json

@@ -55,6 +55,7 @@
     "@testing-library/user-event": "14.6.1",
     "@types/eslint": "^9.6.1",
     "@types/jest": "^30.0.0",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "22.15.30",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
@@ -73,6 +74,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "9.1.7",
     "jest": "^30.0.5",
+    "jest-axe": "^10.0.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^16.0.0",

src/calendar.tsx

@@ -839,6 +839,12 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
+  renderDayNamesHeader = (monthDate: Date) => (
+    <div className="react-datepicker__day-names" role="row">
+      {this.header(monthDate)}
+    </div>
+  );
+
   renderDefaultHeader = ({ monthDate, i }: { monthDate: Date; i: number }) => (
     <div
       className={`react-datepicker__header ${
@@ -856,9 +862,6 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
         {this.renderMonthYearDropdown(i !== 0)}
         {this.renderYearDropdown(i !== 0)}
       </div>
-      <div className="react-datepicker__day-names" role="row">
-        {this.header(monthDate)}
-      </div>
     </div>
   );
 
@@ -906,11 +909,6 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       this.props,
     );
 
-    const showDayNames =
-      !this.props.showMonthYearPicker &&
-      !this.props.showQuarterYearPicker &&
-      !this.props.showYearPicker;
-
     return (
       <div
         className="react-datepicker__header react-datepicker__header--custom"
@@ -932,11 +930,6 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
           prevYearButtonDisabled,
           nextYearButtonDisabled,
         })}
-        {showDayNames && (
-          <div className="react-datepicker__day-names">
-            {this.header(monthDate)}
-          </div>
-        )}
       </div>
     );
   };
@@ -1030,6 +1023,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
             selectingDate={this.state.selectingDate}
             monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd}
             monthShowsDuplicateDaysStart={monthShowsDuplicateDaysStart}
+            dayNamesHeader={this.renderDayNamesHeader(monthDate)}
           />
         </div>,
       );

src/day.tsx

@@ -597,7 +597,7 @@ export default class Day extends Component<DayProps> {
       }
       tabIndex={this.getTabIndex()}
       aria-label={this.getAriaLabel()}
-      role="option"
+      role="gridcell"
       title={this.getTitle()}
       aria-disabled={this.isDisabled()}
       aria-current={this.isCurrentDay() ? "date" : undefined}

src/month.tsx

@@ -140,6 +140,7 @@ interface MonthProps
   weekAriaLabelPrefix?: WeekProps["ariaLabelPrefix"];
   chooseDayAriaLabelPrefix?: WeekProps["chooseDayAriaLabelPrefix"];
   disabledDayAriaLabelPrefix?: WeekProps["disabledDayAriaLabelPrefix"];
+  dayNamesHeader?: React.ReactNode;
 }
 
 /**
@@ -1101,23 +1102,45 @@ export default class Month extends Component<MonthProps> {
       ? ariaLabelPrefix.trim() + " "
       : "";
 
+    const shouldUseListboxRole = showMonthYearPicker || showQuarterYearPicker;
+
+    if (shouldUseListboxRole) {
+      return (
+        <div
+          className={this.getClassNames()}
+          onMouseLeave={
+            !this.props.usePointerEvent ? this.handleMouseLeave : undefined
+          }
+          onPointerLeave={
+            this.props.usePointerEvent ? this.handleMouseLeave : undefined
+          }
+          aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
+          role="listbox"
+        >
+          {showMonthYearPicker ? this.renderMonths() : this.renderQuarters()}
+        </div>
+      );
+    }
+
+    // For regular calendar view, use table structure
     return (
-      <div
-        className={this.getClassNames()}
-        onMouseLeave={
-          !this.props.usePointerEvent ? this.handleMouseLeave : undefined
-        }
-        onPointerLeave={
-          this.props.usePointerEvent ? this.handleMouseLeave : undefined
-        }
-        aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
-        role="listbox"
-      >
-        {showMonthYearPicker
-          ? this.renderMonths()
-          : showQuarterYearPicker
-            ? this.renderQuarters()
-            : this.renderWeeks()}
+      <div role="table">
+        {this.props.dayNamesHeader && (
+          <div role="rowgroup">{this.props.dayNamesHeader}</div>
+        )}
+        <div
+          className={this.getClassNames()}
+          onMouseLeave={
+            !this.props.usePointerEvent ? this.handleMouseLeave : undefined
+          }
+          onPointerLeave={
+            this.props.usePointerEvent ? this.handleMouseLeave : undefined
+          }
+          aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
+          role="rowgroup"
+        >
+          {this.renderWeeks()}
+        </div>
       </div>
     );
   }