fix: announce teams channel results when you type

[gavinbarron]

Closes #2292

PR Type

• Bugfix

Description of the changes

• Announce the rendered results in the dropdown
• Announce the filtered resutls in the drop down

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:

• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

Replacement for #2539

[ghost]

Thank you for creating a Pull Request @gavinbarron.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• I have verified a documentation PR has been linked and is approved (or not applicable)
• I have ran this PR locally and have tested the fix/feature
• I have verified that stories have been added to storybook (or not applicable)
• I have tested existing stories in storybook to verify no regression has occured
• I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[github-actions]

The updated storybook is available here

[musale]

Adding this here:

@microsoft-graph-toolkit-write this should work BUT I have found an issue in handling the state of component. Visually, everything looks like it's working correctly. Using narrator, other bugs come up.

Repro 1

• Open teams-channel-picker with narrator ON.
• Focus on the input. This will announce the results CORRECTLY.
• type a single letter. This will announce the filtered results CORRECTLY.
• Type the second later. Nothing is announced.
• Delete everything. Nothing is announced.

This is a different experience in the people-picker.

Any ideas to fix this experience are very welcome 😄

[gavinbarron]

So what I think is happening is that as the element gets filtered elements are removed from the DOM.

On the first keystroke the tree gets expanded and the child nodes rendered, which is an additive change.
On the second keystroke some of the things get removed. The problem here is that aria-live only knows to announce when things are added to the list by default

Let's try adding aria-relevant="all" to have deletions trigger the live behavior and aria-atomic="true" to ensure that the whole tree is announced when we add the children.

[github-actions]

The updated storybook is available here

[github-actions]

The updated storybook is available here

[github-actions]

The updated storybook is available here

[github-actions]

The updated storybook is available here

[github-actions]

The updated storybook is available here

[vagpt]

Hi @gavinbarron.

This issue is fixed partially as on typing random text or incorrect data instead of 'We didn't find any matches' it is announcing the information about the default list item i.e. 'HR Taskforce, Business Development and X1050 Launch Team' which is irrelevant for the user. Simply screen reader should announce the error message only to the user as 'We didn't find any matches'.

Test Environment:
URL: https://mgt.dev/next/pr/2561/?path=/story/components-mgt-teams-channel-picker--teams-channel-picker
OS Version: 23H2(OS Build 25905.1000)
Browser Version: Version 116.0.1938.16 (Official build) dev (64-bit)
Screen Reader: Narrator

Attachment:

MGTP.-.Issue.is.partially.fixed.mp4

[github-actions]

The updated storybook is available here

[github-actions]

The updated storybook is available here