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.

Sign up for GitHub

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

Jump to bottom

[A11Y] Make checkboxes focusable #3014

Merged
merged 5 commits into from
Aug 16, 2021
Merged

[A11Y] Make checkboxes focusable #3014

merged 5 commits into from
Aug 16, 2021

Conversation

davwheat
Copy link
Member

@davwheat davwheat commented Aug 11, 2021 •
edited
Loading

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
SychO9
SychO9 reviewed Aug 14, 2021
View reviewed changes
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
@davwheat davwheat mentioned this pull request Oct 9, 2021
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@SychO9 SychO9 SychO9 approved these changes

@askvortsov1 askvortsov1 askvortsov1 approved these changes

Assignees

@davwheat davwheat

Labels
type/accessibility Issues relating to accessibility (keyboard navigation, screenreaders, text contrast, etc.)
Projects
None yet
Milestone
1.1
Development

Successfully merging this pull request may close these issues.

[A11Y] Cannot focus switches (display: none)
3 participants
@davwheat @SychO9 @askvortsov1