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] Make checkboxes focusable #3014

Merged
merged 5 commits into from
Aug 16, 2021
Merged

Conversation

davwheat
Copy link
Member

@davwheat davwheat commented Aug 11, 2021

Fixes #2973

Changes proposed in this pull request:

  • Make checkbox inputs appear over their display elements so that they are accessible to mobile screen-readers
  • Add aria-hidden to the purely visual checkbox elements
  • Restore browser focus rings to the checkbox display elements

Reviewers should focus on:

Nothing, really.

Screenshot

Ef2UclMY.mp4

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 11, 2021
@davwheat davwheat added this to the 1.1 milestone Aug 11, 2021
@davwheat davwheat self-assigned this Aug 11, 2021
less/common/Checkbox.less Show resolved Hide resolved
less/common/scaffolding.less Show resolved Hide resolved
@davwheat
Copy link
Member Author

Confirmed that Talkback on Android works correctly with the checkboxes.

Interestingly, aria-hidden=true needs to be set as opposed to just aria-hidden for talkback to pick up on it. I'm going to need to fix some other bits of core to reflect that.

@davwheat davwheat merged commit 83529e2 into master Aug 16, 2021
@davwheat davwheat deleted the dw/2973-fix-unfocusable-switches branch August 16, 2021 09:56
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.

[A11Y] Cannot focus switches (display: none)
3 participants