[MGTP-Editor-Edit in stackblitz Tab item ]: Screen reader is announcing incorrect information as ‘Selected’ for the not selected ‘Edit in stackblitz’ Tab item

[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 Editor and activate it.
5. Navigate to the ‘Edit in stackblitz’ Tab item
6. Observe the issue with the screen reader announcement.

Actual Result: Screen reader is announcing as ‘Edit in stackblitz tab item 4 of 4 selected’ when focus is on the not selected tab item. Also screen reader announce control information twice.

Expected Result: Screen reader should announce as ‘Edit in stackblitz tab item 4 of 4’ when focus is on the not selected tab item.

Note: Same issue reproduces with NVDA

User Impact: When screen readers announce incorrect state information, it will act as feedback failure for screen reader users to know whether tab items are selected or not selected. Otherwise, they might miss the functionality.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value

“ 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/46ead39f-734a-4ebb-9818-38ee6909c9ae