Combo Box list does not have an accessible name

[fafnirical]

Describe the bug

In the Combo Box control, the list element is given a role of listbox, but not given an accessible name. According to the ARIA 1.2 specification, listbox widgets require an explicit accessible name.

Steps to reproduce the bug

1. Go to https://codepen.io/Fafnirical/pen/ZEpKajK
2. Wait for the audit to run (if it doesn't run properly, you may need to increase the timeout in the JS code panel)
3. Note the accessibility audit results from axe-core, in particular the violations.

Expected behavior

An accessibility audit passes without violations.

Screenshots

"violations": [
  {
    "id": "aria-input-field-name",
    "impact": "serious",
    "tags": [
      "cat.aria",
      "wcag2a",
      "wcag412",
      "ACT"
    ],
    "description": "Ensures every ARIA input field has an accessible name",
    "help": "ARIA input fields must have an accessible name",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.1/aria-input-field-name?application=axeAPI",
    "nodes": [
      {
        "any": [
          {
            "id": "aria-label",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-label attribute does not exist or is empty"
          },
          {
            "id": "aria-labelledby",
            "data": null,
            "relatedNodes": [],
            "impact": "serious",
            "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
          },
          {
            "id": "non-empty-title",
            "data": {
              "messageKey": "noAttr"
            },
            "relatedNodes": [],
            "impact": "serious",
            "message": "Element has no title attribute"
          }
        ],
        "all": [],
        "none": [],
        "impact": "serious",
        "html": "<ul tabindex=\"-1\" id=\"fruit--list\" class=\"usa-combo-box__list\" role=\"listbox\">",
        "target": [
          "#fruit--list"
        ],
        "failureSummary": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
      }
    ]
  }
],

System setup

• USWDS version: 2.9.0
• Device: MacBook Pro
• Operating system: macOS 10.14 Mojave
• Browser and version: Chrome 87

Additional context

The combobox ARIA guidelines changed between ARIA 1.1 and 1.2, but both require an explicit name for listbox widgets.

[jaredcunha]

@fafnirical Sorry for the screenshot, but something like this remedy the problem?

It looks like that's what's going on here: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

Which involves the following updates:

• Programatically apply an id to the <label>, could be the <select>'s id + "-label".
• Apply the <label>'s new id as the value for aria-labelledby on the listbox.

[fafnirical]

@jaredcunha, that would probably work. Axe doesn't report any violations, at least

[lonnieCross4568]

This is still an issue.

[amyleadem]

@lonnieCross4568, can you share more details about what you are seeing? Combobox received an accessible name in #3907 and the change was released in version 2.10.1. I do not see any accessibility issues when I scan the current version of the component with Axe. Any details would be helpful!