microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
936 stars 294 forks source link

[Accessibility] [Microsoft Graph Toolkit Playground-mgt-people-picker-Dynamic Group Id]: Ensures select element has an accessible name. [Sev3][WCAG4.1.2] #1639

Closed SrujanaAnaganti closed 2 years ago

SrujanaAnaganti commented 2 years ago

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' page will get displayed. Now navigate to 'mgt-people-picker' > 'Properties > Dynamic Group Id' component and activate it. Run the AI tool and verify the issue that selected element has accessible name or not.

Actual Result: Combo box element in 'Dynamic Group Id' page is not having accessible name. Screen reader is juts announcing as - None combo box collapsed has popup.

Expected Result: Screen reader should announce accessible name for combo box in 'Dynamic Group Id' page. Screen reader should announce as - Pick a group combo box collapsed has popup, None selected.

User Impact: When interactive elements does not have accessible name, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content.

Note: Same issue is observed in below path also. mgt-tasks > Tasks Refer: WCAG4.1.2_Tasks

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html?msclkid=d239c1ffb3cc11ec8adcec68f80b1ff9

WCAG4 1 2_Ensures select element has an accessible name WCAG4 1 2_Tasks
ghost commented 2 years ago

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 🙌