Skip to content

fix(slide-toggle): input element should use switch role - #15073

Merged
jelbourn merged 2 commits into
angular:masterfrom
devversion:fix/slide-toggle-use-switch-role
Feb 5, 2019
Merged

fix(slide-toggle): input element should use switch role#15073
jelbourn merged 2 commits into
angular:masterfrom
devversion:fix/slide-toggle-use-switch-role

Conversation

@devversion

@devversion devversion commented Feb 4, 2019

Copy link
Copy Markdown
Member

Based on the discussion in #14949 and the feedback from a Google a11y expert on
what role the underlying input of the slide-toggle should use, we now explicitly
specify the new switch role.

This is should improve accessibility because practically the slide-toggle
is neither always causing an immediately effective value change
(like a button), nor does its value only become effective on form
submission (like a role="checkbox)

Read more here: https://www.w3.org/TR/wai-aria-1.1/#switch. Similar to what mdc recommends.

Fixes #14949.

Based on the discussion in angular#14949
and the feedback from a Google a11y expert on what role the underlying
input of the `slide-toggle` should use, we now explicitly specify the
new `switch` role.

This is should improve accessibility because practically the `slide-toggle`
is neither always causing an immediately effective value change
(like a `button`), nor does its value only become effective on form
submission (like a `role="checkbox`)

Read more here: https://www.w3.org/TR/wai-aria-1.1/#switch

Fixes angular#14949.
@devversion devversion added Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release labels Feb 4, 2019
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 4, 2019
@jelbourn

jelbourn commented Feb 4, 2019

Copy link
Copy Markdown
Contributor

Which screenreaders did you test this with?

@devversion

Copy link
Copy Markdown
Member Author

@jelbourn I've tested it on VoiceOver: Safari and Chrome, and Narrator: Edge.

Everything worked as expected. Just a small difference was that Narrator said toggle switch while VoiceOver just said switch. It's definitely a good improvement because previously it just considered it as a checkbox and now it says on/off instead of checked/unchecked.

@jelbourn jelbourn left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Feb 4, 2019
Set aria-checked attribute for ARIA spec compliance
@jelbourn
jelbourn merged commit 01dcf7e into angular:master Feb 5, 2019
jelbourn pushed a commit that referenced this pull request Feb 11, 2019
Based on the discussion in #14949
and the feedback from a Google a11y expert on what role the underlying
input of the `slide-toggle` should use, we now explicitly specify the
new `switch` role.

This is should improve accessibility because practically the `slide-toggle`
is neither always causing an immediately effective value change
(like a `button`), nor does its value only become effective on form
submission (like a `role="checkbox`)

Read more here: https://www.w3.org/TR/wai-aria-1.1/#switch

Fixes #14949.
@angular-automatic-lock-bot

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Slide-toggle should use role="switch"

3 participants