Skip to content

Listbox and Option roles create confusing screenreader announcements #2095

@dan-diaz

Description

@dan-diaz

Describe the bug
react-datepicker__month has a role of "listbox"
react-datepicker__day has a role of "option"
When a screenreader such as ChromeVox traverses these options it will announce the option number out of the total number of options. These numbers do not relate to the actual date information, and therefore only cause confusion.

For example, April 1st 2020 in the datepicker is option 4 of 35 because the last 3 days of March are the first 3 options.

The screenreader would say "Choose April 1st, 2020. 4 out of 35"

I propose that we remove these roles from the two elements.
This way the screenreader will only announce the date.
I will submit a pull request for this.

To Reproduce
Steps to reproduce the behavior:

  1. Enable a screenreader (such as the ChromeVox web extension)
  2. Tab only any calendar day
  3. Listen to the complete screenreader announcement for that day

Expected behavior
The screenreader should only announce the date

Screenshots
If applicable, add screenshots to help explain your problem.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions