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-Samples-General-Localization-Select a task list-Add a task]: Keyboard Focus loss is observed when user closes 'Task item' by activating 'Close' button using enter/spacebar key. #2304

Closed vagpt closed 8 months 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: Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook User ID: V-id

Prerequisites:

  1. 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 the '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 a task list' combo edit field and select 'Task' item from the list.
  8. Navigate to 'Add a task' text field using tab key and type any task name.
  9. Navigate to the 'Close' button using tab key and activate using enter/spacebar key.
  10. Observe where keyboard focus lands.

Actual Result: Keyboard focus is lost when the user activates the 'Close' button to remove task item using enter/spacebar key. When the user presses tab, focus lands on the 'Color mode' switch button.

Expected Result: Keyboard focus should land/retain on 'Add a task' text field when user activates 'Close' button to remove task item.

Note: This issue is reproducing for all 'Close' buttons present beside 'Add a task' text field throughout application.

Observations: Focus land on same controls when user press shift tab key after activating Close button using enter/space key.

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 text field by pressing tab key several times.

WCAG Reference: https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_overview#focus-order

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

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/ef5472d6-a792-44ee-8108-f5bd07a48e9c

WCAG2 4 3- Keyboard focus is lost when the user activates 'Close' button to remove task item using enter,spacebar key
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 🙌

vagpt commented 9 months ago

Hi @gavinbarron,

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

sebastienlevert commented 9 months ago

A lot of improvements are currently in flight for this component (To Do). On https://mgt.dev/next this still reproes though.

vagpt commented 8 months ago

This issue is working fine on the environment below, hence closing this issue. Attachment is added for the reference.

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

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/c62eaf34-823a-4efc-9aac-e7053ea9d66f