search

microsoftgraph / microsoft-graph-toolkit

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

[MGTP-Samples-General-Localization]: 'List of People search results' under 'Localization' page are not getting scrolled using arrow keys. #2258

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 User ID: V-id

Pre-requisite:

  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 '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 'Assigned to me' button
  7. Navigate to 'Localization' link using arrow key and activate it.
  8. Navigate to the first combo edit field using tab key and search any username.
  9. Navigate on the search result list using arrow key.
  10. Observe the issue.

Actual result: The 'User list items' are not scrolled while navigating with the arrow keys. Here when user presses down arrow key, the section of the page is scrolled.

Excepted Result: The 'User list' items should get scrolled while navigating with arrow key.

Note:

  1. This issue reproduces for all User list items.
  2. This issue reproduces when user resizes the page up to 200 %, 400%.

User Impact: Keyboard users must be able to view every 'search list' item otherwise they cannot select the required/desired list items from the search results to add users accordingly.

WCAG Reference Link: https://www.w3.org/WAI/WCAG21/Understanding/keyboard

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

WCAG2 1 1- 'List of People search results' under 'Localization' page are not getting scrolled using arrow keys

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/9956e353-d846-4206-94e3-e28d2468f706

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

@vagpt this seems to work as expected

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/16113214/f2c0b19b-7cc4-45e2-9211-4815a520c989

gavinbarron commented 1 year ago

@Mnickii as I understand it the problem is that when the flyout is beyond the visible viewport moving focus to a list item that is outside the viewport does not scroll the page to ensure the focused item is visible. Consider the below screen shot, pressing down once more doesn't scroll the next focused item into view.

Image

gavinbarron commented 1 year ago

@sebastienlevert Interesting, now I'm seeing #2757 reproducing, which is odd, but part of the issue here.

vagpt commented 1 year ago

This issue is working fine on the environment below, hence adding A11yTTvalidated tag.

Test Environment: URL: https://mgt.dev/next/?path=/story/samples-general--localization OS Version: 23H2 (OS Build 25967.1010) Browser Version: Edge Dev 119.0.2151.2

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/00aa16ff-1892-49f6-821b-00cb850f923a