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

[Raisul123]

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:

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

[gavinbarron]

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]

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