You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
Navigation options within the <div class="react-datepicker__portal"> […] </div> are not adequately relayed to screen reader
users. The modal itself is written with <div> elements and lacks the accessible attributes to relay important information to screen reader users. In addition, the dates are written within a list box, which is not an appropriate role for a date
selection region.
To Reproduce
Steps to reproduce the behavior:
Open the react date picker via modal or custominput <button />
Expected behavior
The structure of content within the date region should be adequately relayed to screen reader users, when this information is not present, it can be difficult to understand and navigate the content.
<divclass="react-datepicker__month" aria-label="Month May, 2024" role="listbox"></div>
Desktop (please complete the following information):
OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]
Smartphone (please complete the following information):
Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered:
Ibabalola
changed the title
Navigation options within react-datepicker not adequately relayed to screen reader
Accessibility: Navigation options within react-datepicker not adequately relayed to screen reader
May 13, 2024
Describe the bug
Navigation options within the
<div class="react-datepicker__portal"> […] </div>
are not adequately relayed to screen readerusers. The modal itself is written with
<div>
elements and lacks the accessible attributes to relay important information to screen reader users. In addition, the dates are written within a list box, which is not an appropriate role for a dateselection region.
To Reproduce
Steps to reproduce the behavior:
<button />
Expected behavior
The structure of content within the date region should be adequately relayed to screen reader users, when this information is not present, it can be difficult to understand and navigate the content.
In this instance, we suggest following the W3 APG date picker dialog example.
Add the accessible attributes needed to relay important information to screen reader users.
For example:
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: