feat: add jest-axe accessibility testing and fix ARIA structure issues

- Add jest-axe dependency and comprehensive accessibility test suite
- Fix ARIA structure violations in calendar components:
  * Update Day component: role="option" → role="gridcell"
  * Add Week component: role="row" for proper table structure
  * Update WeekNumber component: add role="gridcell"
  * Enhance Month component with conditional roles:
    - Use role="listbox" for month/year/quarter pickers
    - Use role="table" structure for regular calendar view
  * Restructure Calendar to use proper table hierarchy
- Add comprehensive test coverage for all DatePicker variants
- Ensure compatibility with screen readers and assistive technologies
- All 22 accessibility tests now pass

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

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>
   );
 
@@ -1030,6 +1033,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,47 @@ 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
-        }
+        role="table"
         aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
-        role="listbox"
       >
-        {showMonthYearPicker
-          ? this.renderMonths()
-          : showQuarterYearPicker
-            ? this.renderQuarters()
-            : this.renderWeeks()}
+        {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
+          }
+          role="rowgroup"
+        >
+          {this.renderWeeks()}
+        </div>
       </div>
     );
   }