Visitar URL original
USWDS-Site - Font size and family: Add spacing between stacked token links by AKnassa · Pull Request #3256 · uswds/uswds-site · GitHub
Skip to content

USWDS-Site - Font size and family: Add spacing between stacked token links - #3256

Open
AKnassa wants to merge 1 commit into
uswds:mainfrom
AKnassa:ak-2796-token-touch-targets
Open

AKnassa wants to merge 1 commit into
uswds:mainfrom
AKnassa:ak-2796-token-touch-targets

Conversation

@AKnassa

@AKnassa AKnassa commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

Summary

Added vertical breathing room between the stacked token links on the Font size and family utility page, so the links meet WCAG's minimum touch-target spacing.

Related issue

Closes #2796

Problem statement

In the "Palette contents" column on the Font size and family page, token links stack vertically in 21 groups. Each link is a tap target about 22px tall with under 2px of space to the next one — failing WCAG 2.5.8 (Target Size Minimum), which needs adjacent targets to reach a 24px pitch. On a phone, tapping the right token was a coin flip.

Solution

Added the smallest standard USWDS spacing utility (margin-bottom-05, 4px) to each stacked row in _includes/utilities/typescale-palettes.html. That takes the row pitch from about 24px to about 28px — comfortably past the requirement without visually changing the table's character. The global token-link style was deliberately left alone: the issue notes other token usages around the site aren't affected, and a repo check confirmed this include is the only place with the stacked pattern.

Testing and review

  • The diff is exactly 21 lines, each adding only the spacing class; rendered page verified showing all 21 spaced rows.
  • bundle exec rspec passes (10 examples, 0 failures).
  • To review: open Utilities → Font size and family and look at the "Palette contents" column — the stacked token links now have a small, even gap.

The Palette contents column on the Font size and family
utility page stacks 21 groups of ~22px-tall token links
with under 2px of vertical gap, failing WCAG 2.5.8
(Target Size Minimum). Add margin-bottom-05 (4px) to each
stacked row, bringing the pitch to ~28px.

Fixes uswds#2796
@AKnassa
AKnassa marked this pull request as ready for review July 19, 2026 01:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

No open projects
Status: Triage

Development

Successfully merging this pull request may close these issues.

USWDS-Site - Bug: Token Class Touch Target Accessibility Failure

1 participant