microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
948 stars 304 forks source link

[Accessibility] [Screen reader -Microsoft Graph Toolkit Playground - Overview]: Multiple <H1> headings are defined in the 'Overview' page. [Sev3][WCAG2.4.6] #1525

Closed SrujanaAnaganti closed 2 years ago

SrujanaAnaganti commented 2 years ago

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 'Overview' page will get displayed. Now, enable headings toggle button in AI tool and check the whether the multiple headings are defined in the page or not. Now, turn on narrator and press 'CapsLock+Space' key to enter scan mode. Now, press headings shortcut keys 'H' to check for the headings in the page.

Actual: Multiple headings are defined in the Microsoft Graph Toolkit Playground 'Overview' page. Both 'Microsoft Graph Toolkit Playground' and 'Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph' defined under heading.

Expected: Only oneheading should be defined in the Microsoft Graph Toolkit Playground 'Overview' page. Only 'Microsoft Graph Toolkit Playground' should be defined under heading and 'Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph' should be defined under

User Impact: Assistive technologies use headings to help people quickly orient their location within and navigation through a page. When headings are not structured in logical manner it becomes difficult to user to understand the heading structure in the page so that they will get confused.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels

ghost commented 2 years ago

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 🙌

sebastienlevert commented 2 years ago

We have provided a new PR that fixes this issue. Please validate using this link : The updated storybook is available here