jackocnr/intl-tel-input

Accessibility: Dropdown not reading country options

Closed this issue · 3 comments

okkays commented

👋 thanks for this great plugin - let me know if you need more info / help reproducing!

Steps to reproduce

  1. Enable a screenreader (we've tried on JAWS and Mac's VoiceOver)
  2. Tab to select the country box
  3. Press enter to expand the country box
  4. Use the down arrow keys to highlight country choices

Expected behaviour

When using arrows keys to navigate the box, options should be read aloud, so that visually impaired users know what option is highlighted.

Selecting a choice with Enter also doesn't read the country name or code.

Actual behaviour

The screen reader doesn't read the highlighted country

accessibility

I do see that the combobox roles are being populated (thank you for putting in the effort to add those!) so I'm not sure why it's not behaving as expected.

Initialisation options

I'm able to reproduce this against the demo on https://intl-tel-input.com/

jackocnr commented

Thanks for raising this issue. I'm afraid I don't have time to work on this myself right now, but would welcome a pull request.

  • 👀1
jackocnr commented

Note: we used to follow the ARIA rules of this combobox example, but now I'm guessing we need to switch to a Combobox with Autocomplete example (when countrySearch is enabled)

jackocnr commented

I've had a stab at this in v20.0.0 - please give it a try and let me know your thoughts. I'll close this for now, but we can re-open if need be.