[A11y] Form elements must have labels

[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.8.1">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.8.1">
<meta name="botframework-webchat:core:version" content="4.8.1">
<meta name="botframework-webchat:ui:version" content="4.8.1">

Describe the bug

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. Click on My current COVID-19 symptoms (CDC self-checker tool)
4. Scroll down and click on I agree
5. Scroll down and click on United States
6. Run axe check and verify the error message Form elements must have labels

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:

<select
  aria-label="Where in the United States are you located?"
  class="ac-input ac-multichoiceInput ac-choiceSetInput-compact"
  style="width: 100%; min-width: 0px;"
>

Please advise if this is an upstream issue, and I will refile with the CDC's healthbot repo. Thank you.

[Bug]

[compulim]

Thanks @1Copenut.

I will investigate if our recent fix #3146 will also fix this one automatically. If it's not, I will communicate with Adaptive Cards team to see if we can inject an aria-label to their select element.

[gabog]

Hi @compulim, do you have any updates on this one?

[compulim]

This is an external issue. The bug here is for tracking purpose only.

[1Copenut]

@compulim Do I need to refile this issue elsewhere, perhaps with the CDC?

[srinaath]

@clearab This looks like an issue with Adaptive Cards. Could you take a look at it.

[clearab]

@compulim Is there an Issue open on the AC side for this, or should I open one?

[compulim]

This is fixed in #3287.