Search this page component

[sydbeth]

I have this component, but I'm not able to change the issue label.

This component collects a page's h2 and h3 headings into a list and allows users to search for terms. As the letters are typed into the page the css class adds a highlight to all the letters on the page with a matching combination, so that a user could scroll the page if needed. This component is brand compliant.

UX and accessibility considerations:

The highlight helps make the page more skimable if users aren't sure what the exact spelling of a term is. The autocomplete in the search box helps with this also. If a user types a term that doesn't exist it will display text that lets them know.

This component uses the combo-box role for accessibility. Users can tab into the text box, the list of terms suggested and use escape to leave the suggested list at any time. Hitting escape with letters typed in the box will erase them all and allow a user to start over.