feat(web): add chevron + aria affordances to user-menu button
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>
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import { ChevronDown } from 'lucide-svelte';
|
||||||
import { user, logout } from '$lib/auth/store.svelte';
|
import { user, logout } from '$lib/auth/store.svelte';
|
||||||
import { player } from '$lib/player/store.svelte';
|
import { player } from '$lib/player/store.svelte';
|
||||||
import PlayerBar from './PlayerBar.svelte';
|
import PlayerBar from './PlayerBar.svelte';
|
||||||
@@ -64,10 +65,18 @@
|
|||||||
<button
|
<button
|
||||||
bind:this={menuButtonRef}
|
bind:this={menuButtonRef}
|
||||||
type="button"
|
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)}
|
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>
|
</button>
|
||||||
{#if menuOpen}
|
{#if menuOpen}
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user