[MGTP-Components-Samples-General-Localization-Select user]: Screen reader is not announcing email Id text and availability status information inside the search suggestions list item.

[Raisul123]

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

Repro Steps:

1. Open the above URL and login with valid credentials.
2. Turn on Narrator using ‘Ctrl+ win+enter key’.
3. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to 'Components' button using tab key and expand it.
5. Navigate to 'Samples' button using tab key and expand it.
6. Navigate to 'General' button using arrow key and expand it.
7. Navigate to 'Localization' link using arrow key and activate it.
8. Navigate to 'Select users' combo edit field using tab key and search for any users.
9. Navigate on the list of user using arrow key.
10. Observe the screen reader announcement.

Actual Result: While navigating over the suggestions list item with arrow key, screen reader announces, 'Suggested Contact Brian Johnson (TAILSPIN) 2 of 6 selected'. No email id and availability status information is announced by the screen reader.

Observation: 

1. 'Suggested contact' information is associated with all 'Name' property for the suggested list items.
2. Also, screen reader doesn’t announce any information regarding the status(Offline/online) of user list items.

Expected Result: Screen reader should announce something like ' Brian Johnson (TAILSPIN) <>, Offline, 2 of 6 <>’ when focus lands on it.

Note:

1. This issue reproduces for all search list items throughout application.
2. Same issue reproduces with NVDA screen reader.

User Experience: Screen Reader users will not be able to understand the information, status of the person in the search suggestions list item.

WCAG Reference link: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

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

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/b02ccef4-87d7-4d5e-9fff-b85b56d4532e

[ghost]

Hello Raisul123, 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 🙌

[gavinbarron]

Either we need to re-work the data loading to have presence on the people results used to build the suggestions list or rework how the person element presents itself to the screen reader.

At the moment for people-picker an aria-label is constructed at the list item level, the presence is resolved inside the mgt-person control, so the presence information would never be visible due to the aria-label taking precedence on and interactive element when in focus mode

[gavinbarron]

@KarunaNarang the question we need an answer to here is does the narration of the person components on this page work where the image is considered presentational if there is text for the name of the user, i.e. we omit the "photo of {name}" from narration in some cases.

https://mgt.dev/next/pr/2493/?path=/story/components-mgt-person-properties--person-view

Edit to add, on that page scan mode will need to be used as the person elements are not interactive based on their configuration

[vagpt]

Hi @gavinbarron,

For this issue, you can take the example of Teams application where on the chat screen search box screen reader is conveying the correct information. While navigating to the search suggestion, screen reader is conveying the user name along with his/her email id.

Please refer to the attached video for reference.

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/6a99aed9-dcfd-45a3-acf2-16d212178bc7

[vagpt]

This issue is working as expected on the environment below, hence closing this issue.

Test Environment: URL: https://mgt.dev/next/v3/?path=/story/samples-general--localization OS Version: 23H2(OS Build 25387.1200) Browser Version: Version 116.0.1908.0 (Official build) dev (64-bit) Screen Reader: Narrator

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/5a71389d-9b75-4a49-9eb5-85e1c59defa4