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:
- Render a
DatePicker with showMonthYearDropdown enabled.
- Open the calendar and try to reach the month/year read-view toggle using only the
Tab key.
- Notice the toggle is skipped in the tab order.
- 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.
Describe the bug
When
showMonthYearDropdownis enabled, the combined month/year read-view toggle is rendered as a plain<div onClick>inMonthYearDropdown.renderReadView(src/month_year_dropdown.tsx), unlikeMonthDropdownandYearDropdown, 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 toEnter/Space, making it unreachable and unusable via keyboard alone.To Reproduce
Steps to reproduce the behavior:
DatePickerwithshowMonthYearDropdownenabled.Tabkey.EnterorSpacedoes not open the dropdown.Expected behavior
The month/year read-view toggle should be focusable via
Taband should open the dropdown when activated withEnterorSpace, consistent with the standaloneMonthDropdownandYearDropdownread views.Screenshots
https://github.com/user-attachments/assets/1f183a00-25be-4e65-bbc3-da3a61514c1f
Suggested fix
Change the
<div>inrenderReadViewto a<button type="button">. The shared CSS for all three*-read-viewclasses (src/stylesheets/datepicker.scss:606-632) already covers this, so no style changes are needed.