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

Fix hidden label causing accessibility issue for search inputs #21275

Merged
merged 3 commits into from Dec 15, 2022
Merged

Fix hidden label causing accessibility issue for search inputs #21275

merged 3 commits into from Dec 15, 2022

Conversation

alexstine
Copy link
Contributor

@alexstine alexstine commented Nov 21, 2022

Fixes #6850

There is a label wrapped around the search input that contains style="display:none;". This is useless and should be removed since this will not be read by screen readers or shown visually at any point. Adds aria-label as relying on placeholder attribute is not meeting the accessibility spec.

Copy link
Contributor

@ClearlyClaire ClearlyClaire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change really messes with the visual design of the search box, so I think we will have to go another way. Maybe using aria-label would be better in this case?

@alexstine
Copy link
Contributor Author

@ClearlyClaire Looks better now? I hope this also does not break the visual layout but to have an empty label is really not great. Added the aria-label as suggested.

Copy link
Contributor

@ClearlyClaire ClearlyClaire left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, this looks good to me!

@ineffyble ineffyble added ui Front-end, design accessibility Screen readers and related labels Nov 24, 2022
@Gargron Gargron merged commit 903e5a3 into mastodon:main Dec 15, 2022
neatchee pushed a commit to neatchee/mastodon that referenced this pull request Dec 16, 2022
…don#21275)

* Try unhiding search label.

* Use aria-label. Remove label as empty labels are useless.

* Remove addition of package-lock.json.
nametoolong pushed a commit to nametoolong/nuage that referenced this pull request Jan 12, 2023
…don#21275)

* Try unhiding search label.

* Use aria-label. Remove label as empty labels are useless.

* Remove addition of package-lock.json.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Screen readers and related ui Front-end, design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Search Function in Web UI has Poor Accessibility and Returns No Results
4 participants