a11y updates for search component

[SusannahHarris-HC]

There are a couple a11y fixes needed for the search component - see the USWDS component for guidance: <form class="usa-search" role="search"> <label class="usa-sr-only" for="search-field">Search</label> <input class="usa-input" id="search-field" type="search" name="search" /> <button class="usa-button" type="submit"> <span class="usa-search__submit-text">Search </span> <img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search"/> </button> </form>

• [ ] it looks like we only need one example of the search component, there are currently three different types in the search.html

• [ ] Double check with Joey if we need a heading for the search component, I don't see one in the style sheet but I don't hate the idea of having one either.

• [ ] Wrap the search component in a <form> element (see USWDS example above

• [ ] the search component needs a <label for="search-field-input">Search</label> before the <input> element

• [ ] be sure the <input> has an id attribute that matches the for attribute. <input id="search-field-input" type="search" name="search" />

• [ ] the <input> does not need the aria-label="find a city">

• [ ] I believe the button needs both an image of a magnifying glass and "Search" text, be sure to include an alt=" " on the magnifying glass image as the button already has "search" text

[JoeyPearlmanHennepin]

Are we able to link to our Button component stylesheet instead of defining new buttons in the Search component's CSS?

https://github.com/HennepinCounty/ed-hcds-components/tree/main/buttons

  <button class="primary-idle">
            <svg class="closeIconWhite" ></svg>
            Button
        </button>

I think we would just need to swap out the icon for a magnifying glass and change the label to say "Search", no need to define new buttons.

[SusannahHarris-HC]

Sure, you're the designer so whatever works for you! Is the button for the search component in the stylesheet different from the button component style?

[JoeyPearlmanHennepin]

I met with TJ and he pushed an update, should be good for now! I think they were the same style but having it defined only once keeps things DRY and makes updates way easier. So if we needed to make a change to our Button styling it should cascade to the button for Search since they're the same component.

[adeunjiHC]

Pushed all the changes. Have a great day!

[SusannahHarris-HC]

Awesome, will QA and get back to you!