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

Add Accessibility improvements for screen readers #260

Merged
merged 1 commit into from
Jun 14, 2023

Conversation

BenOsodrac
Copy link
Contributor

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 #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 #253, that caused the Dropdown not to be reachable by keyboard navigation.

Cypress tests were triggered and all passed:
Screenshot 2023-06-14 at 11 06 05

@gnbm gnbm self-requested a review June 14, 2023 16:05
@gnbm gnbm merged commit de6fea4 into sa-si-dev:master Jun 14, 2023
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.

3 participants