From 9e4b0d7489605e8fe151c3743134cfcd50cb1dec Mon Sep 17 00:00:00 2001
From: Ardie Wen <ardie.wen@temporal.io>
Date: Wed, 3 Jun 2026 14:42:15 -0400
Subject: [PATCH] fix(a11y): align DOM order with visual order in mobile
 bottom-nav (WCAG 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>
---
 src/lib/components/bottom-nav.svelte | 2 +-
 src/routes/(app)/+layout.svelte      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/bottom-nav.svelte b/src/lib/components/bottom-nav.svelte
index eb9068ddf7..5f944b09bc 100644
--- a/src/lib/components/bottom-nav.svelte
+++ b/src/lib/components/bottom-nav.svelte
@@ -152,7 +152,7 @@
       {@render linksContent({ open: viewLinks, closeMenu })}
     {:else}
       <div
-        class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
+        class="flex h-full flex-col justify-end gap-6 overflow-auto px-4 py-8"
       >
         {@render linksSnippet?.()}
       </div>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 83a41e017f..8de2948b30 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -360,13 +360,13 @@
     {#snippet footer()}
       <BottomNavigation {namespaceList} {isCloud} {showNamespacePicker}>
         {#snippet linksSnippet()}
-          {#each linkList as link, i (i)}
+          {#each [...linkListForSecondGroup].reverse() as link, i (i)}
             <NavigationItem {...link} link={link.href} />
           {/each}
 
           <hr class="border-subtle" />
 
-          {#each linkListForSecondGroup as link, i (i)}
+          {#each [...linkList].reverse() as link, i (i)}
             <NavigationItem {...link} link={link.href} />
           {/each}
         {/snippet}