search

silverstripe / cwp-watea-theme

A more visually appealing example for starting a theme for a CWP website.
BSD 3-Clause "New" or "Revised" License
13 stars 16 forks source link

There is no permanently visible label for the search field. #87

Open sachajudd opened 5 years ago

sachajudd commented 5 years ago

Medium priority: There is no permanently visible label for the search field. The placeholder text should not be used as a replacement for a label.

image

When a person enters information into an input, its placeholder content will disappear. The only way to restore it is to remove the information entered. This creates a challenging experience for users with cognitive impairment where guiding language is removed as soon as the person attempting to fill out the input interacts with it. Solution: Provide a permanently visible "Search" label.

Note: Could possibly be needed to be ported into Starter too.

cc @silverstripeux

sachajudd commented 5 years ago

We've been looking at some text fields here that could work design wise https://material-ui.com/components/text-fields/. When clicking into the input the placeholder text becomes the label. We'll look at some alternatives or iterating on this example to work in Starter + Wātea. See designs here https://invis.io/AWO7CJSK426#/372551680_Watea_-_Header_-_Desktop_-_Search_Iterations There's also a version with an outline which I'm leaning towards more https://material.io/design/components/text-fields.html

sachajudd commented 5 years ago

Feedback we received: "I wouldn't consider this a failure: the magnifying glass icon is arguably the permanently visual label. That, combined with the component's conventional location go some way to establishing it as a search field." I still think the search component itself could be updated so leaving open as an enhancement rather than a bug.

newleeland commented 5 years ago

I think how google material forms work are a little bit weird for a searchbox. Google themselves don't use material form for their searchboxes. For accessibility we search box should include a label with "Search" for screen readers, However this does not need to visible.