Skip to content

Improve toggle usability by allowing a clickable label

Administrator requested to merge github/fork/pjlast/toggle-usability-with-label into main

Created by: pjlast

Solves #17133

This adds 4 additional properties to the Toggle component, namely: label offLabel helpText offHelpText

If only label/helpText is supplied, it will be the text next to the Toggle. If offLabel/offHelpText is supplied in addition to label/helpText, label/helpText will be used when the toggle is on, and offLabel/offHelpText used when the toggle is off.

First draft used a clickable div for the label, but upon further reading it seems that clickable divs don't play well with screen readers, so I opted to resize the button itself instead. This required me to make some changes to the bar and knob css, but it keeps the final component to having 1 element with which a user can interact, which I think is most friendly to screen readers (altho my knowledge here is admittedly very limited, so take it with a pinch of salt).

Merge request reports