Botframework-webchat: [A11y] Axe browser plugin is reporting aria-roledescription must be added to elements with a semantic role

[1Copenut]

Screenshots

Version

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')

If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

<meta name="botframework-directlinespeech:version" content="4.10.0">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.10.0">
<meta name="botframework-webchat:core:version" content="4.10.0">
<meta name="botframework-webchat:ui:version" content="4.10.0">

Describe the bug

The axe browser plugin is reporting multiple aria-roledescription errors for because the attribute is being used on DIVs. These elements don't have an explicit or implicit semantic role, and that's where the issue stems from. I've tried several roles in local experiments, but haven't hit on any great suggestions. Possibly role="region" but that's maybe not the best option, given each of the chat bubbles are self-contained messages in the greater log.

Steps to reproduce

1. Verify you have the Deque axe browser plugin installed on Firefox or Chrome
2. Go to https://www.va.gov/coronavirus-chatbot/
3. Run axe check and verify the error message Use aria-roledescription on elements with a semantic role

Expected behavior

An axe check should not announce a violation for the state <select> about a missing label. This will ensure screen reader users can understand why they are being asked to select a location, and what that location means in context.

Additional context

This bug is related to the data being generated by the CDC covid19healthbot JSON objects. I've looked through that repo but couldn't find any indication the <select> menu was being created.

The axe violation can be fixed by adding an aria-label to the select menu:

<div
  aria-roledescription="message"
  class="webchat__stacked-layout__message-row"
  id="webchat__stacked-layout__id--nu0bm"
+ role="ARIA_ROLE_PLACEHOLDER"
>
  <!-- Message content -->
</div>

[Bug]

[corinagum]

There were several accessibility updates (including aria-roledescription) in the 4.11.0 release. Please bump your version and let us know if you are still experiencing the same problem. Thanks!

[1Copenut]

Thank you @corinagum . I've passed your feedback along to the team and will review again when the latest updates are rolled into our production instance.

[mrivera-ms]

@1Copenut this issue will be closed as resolved. Please create a new issue if you're still experiencing any problems. Thank you.