Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sachajudd opened this issue Jun 30, 2019 · 3 comments
Open

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

sachajudd opened this issue Jun 30, 2019 · 3 comments

Comments

@sachajudd
Copy link
Contributor

sachajudd commented Jun 30, 2019

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
Copy link
Contributor Author

sachajudd commented Jul 2, 2019

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
Copy link
Contributor Author

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants