[MGTP-Get-HTML-Get email]: Screen reader announce incorrect information as 'Heading level 4 Microsoft viva group' for 'Microsoft viva button'.

[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) Screen reader: Narrator

Repro Steps:

1. Open the above URL.
2. Turn ON Narrator
3. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to the ‘MGTP-Get’ and activate it.
5. Navigate to the ‘HTML’ and activate it.
6. Navigate to the “Get email” and activate it.
7. Navigate to 'Microsoft viva’ button.
8. Observe the issue

Actual Result: Screen reader announce incorrect information as 'Heading level 4 Microsoft viva group' for 'Microsoft viva button' while navigate using tab key.

Expected Result: Screen reader should announce correct information as Microsoft viva button'.

Note: Same issue repro with NVDA screen reader also.

User Impact: Screen reader users will get impacted as users will have difficulty in identifying the purpose and in tracking or in interacting with the content if incorrect information announce for any control.

WCAG Reference: Understanding Success Criterion 1.3.1: Info and Relationships | WAI | W3C

“ 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/92b2498f-aee2-49e0-bb78-054a0643b508

[gavinbarron]

Remove h4 wrapping mgt-person and use person-card="none"