Skip to content

feat: add visible label to gl-toggle

Simon Knox requested to merge gl-toggle-add-labels into master

Make labelOn/labelOff available as slots as well as props, for those times when we want a visible label for toggles.

Add labelPosition prop, which can be one of 'right', 'top', or 'hidden' (default).

here's some with no labels, then label on the right and label on the top

Screen_Shot_2020-01-30_at_4.12.55_pm

I previously added aria-pressed, but according to MDN we do not want this for a button with a dynamic label (emphasis mine):

The label of a toggle button should not change when its state changes. In our example the label remains "Mute" with a screen reader reading "Mute toggle button pressed" or "Mute toggle button not pressed" depending on the value of aria-pressed. If the design were to call for the button label to change from "Mute" to "Unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted.

Edited by Simon Knox

Merge request reports