showMonthYearDropdown read view not reachable via Tab / keyboard

Author: SaiBalaji202Created Jul 20, 2026Updated Jul 20, 2026

Describe the bug When showMonthYearDropdown is enabled, the combined month/year read-view toggle is rendered as a plain <div onClick> in MonthYearDropdown.renderReadView (src/month_year_dropdown.tsx), unlike MonthDropdown and YearDropdown, which render their read-view toggles as <button type="button">. Because it's a <div>, the element is not part of the natural tab order and does not respond to Enter/Space, making it unreachable and unusable via keyboard alone.

To Reproduce Steps to reproduce the behavior:

  1. Render a DatePicker with showMonthYearDropdown enabled.
  2. Open the calendar and try to reach the month/year read-view toggle using only the Tab key.
  3. Notice the toggle is skipped in the tab order.
  4. Even with focus forced onto it, pressing Enter or Space does not open the dropdown.

Expected behavior The month/year read-view toggle should be focusable via Tab and should open the dropdown when activated with Enter or Space, consistent with the standalone MonthDropdown and YearDropdown read views.

Screenshots https://github.com/user-attachments/assets/1f183a00-25be-4e65-bbc3-da3a61514c1f

Suggested fix Change the <div> in renderReadView to a <button type="button">. The shared CSS for all three *-read-view classes (src/stylesheets/datepicker.scss:606-632) already covers this, so no style changes are needed.

Source: Hacker0x01/react-datepicker