Merge branch 'main' into issue-5794/sr-only

Author: balajis-qb

.github/workflows/security.yml

@@ -24,14 +24,14 @@
     "@eslint/js": "^9.33.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-react": "^5.0.1",
     "eslint": "^9.33.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "sass": "^1.90.0",
-    "vite": "^7.1.2"
+    "vite": "^7.1.3"
   },
   "packageManager": "[email protected]"
 }

docs-site/package.json

@@ -81,7 +81,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.28.0":
+"@babel/core@npm:^7.28.3":
   version: 7.28.3
   resolution: "@babel/core@npm:7.28.3"
   dependencies:
@@ -1295,10 +1295,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rolldown/pluginutils@npm:1.0.0-beta.30":
-  version: 1.0.0-beta.30
-  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.30"
-  checksum: 10c0/aff8b532cb9d82d94c9a4101fa12ecb10620ad47d52dbb9135a5c65bde1ad19895b41026b821f4d607083699239a5d0010198401b6a6a54ab6a10d0015302768
+"@rolldown/pluginutils@npm:1.0.0-beta.32":
+  version: 1.0.0-beta.32
+  resolution: "@rolldown/pluginutils@npm:1.0.0-beta.32"
+  checksum: 10c0/ba3582fc3c35c8eb57b0df2d22d0733b1be83d37edcc258203364773f094f58fc0cb7a056d604603573a69dd0105a466506cad467f59074e1e53d0dc26191f06
   languageName: node
   linkType: hard
 
@@ -1529,19 +1529,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "@vitejs/plugin-react@npm:5.0.0"
+"@vitejs/plugin-react@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@vitejs/plugin-react@npm:5.0.1"
   dependencies:
-    "@babel/core": "npm:^7.28.0"
+    "@babel/core": "npm:^7.28.3"
     "@babel/plugin-transform-react-jsx-self": "npm:^7.27.1"
     "@babel/plugin-transform-react-jsx-source": "npm:^7.27.1"
-    "@rolldown/pluginutils": "npm:1.0.0-beta.30"
+    "@rolldown/pluginutils": "npm:1.0.0-beta.32"
     "@types/babel__core": "npm:^7.20.5"
     react-refresh: "npm:^0.17.0"
   peerDependencies:
     vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-  checksum: 10c0/e5813839d319ab5dc1b90cab40b6c08388f26e456166ba9df10ffc3c3f4ecc594cec06715b5c93390bba56140ca5f68a18f2233f7d275d77e5bbfeb979e4fd9b
+  checksum: 10c0/2641171beedfc38edc5671abb47706906f9af2a79a6dfff4e946106c9550de4f83ccae41c164f3ee26a3edf07127ecc0e415fe5cddbf7abc71fbb2540016c27d
   languageName: node
   linkType: hard
 
@@ -2785,7 +2785,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.4.6":
+"fdir@npm:^6.5.0":
   version: 6.5.0
   resolution: "fdir@npm:6.5.0"
   peerDependencies:
@@ -4569,7 +4569,7 @@ __metadata:
     "@eslint/js": "npm:^9.33.0"
     "@types/react": "npm:^19.1.10"
     "@types/react-dom": "npm:^19.1.7"
-    "@vitejs/plugin-react": "npm:^5.0.0"
+    "@vitejs/plugin-react": "npm:^5.0.1"
     date-fns: "npm:^4.1.0"
     eslint: "npm:^9.33.0"
     eslint-plugin-react: "npm:^7.37.5"
@@ -4585,7 +4585,7 @@ __metadata:
     react-live: "npm:^4.1.8"
     sass: "npm:^1.90.0"
     slugify: "npm:^1.6.6"
-    vite: "npm:^7.1.2"
+    vite: "npm:^7.1.3"
   languageName: unknown
   linkType: soft
 
@@ -5493,12 +5493,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "vite@npm:7.1.2"
+"vite@npm:^7.1.3":
+  version: 7.1.3
+  resolution: "vite@npm:7.1.3"
   dependencies:
     esbuild: "npm:^0.25.0"
-    fdir: "npm:^6.4.6"
+    fdir: "npm:^6.5.0"
     fsevents: "npm:~2.3.3"
     picomatch: "npm:^4.0.3"
     postcss: "npm:^8.5.6"
@@ -5544,7 +5544,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/4ed825b20bc0f49db99cd382de9506b2721ccd47dcebd4a68e0ef65e3cdd2347fded52b306c34178308e0fd7fe78fd5ff517623002cb00710182ad3012c92ced
+  checksum: 10c0/a0aa418beab80673dc9a3e9d1fa49472955d6ef9d41a4c9c6bd402953f411346f612864dae267adfb2bb8ceeb894482369316ffae5816c84fd45990e352b727d
   languageName: node
   linkType: hard
 

docs-site/yarn.lock

@@ -55,9 +55,10 @@
     "@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",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "@typescript-eslint/eslint-plugin": "^8.22.0",
     "@typescript-eslint/parser": "^8.22.0",
     "axe-core": "^4.10.2",
@@ -73,13 +74,14 @@
     "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",
     "lodash": "^4.17.21",
     "prettier": "^3.4.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rollup": "^4.32.1",
     "rollup-plugin-filesize": "^10.0.0",
     "sass": "1.90.0",

package.json

@@ -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/calendar.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/day.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>
     );
   }