diff --git a/resources/views/components/account-menu.blade.php b/resources/views/components/account-menu.blade.php index b5417baf..00c968a9 100644 --- a/resources/views/components/account-menu.blade.php +++ b/resources/views/components/account-menu.blade.php @@ -38,10 +38,10 @@ type="button" aria-label="{{ $label }}" data-account-menu - class="focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-corner-full bg-primary-container type-label-lg text-on-primary-container" + 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" > @if ($image) - + @elseif (filled($initials)) {{ $initials }} @else diff --git a/resources/views/components/navigation-rail.blade.php b/resources/views/components/navigation-rail.blade.php index 469d530c..c9b4fa6a 100644 --- a/resources/views/components/navigation-rail.blade.php +++ b/resources/views/components/navigation-rail.blade.php @@ -109,7 +109,7 @@ x-on:click="menu()" x-bind:aria-label="expanded ? @js(__('Collapse navigation')) : @js(__('Expand navigation'))" x-bind:aria-expanded="expanded.toString()" - class="state-layer focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant after:absolute after:top-1/2 after:left-1/2 after:size-12 after:-translate-x-1/2 after:-translate-y-1/2" + class="state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant" > diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php index 47181f7a..a364c132 100644 --- a/resources/views/components/theme-toggle.blade.php +++ b/resources/views/components/theme-toggle.blade.php @@ -93,7 +93,7 @@ x-bind:aria-pressed="($store.theme.resolved === 'dark').toString()" x-on:click="$store.theme.toggle()" @endif - {{ $attributes->class(['state-layer focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant transition-[border-radius] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast active:rounded-corner-sm']) }} + {{ $attributes->class(['state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant transition-[border-radius] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast active:rounded-corner-sm']) }} > @if ($mode === 'cycle') diff --git a/tests/Feature/Components/AppBarTest.php b/tests/Feature/Components/AppBarTest.php index db85e50b..95760299 100644 --- a/tests/Feature/Components/AppBarTest.php +++ b/tests/Feature/Components/AppBarTest.php @@ -86,6 +86,8 @@ it('switches the theme through the store in three shapes', function () { expect((string) $this->blade('')) ->toContain('data-theme-toggle="toggle"') ->toContain('aria-label="Dark theme"') + // 40px drawn, 48px reached: M3's minimum target (N-01). + ->toContain('touch-target') ->toContain('$store.theme.toggle()') ->and((string) $this->blade('')) ->toContain('data-theme-toggle="cycle"') @@ -107,12 +109,15 @@ 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') + ->not->toContain('overflow-hidden') ->toMatch('/>\s*AM\s*<\/button>/') ->toContain('anna@example.com') ->toContain('Settings') ->toContain('data-account-theme') ->toContain('Sign out') ->and((string) $this->blade('')) - ->toContain('toContain('') ->not->toContain('data-account-theme'); }); diff --git a/tests/Feature/Components/NavigationRailTest.php b/tests/Feature/Components/NavigationRailTest.php index cc571388..99223e02 100644 --- a/tests/Feature/Components/NavigationRailTest.php +++ b/tests/Feature/Components/NavigationRailTest.php @@ -22,6 +22,8 @@ it('gives the collapsible, modal and adaptive rails a menu button and the store' ->toContain('data-navigation-rail-menu') ->toContain('aria-label="Collapse navigation"') ->toContain('aria-expanded="true"') + // The 40px menu button reaches M3's 48px target through the shared utility (N-01). + ->toContain('touch-target') ->not->toContain('data-navigation-rail-scrim') ->not->toContain('x-trap') ->and((string) $this->blade(''))