Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ROU-4326: Fix support with screen readers #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

BenOsodrac
Copy link
Owner

This PR aims to fix two issues related with Accessibility:

  1. Navigation issue when using Tab with the dropdown open, that resulted on the focus to be on the window itself.
  2. Screen Readers weren't able to read the option items, on performing Arrow Down and Arrow Up (Screen Readers not able to read dropdown options when we have search functionality sa-si-dev/virtual-select#246)

To fix the issue 1, now when pressing Tab or ShiftTab, the dropdown closes and the focus is set on .vscomp-ele element.

To fix issue 2, a live-region area was added, that is updated on hovering a new option on the dropdown, triggering the Screen Readers to read the option textContent.
This works perfectly with Windows Narrator and Apple's VoiceOver. On NVDA tool, it always says 'blank' first but then reads the option correctly. Was not able to fix this and it seems a common issue with this tool, as I found multiple reports on other components about this.

2023-06-14 10 08 30

A fix was also added to remove some code introduced on sa-si-dev#253, that caused the Dropdown not to be reachable by keyboard navigaiton.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants