Skip to content

Conversation

@jgorfine-zendesk
Copy link
Contributor

Description

While testing a new feature for accessibility, Zendesk's Product Accessibility team discovered that the Toggle component's input element was missing role="switch".

According to the APG Switch Pattern, it's important to add the switch role to controls that can't enter a mixed state:

A switch is an input widget that allows users to choose one of two values: on or off. Switches are similar to checkboxes and toggle buttons, which can also serve as binary inputs. One difference, however, is that switches can only be used for binary input while checkboxes and toggle buttons allow implementations the option of supporting a third middle state. Checkboxes can be checked or not checked and can optionally also allow for a partially checked state. Toggle buttons can be pressed or not pressed and can optionally allow for a partially pressed state.

Detail

Before

Toggle component has implicit role="checkbox"

Screenshot 2025-08-25 at 5 21 23 PM

After

Toggle component has explicit role="switch"

Screenshot 2025-08-25 at 5 21 34 PM

Checklist

  • 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • ⚫ renders as expected in dark mode
  • 🤘 renders as expected with Bedrock CSS (?bedrock)
  • 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
  • ♿ tested for WCAG 2.1 AA accessibility compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@jgorfine-zendesk jgorfine-zendesk requested a review from a team as a code owner August 25, 2025 21:36
@jzempel jzempel changed the title fix(forms) Added role="switch" to Toggle component, per APG Switch Pattern fix(forms): Added role="switch" to Toggle component, per APG Switch Pattern Aug 26, 2025
@jzempel jzempel merged commit 8300d15 into main Aug 26, 2025
8 checks passed
@jzempel jzempel deleted the jgorfine/add-switch-role-to-toggle branch August 26, 2025 16:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants