[MGTP-People-picker-Docs]: The screen reader focus is not moving on the Expanded suggestion list which is appeared after typing characters in the 'Search for a Name' edit field using up/down arrow key.

[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 (Ensure that Narrator should be in Scan off Mode)
3. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to the ‘MGTP-People-picker’ and activate it.
5. Navigate to the ‘Docs’ and activate it.
6. Press tab key and navigate to the 'Search for a Name ' edit field, type some character, suggestion list expanded.
7. Navigate expanded suggestion list using up/down key.
8. Observe the issue.

Actual Result: The screen reader focus is not moving on the Expanded suggestion list which is appeared after typing characters in the 'Search for a Name' edit field. When navigating on the "Expanded suggestion list" with arrow keys, keyboard focus is moving on the Expanded suggestion list but screen reader focus doesn't move on the list and screen reader remains silent.

Expected Result: The screen reader focus should also move on the Expanded suggestion list which is appeared after typing characters in the 'Search for a Name' edit field using up/down arrow key. While navigating on the "Expanded suggestion list" with arrow keys, screen reader and keyboard focus should be in sync.

Note: Same issue repro with NVDA screen reader also.

User Impact: Screen reader users would not be able to know the Expanded suggestion list information if screen reader focus doesn't move on the list.

WCAG Reference: Understanding Success Criterion 1.3.2: Meaningful Sequence | 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/31f170ea-f504-4b6f-b69c-6f832ea0cb11

[gavinbarron]

@Raisul123 I don't know how to fix this, given that the items in the list are literally the items with keyboard focus. The .focus() is called on them which causes the focus indicator outline to show.

Is there guidance on how to make the screen reader follow the keyboard focus you can share? Or is it possible that the screen reader is at fault here?

[gavinbarron]

@Raisul123 any comments on this?

[vagpt]

Hi @gavinbarron

We have verified this issue at Fluent Side and there it is working as expected. Please refer to the below URL for the reference.

https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker

[gavinbarron]

@vagpt I do not understand this comment at all.

There is zero relationship between the fluent people picker and our one.

Here I was asking a specific question as to WHY the screen reading is not following the browser focus when the visual effect is applied by setting the item as being focused via the .focus() method. And do you have any insight that might help us resolve this issue.

[Mnickii]

@Raisul123 @vagpt any comments on this?

[vagpt]

Hi @Mnickii and @gavinbarron

Hope you are doing well.

Here the issue is repro'ing only in focus mode, as while navigating in focus mode, Keyboard focus is landing on the suggestions while screen reader focus is still on the 'Search Edit Field'. Also, while navigating in scan mode (You can enable it using caps+spacebar key) screen reader focus lands on user name and its related information followed by pressing arrow keys on the list items.

Please let us know if anything else you want.

CC: @Raisul123

[Mnickii]

@vagpt @Raisul123 please confirm if this issue is still repro in https://mgt.dev/next/pr/3180/?path=/story/components-mgt-people-picker-html--people-picker

[vagpt]

@vagpt @Raisul123 please confirm if this issue is still repro in https://mgt.dev/next/pr/3180/?path=/story/components-mgt-people-picker-html--people-picker

Hi @Mnickii,

This issue is still repro at our end on the provided URL.

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/513da720-7d15-451d-a4cc-78f72fc4f674

[Mnickii]

Hi @Raisul123 @vagpt

For this issue, we are experiencing a problem with the screen reader focus not following the focus on <li> and <ul> elements. I'm unable to resolve this as the expectation is that the screen focus should follow the focus on the elements. Would you have any insights/guidance/materials into how to resolve this? A workaround would be to use shortcut keys. You can use the L key to navigate to a list and the I ('eye') key to navigate to a list item.

[vagpt]

Hi @Raisul123 @vagpt

For this issue, we are experiencing a problem with the screen reader focus not following the focus on <li> and <ul> elements. I'm unable to resolve this as the expectation is that the screen focus should follow the focus on the elements. Would you have any insights/guidance/materials into how to resolve this? A workaround would be to use shortcut keys. You can use the L key to navigate to a list and the I ('eye') key to navigate to a list item.

Hi @Mnickii,

Could you please let us know which liabrary or component you are using for this?

Also, using I (''eye') or l key to navigate on the list items are not benifical or usable for the all users as mostly user try to navigate on list item using arrow key only.

[Raisul123]

Hi @Mnickii @gavinbarron, As discussed on MGTP group chat tracking #3117 "The Actual and Expected results when user types of any character" related issue with this bug.

Updated actual and expected as per discussion on chat.

CC: @vagpt