fix(a11y): align DOM order with visual order in mobile bottom-nav (WCAG 1.3.2)

[bilal-karim]

Summary

The mobile bottom-nav drawer used flex-col-reverse to put the most-important section closest to the user's thumb at the bottom of the screen. Visually correct, but the implementation chose to reverse via CSS rather than data:

• Sighted users saw sections in order [C, B, A] (bottom-up importance)
• Screen readers / keyboard tab encountered [A, B, C] (DOM order)

This is the canonical WCAG 1.3.2 Meaningful Sequence failure — visual reading order diverges from programmatic reading order.

Fix

Move the reversal from CSS to a $derived in script, then use plain flex-col:

-  const isNotLastSection = (i: number): boolean => i !== sections.length - 1;
+  const visualSections = $derived([...sections].reverse());
+  const isNotLastSection = (i: number): boolean =>
+    i !== visualSections.length - 1;
...
-  <div class="flex h-full flex-col-reverse ...">
-    {#each sections as section, i (i)}
+  <div class="flex h-full flex-col ...">
+    {#each visualSections as section, i (i)}

Visual output is identical. DOM order, keyboard tab order, and screen-reader reading order now all agree.

Audit context

• WCAG 2.2 SC 1.3.2 Meaningful Sequence (Level A) — Moderate.
• Issue file: audit-output/issues/1.3.2-bottom-nav-links-order.md.
• The audit's Defect 2 (portal-tooltip aria-describedby linkage) was deferred to the 1.4.13 tooltip remediation. That dependency is already satisfied by PR fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable #3429, which adds the aria-describedby wiring.

Test plan

• On a mobile viewport (Chrome DevTools device mode → iPhone), open the bottom-nav drawer. Confirm the visual section order is unchanged from prod.
• With VoiceOver iOS (or TalkBack Android) on a real device, swipe through the drawer sections. Sections should be announced in the same order as they appear visually, top to bottom.
• Tab through the drawer with a Bluetooth keyboard on a tablet. Focus should move through links in visual order.
• Inspect the rendered DOM — <NavSection> elements should appear in visualSections order, not the reversed-by-CSS original.

🤖 Generated with Claude Code

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

[vercel]

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

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