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

Stop a disabled list item answering the keyboard

Browse Source 
Plan step 12, containment.md C-02. `pointer-events-none` blocked the
pointer but not Tab and Enter: the item's `<a href>` stayed in the tab
order and navigated, and nothing announced it disabled. A disabled item
now renders its title as text, is no longer a `data-list-row`, and
carries `aria-disabled="true"`.

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 05:54:25 +02:00
co-authored by Claude Opus 5
parent f02fa1a78d
commit 7f67856916
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/list-item.blade.php
+5 -2
View File
@@ -13,7 +13,9 @@
`link` makes the whole item the link. Otherwise, to make it open something while its trailing `link` makes the whole item the link. Otherwise, to make it open something while its trailing
controls keep their own presses, give it `data-list-row` and put `data-list-open` on the one controls keep their own presses, give it `data-list-row` and put `data-list-open` on the one
control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected item, control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected item,
in secondary-container; `disabled` greys it. --}} in secondary-container; `disabled` greys it to 38%, drops its link and announces it
`aria-disabled` — M3's states model treats disabled as not interactive, so a disabled item
answers neither the pointer nor the keyboard. --}}
@props([ @props([
'title' => null, 'title' => null,
@@ -32,7 +34,7 @@
]) ])
@php @php
$isLink = filled($link); $isLink = filled($link) && ! $disabled;
$lines = (filled($overline) ? 1 : 0) + (filled($description) ? 1 : 0); $lines = (filled($overline) ? 1 : 0) + (filled($description) ? 1 : 0);
$initials = filled($avatar) && ! str_contains((string) $avatar, '/') && ! str_contains((string) $avatar, '.'); $initials = filled($avatar) && ! str_contains((string) $avatar, '/') && ! str_contains((string) $avatar, '.');
@endphp @endphp
@@ -42,6 +44,7 @@
data-list-item data-list-item
@if ($isLink) data-list-row @endif @if ($isLink) data-list-row @endif
@if ($selected) data-selected @endif @if ($selected) data-selected @endif
@if ($disabled) aria-disabled="true" @endif
{{ $attributes->class([ {{ $attributes->class([
'relative flex items-center gap-3 px-4 text-on-surface', 'relative flex items-center gap-3 px-4 text-on-surface',
'min-h-14 py-2' => $lines === 0, 'min-h-14 py-2' => $lines === 0,
tests/Feature/Components/ListTest.php
+9
View File
@@ -38,6 +38,15 @@ it('makes a linked item a row that opens from anywhere', function () {
->toContain('wire:navigate'); ->toContain('wire:navigate');
}); });
it('leaves a disabled item out of the keyboard and announces it disabled', function () {
expect((string) $this->blade('<x-list-item title="Settings" link="/settings" icon="settings" disabled />'))
->toContain('aria-disabled="true"')
->toContain('pointer-events-none text-on-surface/38')
->not->toContain('href="/settings"')
->not->toContain('data-list-open')
->not->toContain('data-list-row');
});
it('marks a selected item and takes controls in its slots', function () { it('marks a selected item and takes controls in its slots', function () {
expect((string) $this->blade('<x-list-item title="Anna" :selected="true"><x-slot:leading><input type="checkbox"></x-slot:leading><x-slot:end><button>⋮</button></x-slot:end></x-list-item>')) expect((string) $this->blade('<x-list-item title="Anna" :selected="true"><x-slot:leading><input type="checkbox"></x-slot:leading><x-slot:end><button>⋮</button></x-slot:end></x-list-item>'))
->toContain('data-selected') ->toContain('data-selected')