noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the account-menu avatar a state layer

Browse Source 
The trigger had the focus ring but no hover and no pressed feedback at all,
where every comparable trigger in the library carries `state-layer` and M3 asks
for two visual indicators per state. An avatar image sits behind the layer, so
the wash shows over a photograph too.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-15).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:12:44 +02:00
co-authored by Claude Opus 5
parent 5205aa8842
commit 1218371568
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/account-menu.blade.php
+4 -2
View File
@@ -38,10 +38,12 @@
type="button" type="button"
aria-label="{{ $label }}" aria-label="{{ $label }}"
data-account-menu data-account-menu
class="touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container" class="state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
> >
@if ($image) @if ($image)
<img src="{{ $avatar }}" alt="" class="size-full rounded-corner-full object-cover" /> {{-- Behind the state layer (`state-layer` paints its ::before at z-index -1), so an
avatar image still shows the hover and pressed states over it. --}}
<img src="{{ $avatar }}" alt="" class="relative -z-20 size-full rounded-corner-full object-cover" />
@elseif (filled($initials)) @elseif (filled($initials))
{{ $initials }} {{ $initials }}
@else @else
tests/Feature/Components/AppBarTest.php
+4 -3
View File
@@ -146,8 +146,9 @@ it('opens an account menu from the initials of a name', function () {
expect($html) expect($html)
->toContain('aria-label="Account"') ->toContain('aria-label="Account"')
->toContain('data-account-menu') ->toContain('data-account-menu')
// The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01). // The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01); the trigger
->toContain('touch-target') // has a hover and a pressed state like every other trigger in the library (N-15).
->toContain('state-layer touch-target focus-ring')
->not->toContain('overflow-hidden') ->not->toContain('overflow-hidden')
->toMatch('/>\s*AM\s*<\/button>/') ->toMatch('/>\s*AM\s*<\/button>/')
->toContain('anna@example.com') ->toContain('anna@example.com')
@@ -155,6 +156,6 @@ it('opens an account menu from the initials of a name', function () {
->toContain('data-account-theme') ->toContain('data-account-theme')
->toContain('Sign out') ->toContain('Sign out')
->and((string) $this->blade('<x-account-menu avatar="/anna.jpg" :theme="false" />')) ->and((string) $this->blade('<x-account-menu avatar="/anna.jpg" :theme="false" />'))
->toContain('<img src="/anna.jpg" alt="" class="size-full rounded-corner-full object-cover" />') ->toContain('<img src="/anna.jpg" alt="" class="relative -z-20 size-full rounded-corner-full object-cover" />')
->not->toContain('data-account-theme'); ->not->toContain('data-account-theme');
}); });