[Accessibility] [Microsoft Graph Toolkit Playground - mgt-people-picker - People Picker]: Ensures elements with an ARIA role that require parent roles are contained by them.[Sev3][WCAG1.3.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 elements with an ARIA role that require parent roles are contained by them or not.

Actual Result: Suggested list items in 'People picker' page are not having required parent roles.

Expected Result: Ensure that suggested list items in 'People picker' page should contain required parent roles. Certain ARIA roles must be contained by particular parent elements. For example, an

element with role="option" is to be treated as a selectable option in a list box control, not as a static list item.

User Impact: Some ARIA "child" roles identify managed controls that are always part of a larger composite control, identified by a "parent" role. For example, role="option" identifies a child control that is managed by a parent control identified by role="listbox". People who use assistive technologies might find it difficult or impossible to use a child control if its managing control lacks the required parent role.

Note: Issue is observed through out the URL.

WCAG Reference: https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html?msclkid=07f5d176b26911ec953faf55b40d3453

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

@Laxmidurga created a PR 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]

Hello @Laxmidurga the pr has builds that are failing so the changes are not available on the UI. Let me fix that up and let you know to test.

[Laxmidurga]

Sure @musale

[Laxmidurga]

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