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-Left Navigation-Custom Properties]: ‘9:00 PM - 11:30 PM Company Meeting people’ card tooltip under ' Custom Properties’ page is not accessible using keyboard. #2236

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: Components / mgt-agenda / Style - Custom Properties ⋅ Storybook User ID: V-id    Repro Steps: 

  1. Open the above URL and login with valid credentials.
  2. The ‘Microsoft Graph Toolkit Playground' Overview page will be displayed. 
  3. Navigate to the 'Left rail navigation' region using tab key.
  4. Navigate to 'Custom Properties’ control and select it.
  5. The ‘Custom Properties’ page will open.
  6. Navigate to the card under ‘Custom Properties’ page using tab key.
  7. Observe the issue.

Actual Result: When the keyboard focus is on ‘9:00 PM - 11:30 PM Company Meeting people’ card tooltip is not visible. When the user hovers the mouse then a tooltip appears.

Expected Result: ‘9:00 PM - 11:30 PM Company Meeting people’ card tooltip should be accessible with keyboard.

Note:

  1. The same issue is repro throughout the ‘Custom Properties’ page.

User Experience: Keyboard and screen reader users will not be able to get the tooltip information because tooltip is not accessible with keyboard. hence will fail to use the functionality.

WCAG reference link: Understanding Success Criterion 2.1.1 | Understanding WCAG 2.0 (w3.org)

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

https://user-images.githubusercontent.com/95913748/236490147-9a31d092-89f7-4476-b67a-a2a782b53aa8.mp4

WCAG2 1 1-‘900 PM - 1130 PM Company Meeting people’ card tooltip under ' Custom Properties’ page is not accessible using keyboard (2)
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 🙌

musale commented 1 year ago

@vagpt this part of the element that shows ‘9:00 PM - 11:30 PM Company Meeting people’ is not focusable. Does it make any sense to make it focusable so that when you tab, you go from the card -> 9:00 PM - 11:30 PM -> Company Meeting people (where the tooltip is shown) ?

Alternatively, remove the tooltip. Cc @sebastienlevert @gavinbarron @Mnickii thoughts?

vagpt commented 1 year ago

Hi @musale,

Sorry for the late response.

In this case, can you make tooltip visibile as soon as keyboard focus will lands on the entire 9:00 PM- 11:30 PM Company Meeting people's. as of now while navigating using tab key, keyboard focus is landing completely on it.

Thanks

gavinbarron commented 1 year ago

@vagpt the element with the tooltip here is the title element, i.e. just the text that reads "Company meeting"

At the moment the tab stop flow is Card > people list > each person in the list > Card

The only way we can have the tooltip activate on keyboard focus is to add a tab stop on the title element main the tab flow: Card > title > people list > each person in the list > Card

This is a limitation of the fluent-tooltip component and the positioning of the tooltip

vagpt commented 1 year ago

Closing this issue as of now, tooltip is completely removed from the below URL.

URL: https://mgt.dev/next/pr/2621