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

feat(select): improve screen reader support #80

Merged
merged 32 commits into from
Dec 2, 2021
Merged

Conversation

wsuwt
Copy link
Collaborator

@wsuwt wsuwt commented Nov 17, 2021

Description

Improves screen reader support for select.

#74 must be merge before merging this pull request.

Type of change

Please delete options that are not relevant.

  • New feature (non-breaking change which adds functionality)

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked my code and corrected any misspellings

@wsuwt wsuwt self-assigned this Nov 17, 2021
@wsuwt wsuwt marked this pull request as draft November 17, 2021 09:08
@wsuwt wsuwt marked this pull request as ready for review November 23, 2021 08:35
@wsuwt wsuwt force-pushed the feat/select-a11y branch 2 times, most recently from b0cfb1d to ddd5354 Compare November 23, 2021 10:55
@Jidapa-Pai Jidapa-Pai added the accessibility Accessibility improvement label Nov 25, 2021
@Jidapa-Pai
Copy link
Contributor

Jidapa-Pai commented Nov 25, 2021

I tested with the following tools on Windows and get result below.

  • Jaws - The key control works fine.
  • NVDA - Cannot press spacebar/enter to open popup list for select that using data object.
  • Windows's Narrator - It's not work at all when tap spacebar/enter to open popup list.

Note: Test on Chrome.

packages/elements/src/select/index.ts Outdated Show resolved Hide resolved
packages/elements/src/select/index.ts Outdated Show resolved Hide resolved
packages/elements/src/select/index.ts Outdated Show resolved Hide resolved
@Jidapa-Pai
Copy link
Contributor

I tested with the following tools on Windows and get result below.

  • Jaws - The key control works fine.
  • NVDA - Cannot press spacebar/enter to open popup list for select that using data object.
  • Windows's Narrator - It's not work at all when tap spacebar/enter to open popup list.

Note: Test on Chrome.

Actually, the problem occur when we put aria-label or aria-labelledby to the element, it's intercept tapstart event.

@wsuwt
Copy link
Collaborator Author

wsuwt commented Nov 30, 2021

I tested with the following tools on Windows and get result below.

  • Jaws - The key control works fine.
  • NVDA - Cannot press spacebar/enter to open popup list for select that using data object.
  • Windows's Narrator - It's not work at all when tap spacebar/enter to open popup list.

Note: Test on Chrome.

Actually, the problem occur when we put aria-label or aria-labelledby to the element, it's intercept tapstart event.

You need to press Ctrl + Enter / Spacebar instead when the screen reader is on.

Copy link
Contributor

@goremikins goremikins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Please see my comment to not forget to update accessibility docs.

@wsuwt wsuwt merged commit a43fbcd into develop Dec 2, 2021
@wsuwt wsuwt deleted the feat/select-a11y branch December 2, 2021 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Accessibility improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants