search

microsoftgraph / microsoft-graph-toolkit

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

[MGTP-People-picker- Property- Dynamic group ID]: Keyboard user not able to access “Select a group” expanded list item. #3126

Closed Raisul123 closed 7 months ago

Raisul123 commented 7 months ago

Test Environment: OS Build: Windows 11  Version: 24H2 (OS Build 26058.1400)  Browser: Edge dev  Browser Version 123.0.2400.1 (Official build) dev (64-bit) URL: Overview - Docs ⋅ Storybook (mgt.dev)

Repro Steps:

  1. Open the above URL.
  2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate to the ‘MGTP-People-picker’ and activate it.
  4. Navigate to the ‘Property’ and activate it.
  5. Navigate to the ‘Dynamic group ID’ and activate it.
  6. Navigate to the ‘Select a group’ button and activate it.
  7. Try to navigate Expanded list item using up/down/Tab key.
  8. Observe the issue.

Actual Result: Keyboard user not able to access “Select a group” expanded list item using up/down/Tab key.

Expected Result: “Select a group” expanded list item should be accessible using up/down/Tab key.

Observation:

  1. The ‘Expanded list item’ is getting activates with mouse.

User Impact: It will be difficult for the keyboard users to access the expanded list and to perform functionality if the controls are not accessible with keyboard navigation. Hence, they are blocked from performing action.

WCAG Reference: Understanding Success Criterion 2.1.1: Keyboard | WAI | W3C

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/6df319a0-3c28-4997-b19b-8d41df6b72d4

KB user not able to access Select a group expanded lcontrol
gavinbarron commented 7 months ago

Related to #3127

By moving this to use a standard HTML select we should get far better accessibility for this story

vagpt commented 7 months ago

This issue is not repro on the URL below as UI has been changed hence closing this issue.

URL: https://mgt.dev/next/pr/3139/?path=/story/components-mgt-people-picker-properties--dynamic-group-id

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/58541bae-e288-416f-8895-dca7bf790311