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

[A11Y] Accessibility improvements for the Search component #3017

Merged
merged 2 commits into from
Sep 20, 2021

Conversation

davwheat
Copy link
Member

Progresses #3365

Changes proposed in this pull request:

  • Simplify JSX using && instead of ternaries
  • Add aria-label to role=search element (see MDN)
  • Add accessible label to clear search button
  • Mark results as live-updating with aria-live
  • Improve focus ring on search clear button (would look bad after [A11Y] Adds missing focus rings back to control elements #3016 because of element padding)

Reviewers should focus on:

Are there any other a11y changes that need to be done to this component that I've forgotten?

Confirmed

  • Frontend changes: tested on a local Flarum installation.

@davwheat davwheat added the type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.) label Aug 12, 2021
@davwheat davwheat added this to the 1.1 milestone Aug 12, 2021
@davwheat davwheat requested review from SychO9 and askvortsov1 August 12, 2021 10:55
@davwheat davwheat self-assigned this Aug 12, 2021
@davwheat davwheat merged commit 5dd48e1 into master Sep 20, 2021
@davwheat davwheat deleted the dw/search-a11y-fixes branch September 20, 2021 15:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants