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

fix(select): use a native input to fix a11y issues with axe and screen readers #22494

Merged
merged 67 commits into from Nov 20, 2020
Merged

fix(select): use a native input to fix a11y issues with axe and screen readers #22494

merged 67 commits into from Nov 20, 2020

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Nov 12, 2020 •
edited

Dev build: 5.5.0-dev.202011162250.f4787b5

Similar to #22477 and #22402

Intends to fix #21552 and #21548

Tested and verified that it works in the following:

  • VoiceOver macOS Chrome
  • VoiceOver macOS Safari
  • VoiceOver iOS
  • Android talkback
  • NVDA
  • axe
  • Lighthouse
Screenreader Browser Native Ionic
macOS VoiceOver Chrome Female, Gender, collapsed, button Female, Gender, collapsed, button
macOS VoiceOver Safari Female, Gender, popup button Female, Gender, list box pop up, button
iOS VoiceOver Safari Gender, Female, popup button Female, Gender, popup button, list box pop up
NVDA Chrome Gender combo box Female collapsed Female, Gender menu button collapsed subMenu
Android Talkback Chrome Checked female in list 2 items Female, Gender, popup button

Issues:

brandyscarney and others added 30 commits October 19, 2020 15:58
@brandyscarney
fix(item): only add click events to clickable items
51a5459 
fixes #22011
@brandyscarney
style: lint
55d7cac
@brandyscarney
style(item): lint
8e82313
@brandyscarney
fix(checkbox): changing button to label
37895dc
@brandyscarney
fix(checkbox): make input type checkbox
59f5fe4
@brandyscarney
style(lint): fix lint errors, accidentally removed code, type issues
c60d897
@brandyscarney
fix(checkbox): aXe errors
6025a9a
@brandyscarney
Merge branch 'master' into fix-checkbox-nvda
5c933c5
@brandyscarney
Merge branch 'master' into fix-item-clickable-a11y
d6f9a04
@brandyscarney
test(item): include item with an input added later
8a30f8d
@brandyscarney
fix(item): add the event listener on update in case the input is delayed
30f6484
@brandyscarney
style(lint): fix lint errors with trailing spaces
6d4c51a
@brandyscarney
chore: use rimraf
b5318ec
@brandyscarney
Merge branch 'fix-item-clickable-a11y' into fix-checkbox-nvda
9918fd7
@brandyscarney
fix(checkbox): move onClick to prevent double calls
b70554a
@brandyscarney
fix(checkbox): hidden input is required for form submission
d40bb3d
@brandyscarney
come onnnnn
3016d9a
@brandyscarney
trailing white space
87a2164
@brandyscarney
chore: build
0ef56e0
@brandyscarney
Merge branch 'master' into fix-checkbox-nvda
c274a96
@brandyscarney
chore: build
d0d8037
@brandyscarney
fix(checkbox): move onClick back to host for click events to work wit…
d052d7b 
…h VoiceOver
@brandyscarney
Merge branch 'fix-checkbox-nvda' into fix-toggle-nvda
bacd5e1
@brandyscarney
fix(checkbox): don't add aria-labelledby if there is no label
2aca1f4
@brandyscarney
Merge branch 'fix-checkbox-nvda' into fix-toggle-nvda
41cdb5a
@brandyscarney
Merge branch 'master' into fix-checkbox-nvda
8dafd02
@brandyscarney
fix(checkbox): use the user's aria-labelledby if it exists
ac8f502
@brandyscarney
test(checkbox): resolve all axe errors
b2fea1c
@brandyscarney
fix(checkbox): work with voiceover
e2bd28b 
- don't announce checkbox as being inside of another checkbox
- properly announce when checked
- expand footprint so the selected box surrounds the label too
@brandyscarney
style(helpers): fix lint errors
d79a511
@brandyscarney
fix(checkbox): add role back for checkbox always since aria-hidden
598d639
@brandyscarney
fix(checkbox): add aria-checked on the inner input for nvda
fb288d2
@brandyscarney
docs(github): update component guide to include a11y
2d6056e
@brandyscarney
Merge branch 'fix-checkbox-nvda' into fix-toggle-nvda
c194729
@brandyscarney
fix(toggle): update to pass a11y guidelines
4d76963
@brandyscarney
test(toggle): resolve axe errors
68d645b
@brandyscarney
test(toggle): update for a11y
e9aa27c
@brandyscarney
fix(toggle): role for toggle should be a switch
c04be5e
@brandyscarney
docs(component-guide): add toggle as a checkbox type component
7c95d89
@brandyscarney
Merge branch 'master' into fix-toggle-nvda
9cf6cc3
@brandyscarney
Merge branch 'master' into fix-select-nvda
353c30c
@brandyscarney
Merge branch 'master' into fix-select-nvda
f645337
@brandyscarney
fix(select): add native input and include value in the label
f88e6fa 
only tested and verified as reading properly by VoiceOver in macOS
@brandyscarney
style: lint
b37ee50
@github-actions github-actions bot added the package: core @ionic/core package label Nov 12, 2020
@kensodemann
Copy link
Member

Testing with this sample app: https://github.com/kensodemann/demo-select

After installing @ionic/angular@5.5.0-dev.202011161545.562f8b9 and re-serving, I get two ion-alert's each time I clicked the first select.

@brandyscarney
Copy link
Member Author

@kensodemann Good catch! This will be fixed by 0f7cd93

@brandyscarney brandyscarney mentioned this pull request Nov 16, 2020
Merged
4 tasks
@brandyscarney brandyscarney merged commit 04b874e into master Nov 20, 2020
@brandyscarney brandyscarney deleted the fix-select-nvda branch November 20, 2020 22:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

bug: ion-toggle and ion-select generates empty buttons
3 participants
@brandyscarney @kensodemann @liamdebeasi