Search forms need submit button

Description

Search & filter forms need a submit: https://www.w3.org/TR/WCAG20-TECHS/H32.html

eHoldings uses a block-level "Search" button after the <SearchField>...

... but I recommend embedding a solution directly into the <SearchField> component.

There are a few different ways we could approach this:

  • Google puts a clickable search icon on the end of the input; most people probably just hit enter, but it's there for people who need it. This option could be pulled off with basically the same style as currently applied, just moving the search icon to the end of the input instead of the beginning:

  • Here's a nice example with an integrated button with a background color:
    https://designsystem.digital.gov/components/search-bar/

We should also use input type="search" - there are plenty of smart workarounds for styling those now. It unlocks nice things like software keyboards changing "Enter" to "Search" instead of "Submit" and smarter autocompletion.

Environment

None

Potential Workaround

None

Attachments

2

relates to

Checklist

hide

TestRail: Results

Activity

Show:

Jeffrey Cherewaty October 12, 2018 at 5:05 PM

Jeffrey Cherewaty October 8, 2018 at 7:07 PM

nah, let's just do with this story. This will apply to any app using `SearchAndSort`, not just `platform-core` apps.

Khalilah Gambrell October 8, 2018 at 7:05 PM

- to confirm, we need another user story to change the behavior so that only hitting enter OR clicking Submit button will kick off search? Also will this work apply to platform-core apps only?

Jeffrey Cherewaty October 8, 2018 at 6:46 PM

Per : we're going to roll with a full-width "Search" button in the SearchAndSort, a la eHoldings.

Jeffrey Cherewaty October 1, 2018 at 12:20 PM

Done

Details

Assignee

Reporter

Priority

Sprint

TestRail: Cases

Open TestRail: Cases

TestRail: Runs

Open TestRail: Runs

Created October 1, 2018 at 1:09 AM
Updated November 2, 2018 at 1:53 PM
Resolved October 12, 2018 at 5:05 PM
TestRail: Cases
TestRail: Runs