Skip to content

fix(a11y): use rem-based width for expanded side-nav#3426

Merged
bilal-karim merged 1 commit into
mainfrom
a11y/side-nav-rem-width
May 22, 2026
Merged

fix(a11y): use rem-based width for expanded side-nav#3426
bilal-karim merged 1 commit into
mainfrom
a11y/side-nav-rem-width

Conversation

@bilal-karim

@bilal-karim bilal-karim commented May 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

  • Converts the Cloud side-nav expanded width from w-[210px] to w-[13.125rem] in navigation-container.svelte
  • Visually identical at default 16px base font size (13.125 × 16 = 210)
  • Scales with user font-size preference and browser text-only zoom, preventing nav label clipping at 200%+ zoom (WCAG 2.2 SC 1.4.4 Resize Text)

Test plan

  • Open Cloud deployment with side-nav expanded — confirm visual is identical to current
  • Firefox: View → Zoom → Zoom Text Only → 200% — confirm all nav labels remain readable without clipping
  • Verify OSS nav is unaffected (this class only applies to the isCloud branch)

🤖 Generated with Claude Code

@bilal-karim @claude
fix: use rem-based width for expanded side-nav
4cb88ae 
Converts the Cloud side-nav expanded width from `w-[210px]` to
`w-[13.125rem]` (identical at default 16px base). Scales with user
font-size preference and browser text-only zoom per WCAG 2.2 SC 1.4.4.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@bilal-karim
bilal-karim requested a review from a team as a code owner May 21, 2026 19:57
@vercel

vercel Bot commented May 21, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment May 21, 2026 7:58pm

Request Review

@bilal-karim
bilal-karim marked this pull request as draft May 21, 2026 19:58
@bilal-karim
bilal-karim marked this pull request as ready for review May 21, 2026 20:28
@bilal-karim bilal-karim changed the title fix: use rem-based width for expanded side-nav fix(a11y): use rem-based width for expanded side-nav May 22, 2026
@bilal-karim
bilal-karim merged commit 42c58c4 into main May 22, 2026
19 checks passed
@bilal-karim
bilal-karim deleted the a11y/side-nav-rem-width branch May 22, 2026 13:03
@temporal-cicd temporal-cicd Bot mentioned this pull request Jun 4, 2026
Merged
rossedfort added a commit that referenced this pull request Jun 4, 2026
@temporal-cicd @rossedfort
chore: bump version to 2.51.0 (#3503)
5efd7d9 
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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Alex-Tideman Alex-Tideman Alex-Tideman approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@bilal-karim @Alex-Tideman