Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add role="switch" to switches in example code?

See original GitHub issue

I’ve just been reading this good article by @argyleink about building a switch component https://web.dev/building-a-switch-component/#overview

I see it uses role=switch. Think this should be added to the Switch Bootstrap docs example code? https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches

Let me know, I’d be happy to open a PR for it.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

patrickhlaukecommented, Aug 25, 2021

role="switch" support has been quite flaky in the past, but things seem to have improved https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/#affects_on_sr

it’s probably ok to add this now to our docs.

0reactions

coliffcommented, Aug 26, 2021

thanks for the feedback. This good then?

Top Results From Across the Web

ARIA: switch role - Accessibility - MDN Web Docs - Mozilla

Adding the switch role in ARIA. This simple example just creates a widget and assigns the ARIA switch role to it. The button...

Adding the switch role in ARIA - CodePen

<p><code>button[role="switch"][aria-pressed]</code> works, but unless I'm doing ... to need <code>aria-checked</code> to effectively communicate the state.

Building a switch component - web.dev

A foundational overview of how to build a responsive and accessible switch component.

Switch Role Support - Adrian Roselli

All this post cares about is what happens once you add the switch role. ... <div> <input type="checkbox" id="ck02s" role="switch"> <label ...

Bootstrap Toggle Switch - examples & tutorial

Basic example. A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using...