Fix #6223 - ♿ Accessibility improvements: Month and Year dropdowns by balajis-qb · Pull Request #6232 · Hacker0x01/react-datepicker

balajis-qb · 2026-01-28T15:05:38Z

Description

Linked issue: #6223

Problem
As mentioned in the attached ticket, the month select dropdown (showMonthDropdown) and the year select drop down (showYearDropdown) lacks ARIA attributes.

Changes

Added the corresponding aria attributes to the select and the button element to support the dropdown mode (dropdownMode) of scroll and select
Added test cases to validate the change

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.

Closes Hacker0x01#6223

codecov · 2026-01-28T17:00:56Z

Codecov Report

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

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6232   +/-   ##
=======================================
  Coverage   99.29%   99.29%           
=======================================
  Files          30       30           
  Lines        3822     3824    +2     
  Branches     1648     1667   +19     
=======================================
+ Hits         3795     3797    +2     
  Misses         26       26           
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 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.

halvorsanden

I’m glad to see this being worked on. I think this would benefit from taking a step back and simplifying and considering the elements, roles and context too, so it doesn’t end up with more aria than necessary.

My comments are mainly from experience with making comboboxes, which aren’t that different from this. I find https://www.w3.org/WAI/ARIA/apg/patterns/ very useful, and I also recommend inspecting the solution in the accessibility tree and, if you’re not doing it already, test it with your OS screen reader.

I commented on the month section, but the same goes for the year.

halvorsanden · 2026-03-17T08:00:16Z

+          key={m}
+          value={i}
+          aria-label={`Select Month ${m}`}
+          aria-selected={i === this.props.month ? "true" : "false"}


aria-label is not necessary here, the value is already inside this element and the context this appears in already communicates that this is an option that can be selected.
The same with aria-selected I believe, the option element is inside a select element, both have built-in roles and meaning stating what is selected.
Adding aria to elements like these that already have the semantics and meaning built-in can make things less accessible because it is announced differently than the user might expect when encountering the native HTML elements.

Agreed. Removed redundant aria-* from native / to rely on built-in semantics and avoid conflicting announcements. Addressed in the new PR.

halvorsanden · 2026-03-17T08:00:21Z

      value={this.props.month}
      className="react-datepicker__month-select"
      onChange={(e) => this.onChange(parseInt(e.target.value))}
+      aria-label="Select Month"


This is what the referred issue points to, and also what I’m after, but this should be a prop so it can use i18n. If a default is needed, I would recommend only "Month" since "select" is already given by the element type. The entire date dialog is also announced as "choose date", so there is no need to repeat "select/choose" too many places.

Using a default aria-label="Month" for now to keep API minimal and consistent with existing patterns.

halvorsanden · 2026-03-17T08:00:24Z

      style={{ visibility: visible ? "visible" : "hidden" }}
      className="react-datepicker__month-read-view"
      onClick={this.toggleDropdown}
+      aria-label="Select Month"


This would make the element always announce "Select month" even when a month has been selected.

Updated to a neutral label (“Month”) to avoid misleading announcements once a value is selected.

halvorsanden · 2026-03-17T08:00:25Z

      onClick={this.toggleDropdown}
+      aria-label="Select Month"
+      aria-expanded={this.state.dropdownVisible}
+      aria-haspopup="listbox"


This also needs a reference to what element it opens and what element has keyboard focus when the element is open. An aria-controls that takes the id of the related element and an aria-activedescendant with the focused element.

Not adding these since the custom dropdown is not a true combobox pattern. It follows a simpler listbox model, so I feel aria-controls/aria-activedescendant would be unnecessary here.

halvorsanden · 2026-03-17T08:00:28Z

            }
          }}
          role="button"
+          aria-label={`Select Month ${month}`}


The role of this element should most likely be changed to "option" rather than adding an aria-label, if the parent element is a listbox. I would also change the parent to a ul element and this from a div to a li.

Updated custom dropdown to use ul/li with role="option" for selectable items. Navigation controls remain buttons as they represent actions, not options.

armhaj · 2026-06-08T09:39:56Z

Hi, are there any plans to move this PR forward? If it's no longer being worked on, could you please close it so we can create a new PR and implement the necessary fixes?

balajis-qb · 2026-06-08T10:10:05Z

Thank you @halvorsanden for your suggestions.

@armhaj, I'll look into the suggested changes and work on that.

balajis-qb · 2026-06-10T09:03:43Z

Closing this PR as I ran into issues with the existing branch. I’ve created a new PR with the suggested changes and improvements here

Please feel free to continue the review on the new PR — thanks!

@halvorsanden @armhaj

balajis-qb added 2 commits January 28, 2026 17:50

♿️ Add accessibility for month dropdown

1fc0893

Closes Hacker0x01#6223

♿️ Enhance accessibility in YearDropdown component

7f61d82

Closes Hacker0x01#6223

balajis-qb force-pushed the issue-6223/fix/month-dropdown-accessibility branch from 5cbdd4d to 7f61d82 Compare January 28, 2026 16:58

halvorsanden reviewed Mar 17, 2026

View reviewed changes

This was referenced Jun 10, 2026

Improve accessibility for month and year dropdowns (select + custom modes) qburst/react-datepicker-3#80

Open

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

Open

balajis-qb closed this Jun 10, 2026

Conversation

balajis-qb commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contribution checklist

Uh oh!

codecov Bot commented Jan 28, 2026

Codecov Report

Uh oh!

halvorsanden left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

armhaj commented Jun 8, 2026

Uh oh!

balajis-qb commented Jun 8, 2026

Uh oh!

balajis-qb commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

balajis-qb commented Jan 28, 2026 •

edited

Loading