[Accessibility] [Microsoft Graph Toolkit Playground - mgt-people-picker - People Picker]: Ensures every id attribute value of active elements is unique.[Sev3][WCAG4.1.1]

[SrujanaAnaganti]

Test Environment: OS Build: Windows 11 Version: 21H2 (OS Build 22000.318) Browser: Edge Version 96.0.1054.43 (Official build) (64-bit) URL: https://mgt.dev/next Screen reader: Narrator Tool: Accessibility insights for web

Repro Steps: Open the above URL and login with valid credentials. 'Microsoft Graph Toolkit Playground' Overview page will get displayed. Navigate to 'mgt-people-picker - People Picker' and activate it. Navigate to 'Edit field' and start typing a name, Suggestion list will get displayed. Now run AI tool and verify the issue that every id attribute value of active elements is unique or not.

Actual Result: Id attribute value defined for 'Suggested list items' in 'People picker' page are not unique.

Expected Result: Ensures every id attribute value of active elements is unique for 'Suggested list items' in 'People picker' page.

User Impact: Users who depend on assistive technologies (screen readers) will face the difficulty when multiple active, focusable elements share the same id attribute, are likely to act only on the first and ignore the others. As a consequence, both functionality and accessibility can be degraded.

Note: Issue is observed for similar kind of controls through out the URL.

WCAG Reference: https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html?msclkid=29ae9875b26a11eca32e5e2893b26a12

[ghost]

Hello SrujanaAnaganti, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[musale]

Hello @Laxmidurga I have a pr for this here

[Laxmidurga]

Hey @musale, can i verify the issue in the below mentioned UI as am not able to find any URL to verify in attached PR. https://mgt.dev/next/?path=/story/components-mgt-people-picker--people-picker

[musale]

@Laxmidurga the PR is updated for review! :)

[Laxmidurga]

@musale @sebastienlevert As verified, issue does not repro in the below URL. Hence, closing URL: https://mgt.dev/next/pr/1842/?path=/story/components-mgt-people-picker--people-picker