{Linked:Bug224321, LinkedBug} [MGTP-Overview-Go Full screen button ]: Screen reader announce irrelevant information as “[F]” for “Go full screen” and “Exit full screen” 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 ‘Go Full screen’ button.
5. Observe the issue with the screen reader announcement.

Actual Result: Screen reader announce irrelevant information as “[F]” for “Go full screen” and “Exit full screen” button.

Observation: Also area label or name attribute not defined.

Expected Result: Screen reader should not announce irrelevant information as “[F]” for “Go full screen” and “Exit full screen” button.

Note:

1. Same issue reproduces throughout application.
2. Same issue reproduces with NVDA

User Impact: Screen reader users will be affected if screen reader announce irrelevant information along with the controls.

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/b5b0d2fa-04da-4506-b990-2a46bd587af8

[gavinbarron]

@Raisul123 this button is supplied by the Storybook platform and therefore this issue is an external one IMO

[vagpt]

Hi @gavinbarron,

Could you please provide us Codepen or control name for the same.

[Raisul123]

External Bug ID: https://dev.azure.com/CSS-IRT/CSS%20IRT/_workitems/edit/224321

[vagpt]

Adding A11yTTValidated tag as per the comment mentioned in its PR.