From 65651510fb986e3843fb03fc66c37eec1936cb19 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 1 May 2026 22:54:14 -0400
Subject: [PATCH] feat(web): add chevron + aria affordances to user-menu button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The username was rendered as plain text with no visual cue that it
opened a dropdown. Adds a 16px Lucide ChevronDown to the right of the
name (rotates 180° when open) plus the canonical aria-haspopup='menu'
and aria-expanded={menuOpen} attributes so screen readers announce the
button as a menu opener and reflect open/closed state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/Shell.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/Shell.svelte b/web/src/lib/components/Shell.svelte
index 6d505911..4633ec59 100644
--- a/web/src/lib/components/Shell.svelte
+++ b/web/src/lib/components/Shell.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
+  import { ChevronDown } from 'lucide-svelte';
   import { user, logout } from '$lib/auth/store.svelte';
   import { player } from '$lib/player/store.svelte';
   import PlayerBar from './PlayerBar.svelte';
@@ -64,10 +65,18 @@
       <button
         bind:this={menuButtonRef}
         type="button"
-        class="rounded px-3 py-1 hover:bg-surface-hover"
+        class="flex items-center gap-1.5 rounded px-3 py-1 hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-accent"
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
         onclick={() => (menuOpen = !menuOpen)}
       >
-        {user.value?.username ?? ''}
+        <span>{user.value?.username ?? ''}</span>
+        <ChevronDown
+          size={16}
+          strokeWidth={1}
+          class="transition-transform {menuOpen ? 'rotate-180' : ''}"
+          aria-hidden="true"
+        />
       </button>
       {#if menuOpen}
         <div