Skip to content

Mobile header icons are 18x18, below WCAG 2.5.8 AA target size #1

Description

@willhea

Summary

The mobile header search and dark-mode-toggle buttons render below the WCAG 2.2 minimum target size. Recording this as a known gap; no change is planned right now.

Evidence (rendered DOM at 375x812, live production)

Control Rendered size Padding Accessible name
Search (/) 18 x 18 px 0px present
Dark mode switcher 18 x 18 px 0px present

Horizontal gap between the two: 16px (search right edge 279, toggle left edge 295).

Ancestry for both: BUTTON.flex.items-center -> DIV.flex.items-center -> DIV.flex.md:hidden.

Standard

WCAG 2.2 SC 2.5.8 (Target Size, Minimum, Level AA) requires 24x24 CSS px, or that a 24px-diameter circle centred on the target not intersect a neighbouring target. At 18x18 with a 16px gap, neither condition is met.

For contrast, the equivalent control on willhea.com renders 24x60 and passes.

Why not fixed now

These are Blowfish theme defaults, not values set in this repo. Correcting them means overriding theme CSS and maintaining that override across theme upgrades. The buttons remain operable, so the cost of ownership currently outweighs the benefit. Filed so the gap is recorded rather than rediscovered.

Worth revisiting if the header is restyled for other reasons, or if the theme addresses it upstream.

Verification method

Playwright against production, reading getBoundingClientRect() and computed styles. Accessible names confirmed via the Chromium CDP accessibility tree, which reports no unnamed controls on this site.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions