search

microsoftgraph / microsoft-graph-toolkit

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

[MGTP-Samples-General-Theme]: Screen Reader announces incorrect label for 'Select a channel' combo edit field. #2311

Closed vagpt closed 1 year ago

vagpt commented 1 year ago

Test Environment: OS Build: Windows 11 Version: 22H2 (OS Build 25300.1000) Browser: Edge dev Browser Version 114.0.1807.5 (Official build) dev (64-bit) URL:  Samples / General - Localization ⋅ Storybook (mgt.dev) User ID: V-id
Screen reader: Narrator

Repro Steps:

  1. Open the above URL and login with valid credentials.
  2. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate to 'Components' button using tab key and expand it.
  4. Navigate to 'Samples' button using tab key and expand it.
  5. Navigate to 'General' button using arrow key and expand it.
  6. Navigate to 'Theme' link using arrow key and activate it.
  7. Navigate to 'Select a channel' combo edit field using tab key
  8. Observe the issue with the screen reader.

Actual Result: Screen reader announces as 'Select a channel, edit, elect a channel' for I should be dark, regional class' combo edit field. Incorrect Aria label is defined as -'Select a channel'

Expected Result: Screen reader should announce something like 'I should be dark, regional class, 'Select a channel','combo edit, collapsed has pop-up' information

Note:

  1. Issue reproduces with NVDA screen reader.
  2. This issue reproduced throughout 'Theme' page.

User Impact: Screen reader users will get impacted as users will have difficulty in identifying the purpose and in tracking or in interacting with the content.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

"Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com) “

ghost commented 1 year ago

Hello vagpt, 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 🙌

Mnickii commented 1 year ago

@gavinbarron I confirmed that adding the role"combobox" does bring about the [aria-required-attr] errors in teams-channel-picker

Mnickii commented 1 year ago

@vagpt this issue is no longer relevant as that story has been changed.

gavinbarron commented 1 year ago

@vagpt can you please revailidate this issue on https://mgt.dev ?

vagpt commented 1 year ago

Hi @gavinbarron and @Mnickii.

As per the above comment we have checked and not getting the same UI with the same labels hence closing this issue.