From ab77ca85a8875c9d5fa303a73e3b4d68ab4306bd Mon Sep 17 00:00:00 2001
From: Bilal Karim <4129613+bilal-karim@users.noreply.github.com>
Date: Fri, 22 May 2026 12:15:34 -0400
Subject: [PATCH] fix(a11y): align DOM order with visual order in mobile
 bottom-nav drawer (WCAG 1.3.2)

The drawer used flex-col-reverse to put the most-important
section nearest the user's thumb at the bottom of the screen.
Visually correct, but the implementation chose to reverse via CSS
rather than data -- so sighted users saw [C, B, A] while screen
readers and keyboard tab encountered [A, B, C]. This is the
canonical WCAG 1.3.2 Meaningful Sequence failure.

Move the reversal from CSS to a $derived in script, then use
plain flex-col so DOM order matches visual order. Visual output
is identical to today; only DOM, keyboard tab, and screen-reader
reading order change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/bottom-nav-links.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/bottom-nav-links.svelte b/src/lib/components/bottom-nav-links.svelte
index 4e6419ffb8..847082e28a 100644
--- a/src/lib/components/bottom-nav-links.svelte
+++ b/src/lib/components/bottom-nav-links.svelte
@@ -9,14 +9,15 @@
 
   let { open = false, sections }: Props = $props();
 
-  const isNotLastSection = (i: number): boolean => i !== sections.length - 1;
+  const visualSections = $derived([...sections].reverse());
+
+  const isNotLastSection = (i: number): boolean =>
+    i !== visualSections.length - 1;
 </script>
 
 {#if open}
-  <div
-    class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
-  >
-    {#each sections as section, i (i)}
+  <div class="flex h-full flex-col justify-start gap-6 overflow-auto px-4 py-8">
+    {#each visualSections as section, i (i)}
       <NavSection navItems={section} />
       {#if isNotLastSection(i)}
         <hr class="border-subtle" />