fix(radio): properly announce radios on screen readers #22507

brandyscarney · 2020-11-16T22:36:05Z

Dev build 5.6.0-dev.202011201652.bd13525

Forked from: #22494

Test this at http://localhost:3333/src/components/radio/test/a11y

This PR resolves issues with radio & radio group being announced incorrectly by screen readers.

Axe issues:

ARIA toggle fields have an accessible name (ion-radio)
ARIA attributes must conform to valid values (ion-radio-group)
Buttons must have discernible text (ion-radio)
id attribute value must be unique (ion-radio)

Screenreader	Browser	Native	Ionic
macOS VoiceOver	Chrome	Huey, selected, radio button, 1 of 3	Huey, selected, radio button, 1 of 3
macOS VoiceOver	Safari	Huey, selected, radio button, 1 of 3	Huey, selected, radio button, 1 of 3
iOS VoiceOver	Safari	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 3
NVDA	Chrome	Huey radio button checked 1 of 3	Huey radio button checked 1 of 3
NVDA	Edge	Huey radio button checked 1 of 3	Huey radio button checked 1 of 3
Android Talkback	Chrome	checked Huey radio button	checked Huey radio button

Issues:

When clicking to check on a radio button in NVDA it will say:
```
Dewey radio button not checked 2 of 3
checked  
```

fixes #22011

…h VoiceOver

- don't announce checkbox as being inside of another checkbox - properly announce when checked - expand footprint so the selected box surrounds the label too

…labels

…mpty before using to query

liamdebeasi · 2020-11-20T20:41:50Z

Here are the results of my radio test:

	native	ion-radio	ion-radio list header	ion-radio custom label
VoiceOver macOS - Safari	Huey, selected, radio button, 1 of 3	Huey, selected, radio button, 1 of 3	Huey, selected, radio button, 1 of 3	Huey, selected, radio button, 1 of 3
VoiceOver iOS	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 3
Android TalkBack	checked, Huey, radio button	checked, Huey, radio button	checked, Huey, radio button	checked, Huey, radio button
Windows NVDA	Huey, radio button, checked, 1 of 4	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 3	Huey, radio button, checked, 1 of 1

liamdebeasi · 2020-11-20T20:53:28Z

Here are the results of my select test:

Select

	native	`ion-select` default	`ion-select` custom label	`ion-select` popover	`ion-select` action sheet
VoiceOver macOS - Safari	Dog, choose a pet, collapsed, button, main	Dog, choose a pet, listbox popup, button	Dog, choose a pet, listbox popup, button	Dog, choose a pet, listbox popup, button	Dog, choose a pet, listbox popup, button
VoiceOver iOS	Choose a pet, dog, popup button	Dog, choose a pet, popup button, listbox popup	Dog, choose a pet, popup button, listbox popup	Dog, choose a pet, popup button, listbox popup	Dog, choose a pet, popup button, and main listbox popup
Android TalkBack	Collapsed, dog, popup button, choose a pet	Dog, choose a pet, popup button	Dog, choose a pet, popup button	Dog, choose a pet, popup button	Dog, choose a pet, popup button
Windows NVDA	Choose a pet, combobox, dog, collapsed	Dog, choose a pet, menu button, collapsed, subMenu	Dog, choose a pet, menu button, collapsed, subMenu	Dog, choose a pet, menu button, collapsed, subMenu	Dog, choose a pet, menu button, collapsed, subMenu

core/src/components/radio/radio.scss

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

brandyscarney and others added 30 commits October 19, 2020 15:58

fix(item): only add click events to clickable items

51a5459

fixes #22011

style: lint

55d7cac

style(item): lint

8e82313

fix(checkbox): changing button to label

37895dc

fix(checkbox): make input type checkbox

59f5fe4

style(lint): fix lint errors, accidentally removed code, type issues

c60d897

fix(checkbox): aXe errors

6025a9a

Merge branch 'master' into fix-checkbox-nvda

5c933c5

Merge branch 'master' into fix-item-clickable-a11y

