Andreas Reinhold / reiniandClaude Opus 5
7f67856916
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
56 lines
2.9 KiB
PHP
56 lines
2.9 KiB
PHP
<?php
|
|
|
|
it('draws a plain list, with dividers on request', function () {
|
|
expect((string) $this->blade('<x-list label="Files" dividers><x-list-item title="a.zip" /></x-list>'))
|
|
->toContain('role="list"')
|
|
->toContain('aria-label="Files"')
|
|
->toContain('data-list="plain"')
|
|
->toContain('divide-y divide-outline-variant')
|
|
->toContain('role="listitem"');
|
|
});
|
|
|
|
it('draws M3 Expressive\'s segmented list', function () {
|
|
expect((string) $this->blade('<x-list segmented><x-list-item title="a.zip" /></x-list>'))
|
|
->toContain('data-list="segmented"')
|
|
->toContain('gap-0.5');
|
|
});
|
|
|
|
it('grows an item from one to three lines', function () {
|
|
expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('min-h-14')
|
|
->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('min-h-18')->toContain('248 MB')
|
|
->and((string) $this->blade('<x-list-item title="a.zip" overline="Protected" description="248 MB" />'))->toContain('min-h-22')->toContain('Protected');
|
|
});
|
|
|
|
it('leads with an icon, an avatar or an image, and trails with text or an icon', function () {
|
|
expect((string) $this->blade('<x-list-item title="a" icon="folder_zip" trailing="3 days" icon-right="chevron_right" />'))
|
|
->toContain('3 days')
|
|
->and(substr_count((string) $this->blade('<x-list-item title="a" icon="folder_zip" icon-right="chevron_right" />'), '<svg'))->toBe(2)
|
|
->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('bg-primary-container')->toContain('>AM</span>')
|
|
->and((string) $this->blade('<x-list-item title="Anna" avatar="/anna.jpg" />'))->toContain('<img src="/anna.jpg"')
|
|
->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('size-14');
|
|
});
|
|
|
|
it('makes a linked item a row that opens from anywhere', function () {
|
|
expect((string) $this->blade('<x-list-item title="Settings" link="/settings" />'))
|
|
->toContain('data-list-row')
|
|
->toContain('href="/settings"')
|
|
->toContain('data-list-open')
|
|
->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 () {
|
|
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('<input type="checkbox">')
|
|
->toContain('<button>⋮</button>');
|
|
});
|