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-Sample - General - Theme]: Ensures ARIA attributes are allowed for an element's role. [Sev3][WCAG4.1.2] #1641

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' Overview page will get displayed. Navigate to 'Sample - General - Theme' and activate it. Now run AI tool and verify the issue that ARIA attributes are allowed for an element's role or not.

Actual Result: 'Select a channel' edit fileds do not allow for an element's role in 'Sample - General - Theme'.

Expected Result: Ensure that 'Select a channel' edit fileds should allow for an element's role in 'Sample - General - Theme'.

User Impact: An ARIA role attribute can be added to an element to instruct assistive technologies to treat the element as something other than its native HTML element type. Some ARIA property and state attributes are allowed only for certain ARIA roles. When an assistive technology encounters a mismatch between an element's role and its state or property attributes, it might ignore that attribute or respond in an unexpected way. As a result, people who use assistive technologies might find the element difficult or impossible to use.

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

WCAG4 1 2_Ensures ARIA attributes are allowed for an element's role_Theme
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 🙌