Skip to content

fix: showMonthYearDropdown not keyboard/tab accessible#6312

Open
balajis-qb wants to merge 2 commits into
Hacker0x01:mainfrom
qburst:issue-6311/fix/month-year-dropdown-accessibility
Open

fix: showMonthYearDropdown not keyboard/tab accessible#6312
balajis-qb wants to merge 2 commits into
Hacker0x01:mainfrom
qburst:issue-6311/fix/month-year-dropdown-accessibility

Conversation

@balajis-qb

Copy link
Copy Markdown
Contributor

Description

Linked issue: #6311

Problem

When showMonthYearDropdown is enabled:

  • The read-view toggle (MonthYearDropdown.renderReadView) rendered as a plain <div onClick> instead of a <button type="button"> like MonthDropdown/YearDropdown, so it was skipped by Tab and didn't respond to Enter/Space.
  • Once opened, the options list (MonthYearDropdownOptions) rendered each option as a plain <div> with no role, tabIndex, onKeyDown, or focus management, unlike MonthDropdownOptions/YearDropdownOptions, so the list itself couldn't be navigated by keyboard even after the toggle became reachable.

Changes

  • src/month_year_dropdown.tsx: changed the read-view toggle from <div> to <button type="button">.
  • src/month_year_dropdown_options.tsx: added role="button", tabIndex, and onKeyDown handling (Enter selects, Escape cancels, ArrowUp/ArrowDown moves focus between options without wrapping) plus auto-focus of the selected option when the list opens — matching the existing MonthDropdownOptions/YearDropdownOptions pattern.
  • src/test/month_year_dropdown_test.test.tsx: added regression tests covering the button read view and the new keyboard navigation/focus behavior.

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

Fixes Hacker0x01#6311

MonthYearDropdown.renderReadView rendered its toggle as a plain
<div onClick>, unlike MonthDropdown/YearDropdown which use
<button type="button">, so it was skipped by Tab and did not
respond to Enter/Space. Switch it to a button; the shared
*-read-view CSS already covers all three variants.
MonthYearDropdownOptions rendered each option as a plain <div> with
no role, tabIndex, onKeyDown, or focus management, unlike
MonthDropdownOptions/YearDropdownOptions. Once the read-view toggle
became reachable via Tab, the opened list still couldn't be
navigated by keyboard. Add role="button", tabIndex, Enter/Escape/
ArrowUp/ArrowDown handling, and auto-focus of the selected option,
matching the existing month/year dropdown pattern.
@codecov

codecov Bot commented Jul 20, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.32%. Comparing base (548a1f3) to head (13313ed).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6312      +/-   ##
==========================================
+ Coverage   99.29%   99.32%   +0.03%     
==========================================
  Files          30       30              
  Lines        3822     3845      +23     
  Branches     1648     1674      +26     
==========================================
+ Hits         3795     3819      +24     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant