Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 of 2 tasks
compulim opened this issue Aug 12, 2022 · 0 comments · Fixed by #4420
Closed
1 of 2 tasks
Assignees
Labels
area-accessibility bug Indicates an unexpected problem or an unintended behavior.

Comments

@compulim
Copy link
Contributor

compulim commented Aug 12, 2022

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?

image

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?

  • 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

@compulim compulim added bug Indicates an unexpected problem or an unintended behavior. area-accessibility labels Aug 12, 2022
@compulim compulim added this to the release-4.15.4 milestone Aug 12, 2022
@compulim compulim self-assigned this Oct 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-accessibility bug Indicates an unexpected problem or an unintended behavior.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant