search

microsoftgraph / microsoft-graph-toolkit

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

[MGTP-Overview-Go Full screen button ]: Screen reader is not announcing the label ‘From a CDN’ along with ‘Copy’ button. #3076

Open Raisul123 opened 4 months ago

Raisul123 commented 4 months ago

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 ‘Copy’’ button.
  5. Observe the issue with the screen reader announcement.

Actual Result: Screen reader is not announcing the label ‘From a CDN’ along with ‘Copy’ button. Screen reader only announce as ‘Copy’ button.

Expected Result: Screen reader should the label ‘From a CDN’ along with ‘Copy’ button. Screen reader should announce like as ‘From a CDN Copy’ button.

Note:

  1. Same issue repro for ‘Via npm’ copy button.
  2. Same issue reproduces with NVDA

User Impact: Screen reader user will affected if narrator not announcing the label information along with copy button.

WCAG Reference: Understanding Success Criterion 1.3.1: Info and Relationships | WAI | W3C

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

Attachments:

Label not associate along with copy button

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/3c2876db-8e89-40f7-a6c9-81ef196b7a1e

gavinbarron commented 4 months ago

The "label" is not a <label>, it's a heading, specifically an <h4> IIRC.

We can likely add some code that will modify the button to add an aria-label to correct the narration.

gavinbarron commented 4 months ago

Need to update the class used as a selector in the CopyButtonNamer https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/bd3ced3b100d885119d77af2cbbe9b502a0535bf/.storybook/components/ElementNamer.jsx#L22C56-L22C66