d6f9a04

test(item): include item with an input added later

8a30f8d

fix(item): add the event listener on update in case the input is delayed

30f6484

style(lint): fix lint errors with trailing spaces

6d4c51a

chore: use rimraf

b5318ec

Merge branch 'fix-item-clickable-a11y' into fix-checkbox-nvda

9918fd7

fix(checkbox): move onClick to prevent double calls

b70554a

fix(checkbox): hidden input is required for form submission

d40bb3d

come onnnnn

3016d9a

trailing white space

87a2164

chore: build

0ef56e0

Merge branch 'master' into fix-checkbox-nvda

c274a96

chore: build

d0d8037

fix(checkbox): move onClick back to host for click events to work wit…

d052d7b

…h VoiceOver

Merge branch 'fix-checkbox-nvda' into fix-toggle-nvda

bacd5e1

fix(checkbox): don't add aria-labelledby if there is no label

2aca1f4

Merge branch 'fix-checkbox-nvda' into fix-toggle-nvda

41cdb5a

Merge branch 'master' into fix-checkbox-nvda

8dafd02

fix(checkbox): use the user's aria-labelledby if it exists

ac8f502

test(checkbox): resolve all axe errors

b2fea1c

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

style(helpers): fix lint errors

d79a511

github-actions bot added the package: core @ionic/core package label Nov 16, 2020

brandyscarney added 16 commits November 17, 2020 17:46

fix(radio-group): don't propagate onClick

85be6f9

fix(radio-group): do not add aria-labelledby if label does not exist

b44bb63

test(radio): resolve axe issues

6ad1011

test(radio): revert back

ba7bd53

test(radio): add a11y test

5aa3dd9

fix(radio): properly focus radios

b91168b

fix(radio): announce total radio buttons, focus properly, use custom …

5fe44bc

…labels

Merge branch 'master' into fix-radio-nvda

c596c2b

git(revert): revert only changes made to toggle

1744aa2

fix(helpers): make sure that id / aria-labelledby exist and are not e…

bd13525

…mpty before using to query

Merge branch 'master' into fix-select-nvda

7579d29

fix(helpers): update to look for custom labels

4426f31

test(select): add a11y test for select

357b793

Merge branch 'fix-select-nvda' into fix-radio-nvda

0a14314

pls work

487a8a1

maintaining two different code bases is fun

898da02

brandyscarney added 7 commits November 20, 2020 16:32

Merge branch 'fix-select-nvda' into fix-radio-nvda

cda9beb

fix(helpers): check for empty string on aria-labelledby

544db8b

Merge branch 'master' into fix-radio-nvda

813a3a3

Merge branch 'master' into fix-radio-nvda

ee28b52

fix(radio): allow users to select a radio on space

e4bb383

Merge branch 'master' into fix-radio-nvda

5e12fc8

test(radio): use divs instead of ps to group properly

0176d6d

liamdebeasi reviewed Nov 23, 2020

View reviewed changes

core/src/components/radio/radio.scss Outdated Show resolved Hide resolved

Update core/src/components/radio/radio.scss

ebe85c5

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

brandyscarney merged commit afcc46e into master Nov 24, 2020

brandyscarney deleted the fix-radio-nvda branch November 24, 2020 16:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(radio): properly announce radios on screen readers #22507

fix(radio): properly announce radios on screen readers #22507

brandyscarney commented Nov 16, 2020 •

edited

liamdebeasi commented Nov 20, 2020 •

edited

liamdebeasi commented Nov 20, 2020 •

edited

fix(radio): properly announce radios on screen readers #22507

fix(radio): properly announce radios on screen readers #22507

Conversation

brandyscarney commented Nov 16, 2020 • edited

liamdebeasi commented Nov 20, 2020 • edited

liamdebeasi commented Nov 20, 2020 • edited

Select

brandyscarney commented Nov 16, 2020 •

edited

liamdebeasi commented Nov 20, 2020 •

edited

liamdebeasi commented Nov 20, 2020 •

edited