Give the account-menu avatar a state layer
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:
co-authored by
Claude Opus 5
parent
5205aa8842
commit
1218371568
@@ -146,8 +146,9 @@ it('opens an account menu from the initials of a name', function () {
|
||||
expect($html)
|
||||
->toContain('aria-label="Account"')
|
||||
->toContain('data-account-menu')
|
||||
// The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01).
|
||||
->toContain('touch-target')
|
||||
// The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01); the trigger
|
||||
// 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')
|
||||
->toMatch('/>\s*AM\s*<\/button>/')
|
||||
->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('Sign out')
|
||||
->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');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user