Skip to content

[a11y]: preferences modal toggles are 50x23px and fail WCAG 2.2 target size #831

Description

@okadriu

Version 3.1.0, and still present on master at 8596c79 (src/scss/core/components/_preferences-modal.scss, $toggle-knob-height: 23px).

The category switches in the preferences modal render at 50 by 23 pixels. WCAG 2.2 Success Criterion 2.5.8 (Target Size, Minimum, level AA) asks for 24 by 24, so they miss it by a single pixel. Lighthouse reports:

Target has insufficient size (50px by 23px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors.
Safe clickable space has a diameter of 23px instead of at least 24px.

The flagged element is input.section__toggle. The spacing line is the same one pixel, measured through the criterion's spacing branch instead of its size branch.

One suggestion in case it is useful: the visible switch does not need to grow. The <input> sits invisibly behind .toggle__icon, so giving the input and its wrapping label a min-height: 24px satisfies the criterion with no visual change at all. Growing the visible geometry instead means touching the track, the knob, the checked translateX and the RTL variants, which is a lot of movement for one pixel.

I can send a PR if that direction looks right to you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageyet to be reviewed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions