Skip to content

Make bottom-nav accept linksSnippet instead of sections#3445

Merged
tegan-temporal merged 2 commits into
mainfrom
bottom-nav-composable-links
May 22, 2026
Merged

Make bottom-nav accept linksSnippet instead of sections#3445
tegan-temporal merged 2 commits into
mainfrom
bottom-nav-composable-links

Conversation

@tegan-temporal
Copy link
Copy Markdown
Contributor

@tegan-temporal tegan-temporal commented May 22, 2026

Description & motivation 💭

Enable composability of bottom nav links via snippet instead of passing in an array of sections

Screenshots (if applicable) 📸

Screenshot 2026-05-22 at 12 09 56 PM Screenshot 2026-05-22 at 11 59 26 AM

Design Considerations 🎨

Testing 🧪

How was this tested 👻

  • Manual testing
  • E2E tests added
  • Unit tests added

@tegan-temporal tegan-temporal self-assigned this May 22, 2026
@tegan-temporal tegan-temporal requested a review from a team as a code owner May 22, 2026 18:59
@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 7:11pm

Request Review

@tegan-temporal tegan-temporal merged commit e09028f into main May 22, 2026
18 checks passed
@tegan-temporal tegan-temporal deleted the bottom-nav-composable-links branch May 22, 2026 21:02
ardiewen added a commit that referenced this pull request Jun 3, 2026
…AG 1.3.2)

Reimplements the 1.3.2 Meaningful Sequence fix on the linksSnippet
architecture introduced by #3445 (which deleted bottom-nav-links.svelte).

The drawer used flex-col-reverse to place the primary nav group at the
bottom near the thumb, so sighted users read top-to-bottom while AT and
keyboard users encountered the reverse DOM order. Move the reversal from
CSS into the data: emit the snippet in visual top-to-bottom order
(reversed copies of each group) and switch flex-col-reverse/justify-start
to flex-col/justify-end. Pixels are unchanged; DOM, tab, and screen-reader
order now match the visual order.

Copies ([...group].reverse()) are used so the arrays passed to the
desktop SideNavigation are not mutated.

A11y-Audit-Ref: 1.3.2-bottom-nav-links-order

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
bilal-karim added a commit that referenced this pull request Jun 3, 2026
…AG 1.3.2) (#3441)

Reimplements the 1.3.2 Meaningful Sequence fix on the linksSnippet
architecture introduced by #3445 (which deleted bottom-nav-links.svelte).

The drawer used flex-col-reverse to place the primary nav group at the
bottom near the thumb, so sighted users read top-to-bottom while AT and
keyboard users encountered the reverse DOM order. Move the reversal from
CSS into the data: emit the snippet in visual top-to-bottom order
(reversed copies of each group) and switch flex-col-reverse/justify-start
to flex-col/justify-end. Pixels are unchanged; DOM, tab, and screen-reader
order now match the visual order.

Copies ([...group].reverse()) are used so the arrays passed to the
desktop SideNavigation are not mutated.

A11y-Audit-Ref: 1.3.2-bottom-nav-links-order

Co-authored-by: Ardie Wen <ardie.wen@temporal.io>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ardiewen added a commit that referenced this pull request Jun 4, 2026
The mobile bottom-nav linksSnippet renders NavigationItem directly,
bypassing NavSection's `!item.hidden` filter. As a result, capability-
gated links (Standalone Activities on server <1.30.0, Nexus when
systemInfo.capabilities.nexus is absent) still rendered as focusable
links for keyboard and screen-reader users on incapable servers — the
desktop side-nav already filters these via NavSection.

This gap was introduced when #3445 flattened NavSection into a snippet of
raw NavigationItems; #3434 added the hidden filter to NavSection only.
Apply the same `!item.hidden` predicate to both bottom-nav groups.

A11y-Audit-Ref: 4.1.2-nav-hidden-flag-ignored

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.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