'Toggle' component improvements

Open

#24,625 opened on Sep 10, 2024 0 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

accessibility P2 UI UX/interaction

The label next to a toggle is not read aloud by screenreaders (tested on macOS VoiceOver)
In white high-contrast mode, the white circle of the toggle is nearly invisible on the white background (if not for the slight shadow)
While you can infer that "circle on right side of toggle + accent color background = ON" because it's a common pattern, we should make the ON state more explicit for high-contrast mode for users who can't see differences in color
Toggles do not have hover or hit states
Toggles cannot be toggled by clicking on their text label (like you can do with checkboxes)

Add a checkmark (U+F477 in the MusescoreIcon font) to the 'On' state in high contrast mode, as well as other changes to strokes and color
Hover and hit states
Make the toggle text label clickable
Make toggle labels readable by screenreaders (they can still be called checkboxes as they are now, but the label should be spoken first, i.e. "[Toggle label name], [checked/unchecked], checkbox")

To whoever works on this, message me for the Figma link and the latest MusescoreIcon font with the thicker checkmark.

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.