Page MenuHomePhabricator

ToggleSwitch: Use `role="switch"`
Closed, ResolvedPublic1 Estimated Story Points

Description

The APG Switch Pattern states the following:

Since switch, checkbox, and toggle button all offer binary input, they are often functionally interchangeable. Choose the role that best matches both the visual design and semantics of the user interface. For instance, there are some circumstances where the semantics of "on or off" would be easier for assistive technology users to understand than the semantics of "checked or unchecked", and vice versa.

Currently, the ToggleSwitch component uses a checkbox input under the hood, so screen readers will refer to the switch as a checkbox. We may want to add role="switch" to make the semantics match the design more closely.


  • Determine if screen reader UX is improved by adding role="switch"

The switch pattern makes sense to use here, and improve the UX of a screen reader. For a ToggleSwitch with the label "show details," the user will now hear "Show details, off, switch" rather than "Show details, unchecked checkbox"

  • If so, make the change

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF set the point value for this task to 1.Jul 20 2023, 8:51 PM
CCiufo-WMF triaged this task as Medium priority.Jul 24 2023, 4:14 PM
CCiufo-WMF moved this task from Needs Refinement to Up Next on the Design-System-Team board.
CCiufo-WMF added a project: Accessibility.

Change 941473 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] ToggleSwitch: Use role="switch"

https://gerrit.wikimedia.org/r/941473

Change 941473 merged by jenkins-bot:

[design/codex@main] ToggleSwitch: Use role="switch"

https://gerrit.wikimedia.org/r/941473

Change 944353 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353

Change 944353 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353

Volker_E renamed this task from ToggleSwitch: Consider using `role="switch"` to ToggleSwitch: Use `role="switch"`.Aug 2 2023, 11:03 AM