Improve accessibility for month and year dropdowns (select + custom modes)

[balajis-qb]

Description

This PR improves the accessibility of the month and year dropdowns in the date picker, covering both native select mode and custom dropdown (scroll) mode.

The changes ensure that both implementations provide correct semantics and a better experience for screen reader users, while keeping the existing API surface minimal.

Background

This PR addresses the issue raised in:

Issue: #6223

Previous PR: #6232

This PR replaces the earlier one with an updated implementation that incorporates prior review feedback.

Description

Linked issue: 6223

Problem
The current implementation of month and year dropdowns has few accessibility gaps:

• Native select dropdowns lack contextual labels, leading to ambiguous screen reader output (e.g., “June, combo box” without indicating it represents a month)
• Custom dropdown (scroll mode) does not fully follow listbox semantics
• Incorrect role usage (e.g., role="button" for selectable items) leads to inconsistent screen reader behavior
• Navigation controls (e.g., “Show earlier/later years”) rely on non-semantic elements and inconsistent labeling

These issues result in:

• Reduced clarity for screen reader users
• Inconsistent keyboard navigation
• Non-standard ARIA patterns

Changes

1. Native select mode

• Added aria-label="Month" / aria-label="Year" to provide context (e.g., “Month, June, combo box”)
• Avoided adding to prevent additional DOM complexity and ID management
• Did not introduce new props for ARIA labels to keep API surface minimal

2. Custom dropdown (scroll) mode

• Listbox semantics
• Ensured dropdown uses listbox pattern:

options → role="option"
selection → aria-selected

• Removed incorrect role="button" usage for selectable items
• Screen reader improvements
• Added visually hidden (sr-only) text where needed (e.g., “Month”) for consistent announcements

4. Year dropdown navigation (pagination)

• Replaced anchor elements () with semantic elements
• Added accessible names using visually hidden text (instead of relying solely on aria-label) for better NVDA support

Interaction behavior
Navigation controls remain buttons (actions), not options. They are:

• reachable via Tab
• not part of arrow key navigation (listbox behavior)

This aligns with ARIA practices, where only role="option" participates in arrow navigation.

API Impact

• No new props introduced (e.g., ariaMonthDropdownLabel)
• Avoided expanding API for internal accessibility labels
  If needed, support for custom aria-labels can be added in a future iteration.

Testing

Tested with:

• NVDA
• Windows Narrator

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.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.29%. Comparing base (548a1f3) to head (2e42f63).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6287      +/-   ##
==========================================
- Coverage   99.29%   99.29%   -0.01%     
==========================================
  Files          30       30              
  Lines        3822     3820       -2     
  Branches     1648     1646       -2     
==========================================
- Hits         3795     3793       -2     
  Misses         26       26              
  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.