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

[A11y] Improve copy button accessibility #8758

Merged
merged 1 commit into from
Aug 27, 2021
Merged

Conversation

loic-sharma
Copy link
Contributor

@loic-sharma loic-sharma commented Aug 25, 2021

Background

The Bootstrap 3 popover does not work well with Windows Narrator. Previously, we worked around this by "flashing" the button's pressed state (we set the button's aria-pressed to true, wait 1.5 seconds, then set it back to false). Now, we work around this by giving the popover a role of status, which causes Windows Narrator to read the content (Narrator refuses to announce labels with the tooltip role).

Addresses: #8607
Addresses: https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1061326

Testing

This change passes Accessibility Insights FastPass:

image

Windows Narrator

Here is what Windows Narrator announces when you tab to the copy button:

  • Before: Table, Copy the package manager command, button, off
  • After: Table, Copy the package manager command, button

Here is what Windows Narrator announces when you press the copy button:

  • Before: Copy the package command, button, Copy the package command, button, on
  • After: Copied, end of line

NVDA

Here is what NVDA announces when you tab to the copy button:

  • Before: Copy the package manager command, toggle, button, not pressed
  • After: Copy the package manager command, button

Here is what NVDA announces when you press the copy button:

  • Before: Copied, copied, pressed, not pressed
  • After: Copied, copied

@loic-sharma loic-sharma marked this pull request as ready for review August 26, 2021 00:23
@loic-sharma loic-sharma requested a review from a team as a code owner August 26, 2021 00:23
@loic-sharma loic-sharma merged commit 70ebb7c into dev Aug 27, 2021
@loic-sharma loic-sharma deleted the loshar-announce-copy branch August 27, 2021 16:57
@dannyjdev dannyjdev mentioned this pull request Aug 30, 2021
6 tasks
loic-sharma added a commit that referenced this pull request Sep 17, 2021
The previous fix (#8758) seems to have broken after the latest Windows update. This new fix aligns with GitHub's solution to this problem.

This solution "flashes" the aria label of the focused item, causing the screen reader to re-announce it. 

Addresses #8809
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