feat: add visible label to gl-toggle
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
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.