[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.
Also, After typing any character in the 'Search for a Name' edit field screen reader is not conveying any information about the matching records also when there is no data to display in this case also screen reader is not conveying any information.

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.
Also, Screen Reader should convey the information about the matching records also when there is no data to display then also screen reader should convey the information for the same.

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:

KB.and.Narrator.focus.not.in.sync.mp4

[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 Gavin Barron (@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.