feat: add dropdown keyboard accessibility

Author: eelikivi

src/month_dropdown.tsx

@@ -56,8 +56,9 @@ export default class MonthDropdown extends Component<
     visible: boolean,
     monthNames: string[],
   ): React.ReactElement => (
-    <div
+    <button
       key="read"
+      type="button"      
       style={{ visibility: visible ? "visible" : "hidden" }}
       className="react-datepicker__month-read-view"
       onClick={this.toggleDropdown}
@@ -66,7 +67,7 @@ export default class MonthDropdown extends Component<
       <span className="react-datepicker__month-read-view--selected-month">
         {monthNames[this.props.month]}
       </span>
-    </div>
+    </button>
   );
 
   renderDropdown = (monthNames: string[]): React.ReactElement => (

src/month_dropdown_options.tsx

@@ -10,19 +10,52 @@ interface MonthDropdownOptionsProps {
 }
 
 export default class MonthDropdownOptions extends Component<MonthDropdownOptionsProps> {
+  monthOptionButtonsRef: (HTMLDivElement | null)[] = [];
+
   isSelectedMonth = (i: number): boolean => this.props.month === i;
 
+  handleOptionKeyDown = (i: number, e: React.KeyboardEvent): void => {
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        this.onChange(i);
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.props.onCancel();
+        break;
+      case "ArrowUp":
+      case "ArrowDown": {
+        e.preventDefault();
+        const newMonth =
+          (i + (e.key === "ArrowUp" ? -1 : 1) + this.props.monthNames.length) %
+          this.props.monthNames.length;
+        this.monthOptionButtonsRef[newMonth]?.focus();
+        break;
+      }
+    }
+  };
+
   renderOptions = (): React.ReactElement[] => {
     return this.props.monthNames.map<React.ReactElement>(
       (month: string, i: number): React.ReactElement => (
         <div
+          ref={(el) => {
+            this.monthOptionButtonsRef?.push(el);
+            if (this.isSelectedMonth(i)) {
+              el?.focus();
+            }
+          }}
+          role="button"
+          tabIndex={0}
           className={
             this.isSelectedMonth(i)
               ? "react-datepicker__month-option react-datepicker__month-option--selected_month"
               : "react-datepicker__month-option"
           }
           key={month}
           onClick={this.onChange.bind(this, i)}
+          onKeyDown={this.handleOptionKeyDown.bind(this, i)}
           aria-selected={this.isSelectedMonth(i) ? "true" : undefined}
         >
           {this.isSelectedMonth(i) ? (

src/year_dropdown.tsx

@@ -12,7 +12,7 @@ interface YearDropdownProps
   dropdownMode: "scroll" | "select";
   onChange: (year: number) => void;
   date: Date;
-  onSelect?: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;
+  onSelect?: (date: Date, event?: React.MouseEvent<HTMLButtonElement>) => void;
   setOpen?: (open: boolean) => void;
 }
 
@@ -62,19 +62,18 @@ export default class YearDropdown extends Component<
   );
 
   renderReadView = (visible: boolean): React.ReactElement => (
-    <div
+    <button
       key="read"
+      type="button"
       style={{ visibility: visible ? "visible" : "hidden" }}
       className="react-datepicker__year-read-view"
-      onClick={(event: React.MouseEvent<HTMLDivElement>): void =>
-        this.toggleDropdown(event)
-      }
+      onClick={this.toggleDropdown}
     >
       <span className="react-datepicker__year-read-view--down-arrow" />
       <span className="react-datepicker__year-read-view--selected-year">
         {this.props.year}
       </span>
-    </div>
+    </button>
   );
 
   renderDropdown = (): React.ReactElement => (
@@ -101,7 +100,7 @@ export default class YearDropdown extends Component<
     this.props.onChange(year);
   };
 
-  toggleDropdown = (event?: React.MouseEvent<HTMLDivElement>): void => {
+  toggleDropdown = (event?: React.MouseEvent<HTMLButtonElement>): void => {
     this.setState(
       {
         dropdownVisible: !this.state.dropdownVisible,
@@ -116,13 +115,13 @@ export default class YearDropdown extends Component<
 
   handleYearChange = (
     date: Date,
-    event?: React.MouseEvent<HTMLDivElement>,
+    event?: React.MouseEvent<HTMLButtonElement>,
   ): void => {
     this.onSelect?.(date, event);
     this.setOpen();
   };
 
-  onSelect = (date: Date, event?: React.MouseEvent<HTMLDivElement>): void => {
+  onSelect = (date: Date, event?: React.MouseEvent<HTMLButtonElement>): void => {
     this.props.onSelect?.(date, event);
   };
 

src/year_dropdown_options.tsx

@@ -88,18 +88,48 @@ export default class YearDropdownOptions extends Component<
   }
 
   dropdownRef: React.RefObject<HTMLDivElement | null>;
+  yearOptionButtonsRef: Record<number, HTMLDivElement | null> = {};
+
+  handleOptionKeyDown = (year: number, e: React.KeyboardEvent): void => {
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        this.onChange(year);
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.props.onCancel();
+        break;
+      case "ArrowUp":
+      case "ArrowDown": {
+        e.preventDefault();
+        const newYear = year + (e.key === "ArrowUp" ? 1 : -1);
+        this.yearOptionButtonsRef[newYear]?.focus();
+        break;
+      }
+    }
+  };
 
   renderOptions = (): React.ReactElement[] => {
     const selectedYear = this.props.year;
     const options = this.state.yearsList.map((year) => (
       <div
+        ref={(el) => {
+          this.yearOptionButtonsRef[year] = el;
+          if (year === selectedYear) {
+            el?.focus();
+          }
+        }}
+        role="button"
+        tabIndex={0}
         className={
           selectedYear === year
             ? "react-datepicker__year-option react-datepicker__year-option--selected_year"
             : "react-datepicker__year-option"
         }
         key={year}
         onClick={this.onChange.bind(this, year)}
+        onKeyDown={this.handleOptionKeyDown.bind(this, year)}
         aria-selected={selectedYear === year ? "true" : undefined}
       >
         {selectedYear === year ? (