A11y_Power Virtual Agents_Chat window_ScreenReader:When narrator focus is no cross button it is announcing unwanted information .

[compulim]

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Screen reader users will get wrong information while navigating in scan mode.

What browsers and screen readers do this issue affect?

No response

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

https://web.powerva.microsoft.com/environments/839eace6-59ab-4243-97ec-a5b8fcc104e4/bots/107725f1-d827-41a4-8375-c91d1a97affc

How to reproduce the issue?

1. Launch the application using URL: Home - Test | Power Virtual Agents (microsoft.com)
2. Tab till chat box and press enter to open it.
3. Start Narrator.
4. Tab till cross button and use down arrow,

What do you expect?

when using down arrow key to navigate narrator should announce chat window details showing up in chat box.

What actually happened?

When narrator focus is no cross button it is announcing unwanted information .

Not observed with NVDA

Do you have any screenshots or recordings to repro the issue?

No response

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

MAS 1.3.2 – Meaningful Sequence

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

Need investigation.

This is partially fixed in 4.15.5, however, it still have an issue:

1. Turn on Narrator
2. Press TAB to focus on the keyboard help screen
3. Press down arrow key
4. Expect: It should read the title of the dialog "Keyboard controls"
5. Actual: It read the subtitle of the dialog "Chat window", skipped the title

https://msazure.visualstudio.com/CCI/_workitems/edit/15627865

[compulim]

I am testing it on 4.15.6 with latest Narrator and it looks good.

2023-01-10.Web.Chat.AX.Narrate.keyboard.help.screen.mp4

[compulim]

Things to do:

• Move <button> into <header> and possibly put it before <h2>Keyboard controls</h2>
  • It become <header><button /><h2>Keyboard controls</h2></header>
• Add aria-labelledby to <div role="dialog"> and IDREF it to <h2>Keyboard controls</h2>

With Windows Narrator, it should narrate "Keyboard controls dialog, banner header close button". Then, when DOWN arrow key is pressed, it will narrate "heading level 2 keyboard controls", followed by "heading level 3 chat window".

[compulim]

After adding aria-labelledby and reordering <button> before <h2>.

Pressing DOWN arrow key will now narrate the "Keyboard controls" banner header title.

2023-01-11.Web.Chat.Keyboard.Help.Screen.Banner.Header.mp4