microsoft-graph-toolkit
microsoft-graph-toolkit copied to clipboard
microsoftgraph
[Accessibility] [Screen Reader- Microsoft Graph Toolkit Playground]: Screen reader focus is going all together for left navigation in 'TAB mode. [Sev3][WCAG1.3.1]
Test Environment: OS Build: Windows 11 Version: 21H2 (OS Build 22000.318) Browser: Edge Version 96.0.1054.43 (Official build) (64-bit) URL: https://mgt.dev/next Screen reader: Narrator Tool: Accessibility insights for web
Repro Steps: Open the above URL and login with valid credentials. 'Microsoft Graph Toolkit Playground' page will get displayed. Now turn on Narrator. Navigate to left navigation control in 'TAB' mode and observe the issue that screen reader focus is going all together for left navigation controls or not.
Actual Result: After 'Find components' field when user presses 'TAB' key, screen reader focus is landing together on all left navigation controls and announcing all controls information at one go only. Screen reader is announcing as - Overview feedback editor components expanded mgt-agenda...... etc.
Expected Result: Screen reader focus should not land on entire left navigation controls at once and should not announce all the information at one go. Screen reader focus should land on 'Overview' controls and should announce as 'Overview' page story book link.
User Impact: Screen reader users will get impacted if focus lands on all left navigation controls at once and announcing all the information at one go only. Screen reader users will get confused to understand where focus lands and unable to get the information thus blocking to use the functionality to the fullest.
WCAG Reference: https://www.bing.com/search?q=wcag1.3.1&qs=n&form=QBRE&msbsrank=6_6__0&sp=-1&pq=wcag1.3.1&sc=6-9&sk=&cvid=617E8401233E425E99B2510397786294&ntref=1
https://user-images.githubusercontent.com/85154417/161471455-d20c06fa-34b7-4d63-831a-927ad82e2d62.mp4
Hello SrujanaAnaganti, thank you for opening an issue with us!
I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌
The underlying cause here is that the div containing the storybook tree of stories <div id="storybook-explorer-menu" has tabindex=0 this causes the entire div to be treated as a interactive element and read aloud. This tab index is set by storybook and may not be feasible to remove without resorting to hacking the dom through JavaScript.
After removing the search component it may be possible to remove the tab index and rely of the natural tab order inside the container. as it stands if a user is reading the page elements using the arrow keys narration occurs as expected, and users can press the down arrow to move from reading the entire container element all at once to reading elements one at a time.
