[Accessibility] WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them

[compulim]

Is it an issue related to Adaptive Cards?

• [ ] Yes, this is an Adaptive Card issue but it is specific to Web Chat.

Do you have any screenshots?

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Chrome (latest), Platform: Windows

Which area does this issue affect?

Chat history

Is this an accessibility issue?

• [X] Yes, this is an accessibility issue.

Please describe the bug

WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (.webchat--css-cujit-1l95nvm)

Initially, the chat history is empty with no messages. Thus, it has role="feed" but does not have any children marked as role="article" or <article>.

Thus, it violated WCAG 1.3.1.

Do you see any errors in console log?

No response

How to reproduce the issue?

1. Talk to MockBot
2. Run "Accessibility Insights" with "FastPass"

What is the expected and actual behavior?

Expected:

• No accessibility issues found by FastPass

Actual:

• FastPass is complaining about WCAG 1.3.1

Adaptive Card JSON

No response

Additional context

There are few potential solutions:

• Adds an invisible (screen reader only) label of <article> saying "Chat history is empty"
• Sets role="feed" only if the chat history contains 1 or more messages, leave the role attribute empty otherwise
• Sets aria-busy="true" if the chat history is empty

Readings

• Understanding Success Criterion 1.3.1: Info and Relationships