[MGTP-Editor-Mgt -agenda -Docs page]: Tooltip is not appeared on people profile icon button with keyboard tab navigation.

[Raisul123]

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 ‘Mgt -agenda’ and activate it.
4. Navigate to the ‘Docs’ and activate it.
5. Navigate to the ‘people profile icon’ button using tab key
6. Observe the issue

Actual Result: Tooltip is not appeared on people profile icon button with keyboard tab navigation.

Expected Result: Tooltip should appeared on people profile icon button with keyboard tab navigation.

Observation: Tooltip only accessible with mouse hovering. issue repro throughout application

User Impact: Keyboard user will affected if tooltip not appeared on profile icon button using tab navigation.

“ 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/5d84f194-4309-48e4-8bc3-a8b73faa458d

[gavinbarron]

Title attributes don't render when focus is applied via keyboard navigation, only by mouse hover. :(

@sebastienlevert we're going to need to develop a plan on how to handle this as I suspect that we have a few elements that use the title attribute within the library.

[musale]

This will require using the fluentui tooltip component https://learn.microsoft.com/en-us/fluent-ui/web-components/components/tooltip