Summary

Removed the arria instructions from combobox component. The combobox arria instructions are overly verbose and user testing reveals they are unnecessary. #5955

Breaking change

This is not a breaking change.

Related issue

Closes #5955

Related pull requests

Changelog uswds/uswds-site#2786

Preview link

Preview link:
Combobox with no arria instructions

Problem statement

1. The arria instructions for the combo box component are verbose, however, adding them to the page would lengthen it significantly. The desired state is to not have the arria instructions on the page at all given that users already understand how to interact with this component.
2. The actual state is that the verbose instructions are included in the arria instructions.
3. If we dont change this the verbose arria instructions remain.

Solution

Solution:

1. Remove lines L264-267. Instructions are too general to be helpful.
2. Remove references to assistiveHintID variable, which was removed in 1 above.
   Why this approach was chosen: We considered adding instructions visible on the page that reflect the audible ARIA instructions. However, that would lengthen the page unnecessarily. We'd follow this guidance https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions that suggests instructions be equally visible and audible (ie accessible to all users). In order to pass this SC, we recommend removing those additional keyboard instructions so the visible and audible instructions are more analogous.

Major changes

Removed lines L264-267 in packages/usa-combo-box/src/index.js:

    <span id="${assistiveHintID}" class="usa-sr-only">
        When autocomplete results are available use up and down arrows to review and enter to select.
        Touch device users, explore by touch or with swipe gestures.
      </span>

Removed line 228
input.setAttribute("aria-describedby", assistiveHintID);
Removed line 175
const assistiveHintID =${selectId}--assistiveHint;

Testing and review

1. Opened federalist link and inspected source.
2. Searched for text "When autocomplete results are available", this text was not found.
3. Searched for text "assistiveHint", this text was not found.
4. Opened link in production and inspected source.
5. Searched for text "When autocomplete results are available", this text was found.
6. Searched for text "assistiveHint", this text was found.

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm run prettier:sass to format any Sass updates.
• Run npm test and confirm that all tests pass.
• Run your code through HTML_CodeSniffer and make sure it’s error free.