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

[MGTP-Editor-Edit in stackblitz Tab item ]: Screen reader is announcing incorrect information as ‘Selected’ for the not selected ‘Edit in stackblitz’ Tab item #3077

Closed
Raisul123 opened this issue Feb 26, 2024 · 0 comments · Fixed by #3220

Comments

@Raisul123
Copy link
Collaborator

Test Environment:
OS Build: Windows 11 
Version: 24H2 (OS Build 26058.1400) 
Browser: Edge dev 
Browser Version 123.0.2400.1 (Official build) dev (64-bit)
URL: Overview - Docs ⋅ Storybook (mgt.dev)
Screen reader: Narrator

Repro Steps:

  1. Open the above URL
  2. Turn on Narrator using ‘Ctrl+win+enter’ keys.
  3. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
  4. Navigate to the Editor and activate it.
  5. Navigate to the ‘Edit in stackblitz’ Tab item
  6. Observe the issue with the screen reader announcement.

Actual Result:
Screen reader is announcing as ‘Edit in stackblitz tab item 4 of 4 selected’ when focus is on the not selected tab item.
Also screen reader announce control information twice.

Expected Result:
Screen reader should announce as ‘Edit in stackblitz tab item 4 of 4’ when focus is on the not selected tab item.

Note:
Same issue reproduces with NVDA

User Impact:
When screen readers announce incorrect state information, it will act as feedback failure for screen reader users to know whether tab items are selected or not selected. Otherwise, they might miss the functionality.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:
Incorrect state announce as selected

Incorrect.state.announce.as.selected.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment