[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:

Label.not.associate.along.with.copy.button.mp4

[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