Skip to content

Keyboard help screen should use <dl>, <dt>, <dd> #5111

@compulim

Description

@compulim

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Despite PWD may understood the keyboard help screen, it is a requirement that AT could also read the keyboard help screen.

In other words, the format of the content in the keyboard help screen should use <dl>, <dt>, <dd> to represent key-value pair like data.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator, Windows: Chrome with NVDA, Windows: Chrome/Firefox with JAWS, macOS: Safari with VoiceOver, iOS/iPadOS: Safari with VoiceOver, Android: Chrome with TalkBack

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?

Keyboard navigation

What is the public URL for the website?

No response

How to reproduce the issue?

  1. Press TAB to focus into Web Chat and show the keyboard help screen

What do you expect?

AT should understand the key-value pair relationship and announce the content using definition list <dl>.

What actually happened?

AT is not able to understand the key-value pair.

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?

The HTML should look similar to:

<div>
  <h2>Chat window</h2>
  <dl>
    <dt>Move between items in the chat window</dt>
    <dd>Tab key</dd>
    <dd>Shift + tab key</dd>
    <dt>Do action</dt>
    <dd>Enter key</dd>
  </dl>
</div>

Note, there are two <dd> under the "Move between items in the chat window" section. This is correct and is expected.

MAS reference

No response

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bot ServicesRequired for internal Azure reporting. Do not delete. Do not change color.area-accessibilitybugIndicates an unexpected problem or an unintended behavior.customer-reportedRequired for internal Azure reporting. Do not delete.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions