Skip to content

fix(a11y): prevent horizontal scroll on login page at 320px (WCAG 1.4.10)#3440

Merged
bilal-karim merged 1 commit into
mainfrom
a11y/1.4.10-login-h1-reflow
May 22, 2026
Merged

fix(a11y): prevent horizontal scroll on login page at 320px (WCAG 1.4.10)#3440
bilal-karim merged 1 commit into
mainfrom
a11y/1.4.10-login-h1-reflow

Conversation

@bilal-karim
Copy link
Copy Markdown
Member

@bilal-karim bilal-karim commented May 22, 2026

Summary

The login page's "Welcome back." <h1> was sized too aggressively for mobile viewports:

  • Before: text-7xl (72px) at base, text-8xl (96px) at sm:. At 72px the heading is ~520 CSS px wide → overflows a 320 CSS px viewport by ~200px and forces page-level horizontal scroll.
  • After: text-5xl (48px) base → text-7xl (72px) sm:text-8xl (96px) md:. Breakpoints shifted down one tier.

Desktop and tablet rendering effectively unchanged; mobile gets the smaller heading and no horizontal scroll.

Audit context

  • WCAG 2.2 SC 1.4.10 Reflow (Level AA) — Serious. Affects every user on a mobile viewport encountering the login page.
  • Cross-cutting with SC 1.4.4 Resize Text (extreme zoom levels also benefit).
  • Issue file: audit-output/issues/1.4.10-login-h1-reflow.md.

Test plan

  • Chrome DevTools → device-mode → 320 × 568 portrait → navigate to /login. No horizontal page scroll; <h1> fits within the viewport.
  • Resize browser continuously from 1280px → 320px on /login. No horizontal scroll at any intermediate width.
  • Desktop (≥768px): heading visually unchanged from before (still text-8xl at md: and up).
  • Tablet (640-767px): heading is text-7xl (was text-8xl) — slightly smaller, still visually prominent.

🤖 Generated with Claude Code

….10)

The "Welcome back." <h1> previously used text-7xl (72px) at base
breakpoint and text-8xl (96px) at sm and up. At 72px the heading
measures ~520 CSS px wide which overflows a 320 CSS px viewport
by ~200px and forces page-level horizontal scroll — a hard WCAG
1.4.10 Reflow failure.

Shift the breakpoints down one tier:
- base (<640px): text-5xl (48px). "Welcome back." ~320px wide,
  fits within a 320px viewport.
- sm (640px+): text-7xl (72px). Same as the previous default.
- md (768px+): text-8xl (96px). Same as previous sm:.

Desktop and tablet rendering effectively unchanged; only mobile
gets the smaller heading.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@bilal-karim bilal-karim requested a review from a team as a code owner May 22, 2026 14:00
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment May 22, 2026 2:01pm

Request Review

@bilal-karim bilal-karim merged commit 03918fb into main May 22, 2026
18 checks passed
@bilal-karim bilal-karim deleted the a11y/1.4.10-login-h1-reflow branch May 22, 2026 14:11
rossedfort added a commit that referenced this pull request Jun 4, 2026
Auto-generated version bump from 2.50.0 to 2.51.0

Bump type: minor

Changes included:
- [`495e27f7`](495e27f) Use pageSize instead of maximumPageSize (#3422)
- [`42c58c45`](42c58c4) fix: use rem-based width for expanded side-nav (#3426)
- [`ce928ed5`](ce928ed) fix(a11y): meet 4.5:1 contrast for text-subtle and text-warning (WCAG 1.4.3) (#3437)
- [`e8ed8a49`](e8ed8a4) fix(a11y): consistent high-contrast focus rings across all Button variants (WCAG 1.4.11) (#3438)
- [`03918fb5`](03918fb) fix(a11y): prevent horizontal scroll on login page at 320px (WCAG 1.4.10) (#3440)
- [`a11555fb`](a11555f) fix(a11y): use rem-based font-size and unitless line-height in markdown reset (#3430)
- [`057ff323`](057ff32) fix: use empty alt on decorative SDK logo image (#3424)
- [`e435ffd7`](e435ffd) Standalone Activity details page UI updates (#3427)
- [`e09028f3`](e09028f) Make bottom-nav accept linksSnippet instead of sections (#3445)
- [`a22a1e21`](a22a1e2) Add tooltip for SDK version (#3462)
- [`c3b7820e`](c3b7820) [DT-4039] Workflow query builder doesn't work with numeric search attributes (#3435)
- [`5e53881f`](5e53881) Make Common Errors dismissable (#3471)
- [`2665e2f1`](2665e2f) [DT-4048] Add accessibility PR triage and notification helpers (#3465)
- [`8083cf4e`](8083cf4) feat(DT-4017): Schedules List UI Update (#3467)
- [`b5de30e3`](b5de30e) fix(markdown): allow nested lists to render as block (DT-4047) (#3463)
- [`8a6fd2de`](8a6fd2d) Add a prop to hide select/deselect controls (#3474)
- [`33ec1b3e`](33ec1b3) DT-4051: pre-populate input when starting standalone activity like this one (#3469)
- [`0d64fc20`](0d64fc2) fix(a11y): reveal Copyable's CopyButton on focus-within (WCAG 2.1.1) (#3452)
- [`321651c0`](321651c) fix: accept autocomplete prop on NumberInput, ChipInput, and Combobox (#3425)
- [`6567c222`](6567c22) fix: cap ZoomSvg container height to viewport (#3428)
- [`afd3a8ed`](afd3a8e) fix(a11y): accommodate text-spacing overrides on Badge and Chip (WCAG 1.4.12) (#3433)
- [`d264b876`](d264b87) fix(a11y): non-color signal for Label required indicator (WCAG 1.4.1) (#3439)
- [`73c61ea3`](73c61ea) fix(a11y): tabindex on <main> so the skip link moves focus reliably (WCAG 2.4.1) (#3451)
- [`34e582a8`](34e582a) fix(a11y): info-and-relationships compliance (WCAG 1.3.1) (#3432)
- [`f7be7b6c`](f7be7b6) fix(query): quote ExecutionDuration Go duration strings in visibility SQL (#3482)
- [`9f0c2631`](9f0c263) Passthrough goto params to link component (#3483)
- [`2f8c037b`](2f8c037) feat: add centerButton, menuButton, and linksContent snippets to BottomNavigation (#3485)
- [`7f258bac`](7f258ba) fix: add "for" to validate connection modal title (#3488)
- [`350397ab`](350397a) feat(DT-4069): Update modal backdrop to 50% opaque (#3486)
- [`f01baa49`](f01baa4) refactor: Input & DatePicker - Svelte 5 & afterLabel snippet (#3479)
- [`587c892f`](587c892) Fix decoded object payload summaries (#3491)
- [`2b85ef06`](2b85ef0) fix(DT-4044): only use browser codec endpoint when override option is selected (#3490)
- [`468893ba`](468893b) fix(a11y): improve 1.1.1 non-text content compliance (#3431)
- [`3e8c996d`](3e8c996) fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable (#3429)
- [`47552538`](4755253) fix(a11y): name-role-value compliance, partial (WCAG 4.1.2) (#3434)
- [`e2c95d54`](e2c95d5) fix(a11y): align DOM order with visual order in mobile bottom-nav (WCAG 1.3.2) (#3441)
- [`634b08e1`](634b08e) a11y(1.4.11): focus rings — lighten dark-mode --color-border-focus-info to indigo.400 so ring-primary/70 meets 3:1 against surface-primary (#3478)
- [`039a555a`](039a555) a11y(1.4.11): Checkbox — add ring-offset so the checked-state focus ring contrasts against the indigo checked background (#3477)
- [`01161e2e`](01161e2) a11y(1.4.10): activity-options drawer — make width responsive so it reflows at 320 px (#3476)
- [`99f0a0a4`](99f0a0a) fix(a11y): filter hidden nav items in mobile bottom-nav (WCAG 4.1.2) (#3494)
- [`d12ebacc`](d12ebac) fix(a11y): add focusin/focusout to saved-query nav hover tooltip (WCAG 2.1.1) (#3453)
- [`c7206af9`](c7206af) fix(a11y): render a warning icon for Chip warning intent (WCAG 1.4.1) (#3450)
- [`b64ed713`](b64ed71) fix(a11y): pair Toast variant background with a severity icon (WCAG 1.4.1) (#3449)
- [`8e2ef708`](8e2ef70) upgrade temporal api version to latest (v1.62.13) (#3502)

Co-authored-by: rossedfort <11775628+rossedfort@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants