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-Components-Samples-General-Localization-Select user]: Keyboard Focus loss is observed when removes any user by activating ‘Remove user’ button inside ‘Select users’ combo edit field. #2342

Closed Raisul123 closed 8 months ago

Raisul123 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: Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook

Pre-requisites: Navigate using keyboard only.

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 'Localization' link using arrow key and activate it.
  7. Navigate to 'Select users' combo edit field using tab key and add an users from the list.
  8. Renavigate to the selected users and navigate to ‘Remove user’ button using tab key and activate it.
  9. Observe where keyboard focus lands.

Actual Result: Keyboard focus is lost when the user removes any user by activating the ‘Remove user’ button using enter/spacebar key. When the user presses tab, focus lands on the ‘first selected User’s Remove’ button inside ‘Select user’ field.

Observation: Same issue reproduces when user ‘Adds’ any user from the list.

Expected Result: Keyboard focus should land/retain on ‘Select users’ combo edit field (i.e cursor should land on ‘Select users’ combo edit field) when user activates 'Remove user' button. Also when user adds any user, cursor should land on combo edit field.

Note: This issue reproduces for all combo edit fields throughout application.

User Experience: Keyboard users need to tab unnecessarily on the page whenever user activates 'Close button using enter key Hence the user needs to renavigate back to that field by pressing tab key several times.

WCAG Guideline: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

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

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/5c1db121-ceca-4401-8a4e-611703edb75f

MicrosoftTeams-image (8)
ghost commented 1 year ago

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

vagpt commented 9 months ago

Hi @gavinbarron,

Could you please provide the ETA to fix this as of now this issue is still repro?

sebastienlevert commented 9 months ago

This still reproes, I agree.

Mnickii commented 8 months ago

@vagpt A fix for this is available to test here

vagpt commented 8 months ago

This issue is working fine on the environment below, hence closing this issue.

Test Environment: URL: https://mgt.dev/next/pr/3011/?path=/story/samples-general--localization OS Build: Windows 11 Version: 23H2 (OS Build 26040.1000) Browser: Edge dev. Browser Version 123.0.2380.0 (Official build) dev (64-bit)