♿️ Add accessibility for month dropdown

Closes #6223

Author: balajis-qb

src/month_dropdown.tsx

@@ -36,7 +36,12 @@ export default class MonthDropdown extends Component<
   renderSelectOptions = (monthNames: string[]): React.ReactElement[] =>
     monthNames.map<React.ReactElement>(
       (m: string, i: number): React.ReactElement => (
-        <option key={m} value={i}>
+        <option
+          key={m}
+          value={i}
+          aria-label={`Select Month ${m}`}
+          aria-selected={i === this.props.month ? "true" : "false"}
+        >
           {m}
         </option>
       ),
@@ -47,6 +52,7 @@ export default class MonthDropdown extends Component<
       value={this.props.month}
       className="react-datepicker__month-select"
       onChange={(e) => this.onChange(parseInt(e.target.value))}
+      aria-label="Select Month"
     >
       {this.renderSelectOptions(monthNames)}
     </select>
@@ -62,8 +68,14 @@ export default class MonthDropdown extends Component<
       style={{ visibility: visible ? "visible" : "hidden" }}
       className="react-datepicker__month-read-view"
       onClick={this.toggleDropdown}
+      aria-label="Select Month"
+      aria-expanded={this.state.dropdownVisible}
+      aria-haspopup="listbox"
     >
-      <span className="react-datepicker__month-read-view--down-arrow" />
+      <span
+        className="react-datepicker__month-read-view--down-arrow"
+        aria-hidden="true"
+      />
       <span className="react-datepicker__month-read-view--selected-month">
         {monthNames[this.props.month]}
       </span>

src/month_dropdown_options.tsx

@@ -50,6 +50,7 @@ export default class MonthDropdownOptions extends Component<MonthDropdownOptions
             }
           }}
           role="button"
+          aria-label={`Select Month ${month}`}
           tabIndex={0}
           className={
             this.isSelectedMonth(i)

src/test/month_dropdown_test.test.tsx

@@ -44,6 +44,40 @@ describe("MonthDropdown", () => {
       monthDropdown = getMonthDropdown();
     });
 
+    it("sets proper ARIA on read view button and toggles aria-expanded", () => {
+      const monthReadView = safeQuerySelector(
+        monthDropdown,
+        ".react-datepicker__month-read-view",
+      );
+      expect(monthReadView.getAttribute("aria-label")).toBe("Select Month");
+      expect(monthReadView.getAttribute("aria-haspopup")).toBe("listbox");
+      expect(monthReadView.getAttribute("aria-expanded")).toBe("false");
+
+      fireEvent.click(monthReadView);
+
+      const monthReadViewAfterOpen = safeQuerySelector(
+        monthDropdown,
+        ".react-datepicker__month-read-view",
+      );
+      expect(monthReadViewAfterOpen.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("applies aria-label to each month option in scroll dropdown", () => {
+      const monthReadView = safeQuerySelector(
+        monthDropdown,
+        ".react-datepicker__month-read-view",
+      );
+      fireEvent.click(monthReadView);
+
+      const firstOption = safeQuerySelector(
+        monthDropdown,
+        ".react-datepicker__month-option",
+      );
+      expect(firstOption.getAttribute("aria-label")).toBe(
+        "Select Month January",
+      );
+    });
+
     it("shows the selected month in the initial view", () => {
       expect(monthDropdown?.textContent).toContain("December");
     });
@@ -307,6 +341,14 @@ describe("MonthDropdown", () => {
       );
     });
 
+    it("adds aria-label to select element", () => {
+      monthDropdown = getMonthDropdown({ dropdownMode: "select" });
+      const select = monthDropdown.querySelector<HTMLSelectElement>(
+        ".react-datepicker__month-select",
+      );
+      expect(select?.getAttribute("aria-label")).toBe("Select Month");
+    });
+
     it("renders month options with default locale", () => {
       monthDropdown = getMonthDropdown({ dropdownMode: "select" });
       const options = monthDropdown.querySelectorAll("option");
@@ -325,6 +367,24 @@ describe("MonthDropdown", () => {
         "December",
       ]);
     });
+    // Accessibility of options
+    it("adds aria-label and aria-selected to options in select mode", () => {
+      monthDropdown = getMonthDropdown({ dropdownMode: "select", month: 11 });
+      const select = monthDropdown.querySelector<HTMLSelectElement>(
+        ".react-datepicker__month-select",
+      );
+      const options = Array.from(
+        select?.querySelectorAll("option") ?? [],
+      ) as HTMLOptionElement[];
+      expect(options[0]?.getAttribute("aria-label")).toBe(
+        "Select Month January",
+      );
+      expect(options[11]?.getAttribute("aria-label")).toBe(
+        "Select Month December",
+      );
+      expect(options[11]?.getAttribute("aria-selected")).toBe("true");
+      expect(options[0]?.getAttribute("aria-selected")).toBe("false");
+    });
     // Short Month Names
     it("renders month options with short name and default locale", () => {
       monthDropdown = getMonthDropdown({