Andreas Reinhold / reiniandClaude Opus 5
ab7317faae
<x-group hint-class> adds classes to the hint, as the text fields' hint-class does, and a validation message still replaces the hint. <x-menu-item icon-class> adds classes to the leading icon, for an icon whose colour means something of its own, such as a sport's glyph. A colour class there has to win over the component's own colour, and which of two colour utilities wins depends on the order Tailwind emits them (text-error comes before text-on-surface-variant). So when either prop is given, the component's own colour is written with a :where() variant that carries no specificity, as the fields' hint colour sits in the components layer. A disabled item's icon stays disabled. Without the props the markup is unchanged. The skill now also lists the fields' hint-class, which it had left out. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
254 lines
11 KiB
PHP
254 lines
11 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\Blade;
|
|
use Illuminate\Support\Facades\Route;
|
|
use Livewire\Component;
|
|
use Livewire\Livewire;
|
|
|
|
const MORE = '#menus [aria-label="More"]';
|
|
|
|
class MenuAnchorProbe extends Component
|
|
{
|
|
public int $renders = 0;
|
|
|
|
public function touch(): void
|
|
{
|
|
$this->renders++;
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div class="grid justify-items-start gap-6 p-4">
|
|
<p>renders: <span id="renders">{{ $renders }}</span></p>
|
|
|
|
<x-menu label="Share actions">
|
|
<x-slot:trigger>
|
|
<x-button icon="more_vert" tooltip="More" data-test="more" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Copy link" icon="content_copy" />
|
|
<x-menu-item label="Download" icon="download" />
|
|
</x-menu>
|
|
|
|
<x-menu label="Create">
|
|
<x-slot:trigger>
|
|
<x-button fab icon="add" label="New plan" data-test="fab" />
|
|
</x-slot:trigger>
|
|
|
|
<x-menu-item label="Running plan" icon="directions_run" />
|
|
<x-menu-item label="Cycling plan" icon="directions_bike" />
|
|
</x-menu>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function showcase(string $section = 'buttons')
|
|
{
|
|
return visit("/material/{$section}")->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
function focused(string $expression): string
|
|
{
|
|
return "document.activeElement.{$expression}";
|
|
}
|
|
|
|
it('opens a menu on the first item and walks it with the keyboard', function () {
|
|
$page = showcase('menus')
|
|
->assertNoJavaScriptErrors()
|
|
->click(MORE)
|
|
->assertAttribute(MORE, 'aria-expanded', 'true')
|
|
->assertScript(focused("textContent.trim().startsWith('Copy link')"));
|
|
|
|
$page->keys(':focus', ['ArrowDown', 'ArrowDown'])
|
|
->assertScript(focused("textContent.trim().startsWith('Rename')"));
|
|
|
|
$page->keys(':focus', 'End')
|
|
->assertScript(focused("textContent.trim().startsWith('Delete')"));
|
|
|
|
$page->keys(':focus', 'ArrowDown')
|
|
->assertScript(focused("textContent.trim().startsWith('Copy link')"));
|
|
|
|
$page->keys(':focus', 'd')
|
|
->assertScript(focused("textContent.trim().startsWith('Download')"));
|
|
|
|
$page->keys(':focus', 'Escape')
|
|
->assertAttribute(MORE, 'aria-expanded', 'false')
|
|
->assertScript(focused("getAttribute('aria-label') === 'More'"));
|
|
});
|
|
|
|
it('opens a menu from the keyboard, on the last item with ArrowUp', function () {
|
|
$page = showcase('menus');
|
|
|
|
$page->script("document.querySelector('".MORE."').focus()");
|
|
|
|
$page->keys(':focus', 'ArrowUp')
|
|
->assertAttribute(MORE, 'aria-expanded', 'true')
|
|
->assertScript(focused("textContent.trim().startsWith('Delete')"));
|
|
});
|
|
|
|
it('opens a menu the moment the page can be used', function () {
|
|
// The guard against a light-dismiss press reopening the menu once measured from the page's
|
|
// time origin, and swallowed every click in the first quarter second.
|
|
visit('/material/menus')
|
|
->click(MORE)
|
|
->assertAttribute(MORE, 'aria-expanded', 'true');
|
|
});
|
|
|
|
it('closes a menu when an item is chosen, but not one that keeps it open', function () {
|
|
$page = showcase('menus');
|
|
|
|
$page->click(MORE)
|
|
->click('#menus [role="menuitem"]:has-text("Download")')
|
|
->assertAttribute(MORE, 'aria-expanded', 'false');
|
|
|
|
$page->click('#menus button:has-text("Sort")')
|
|
->click('#menus [role="menuitemcheckbox"]:has-text("Largest")')
|
|
->assertScript("document.querySelector('#menus [role=\"menu\"][aria-label=\"Sort\"]').matches(':popover-open')");
|
|
});
|
|
|
|
it('shows a tooltip on keyboard focus and hides it on Escape', function () {
|
|
$tooltip = "document.querySelector('#buttons [aria-label=\"Tonal\"] [popover]')";
|
|
|
|
$page = showcase();
|
|
|
|
// A key press first, so the browser is in keyboard modality, as a keyboard user would be —
|
|
// Firefox only counts a scripted focus as :focus-visible after one. Then focused directly
|
|
// rather than tabbed to: WebKit, like Safari on macOS, leaves buttons out of the Tab order
|
|
// unless full keyboard access is on.
|
|
$page->keys('#content', 'Tab');
|
|
$page->script("document.querySelector('#buttons [aria-label=\"Tonal\"]').focus()");
|
|
$page->assertScript(focused("getAttribute('aria-label') === 'Tonal'"))
|
|
->assertScript("{$tooltip}.matches(':popover-open')");
|
|
|
|
$page->keys(':focus', 'Escape')
|
|
->assertScript("! {$tooltip}.matches(':popover-open')");
|
|
});
|
|
|
|
it('moves a connected group\'s choice with the arrow keys', function () {
|
|
$checked = fn (string $value): string => "document.querySelector('#buttons input[name=\"showcase-theme\"][value=\"{$value}\"]').checked";
|
|
|
|
$page = showcase();
|
|
|
|
$page->script("document.querySelector('#buttons input[name=\"showcase-theme\"][value=\"system\"]').focus()");
|
|
|
|
$page->keys(':focus', 'ArrowLeft')
|
|
->assertScript($checked('dark'))
|
|
->assertScript("getComputedStyle(document.querySelector('#buttons input[value=\"dark\"]').parentElement).borderTopLeftRadius === '9999px'");
|
|
});
|
|
|
|
it('rounds a split button\'s trailing half while its menu is open', function () {
|
|
$trailing = "document.querySelector('[data-split=\"trailing\"]')";
|
|
|
|
showcase()
|
|
->click('[data-split="trailing"] >> nth=0')
|
|
->assertScript("{$trailing}.getAttribute('aria-expanded') === 'true'")
|
|
->assertScript("getComputedStyle({$trailing}).borderTopLeftRadius === '9999px'");
|
|
});
|
|
|
|
it('turns the FAB into a close button while its menu is open', function () {
|
|
$fab = "document.querySelector('button[aria-label=\"New\"]')";
|
|
|
|
$page = showcase()
|
|
->click('button[aria-label="New"]')
|
|
->assertScript("{$fab}.getAttribute('aria-expanded') === 'true'")
|
|
->assertScript(focused("textContent.trim() === 'Upload files'"));
|
|
|
|
$page->keys(':focus', 'Escape')
|
|
->assertScript("{$fab}.getAttribute('aria-expanded') === 'false'")
|
|
->assertScript(focused("getAttribute('aria-label') === 'New'"));
|
|
});
|
|
|
|
it('animates the loading indicator in the browser', function () {
|
|
$clock = "document.querySelector('#buttons [role=\"progressbar\"] svg').getCurrentTime()";
|
|
|
|
showcase()->assertScript("{$clock} > 0.1");
|
|
});
|
|
|
|
/** A script giving the rects of a menu button (`control`) and of the menu it opens (`menu`). */
|
|
function menuAgainst(string $test, string $label): string
|
|
{
|
|
return "(() => { const control = document.querySelector('[data-test=\"{$test}\"]').getBoundingClientRect(); const menu = document.querySelector('[role=\"menu\"][aria-label=\"{$label}\"]').getBoundingClientRect(); return { control, menu }; })()";
|
|
}
|
|
|
|
it('hangs a menu on its menu button, even when the button is fixed to a corner of the window', function () {
|
|
Livewire::component('menu-anchor-probe', MenuAnchorProbe::class);
|
|
|
|
Route::middleware('web')->get('/menu-anchor-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body class="bg-surface">
|
|
<livewire:menu-anchor-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$placed = menuAgainst('fab', 'Create');
|
|
$above = "(({ control, menu }) => getComputedStyle(document.querySelector('[data-test=\"fab\"]')).position === 'fixed' && menu.bottom <= control.top && control.top - menu.bottom <= 16 && Math.abs(menu.right - control.right) <= 16 && menu.left >= 0 && menu.top >= 0)({$placed})";
|
|
|
|
$page = visit('/menu-anchor-probe')->resize(400, 800)->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->click('@fab')
|
|
->assertAttribute('@fab', 'aria-expanded', 'true')
|
|
->assertScript($above);
|
|
|
|
$page->keys(':focus', 'Escape')->assertAttribute('@fab', 'aria-expanded', 'false');
|
|
|
|
// A Livewire render names the anchor afresh, on the wrapper again. Opened from the keyboard: a
|
|
// press this soon after the menu closed is taken for the light-dismiss press and ignored.
|
|
$page->script('window.eval("Livewire.first().touch()")');
|
|
|
|
$page->assertSeeIn('#renders', '1')
|
|
->script("document.querySelector('[data-test=\"fab\"]').focus()");
|
|
|
|
$page->keys(':focus', 'ArrowDown')
|
|
->assertAttribute('@fab', 'aria-expanded', 'true')
|
|
->assertScript($above);
|
|
|
|
// A button that also anchors its own tooltip keeps it, and the menu hangs under the button.
|
|
$page->resize(1024, 800)
|
|
->click('@more')
|
|
->assertAttribute('@more', 'aria-expanded', 'true')
|
|
->assertScript("(() => { const names = getComputedStyle(document.querySelector('[data-test=\"more\"]')).getPropertyValue('anchor-name'); return names.includes('--material-button-') && names.includes('--material-menu-'); })()")
|
|
->assertScript('(({ control, menu }) => menu.top >= control.bottom && menu.top - control.bottom <= 16 && Math.abs(menu.left - control.left) <= 16)('.menuAgainst('more', 'Share actions').')');
|
|
});
|
|
|
|
it('paints a group\'s hint and a menu item\'s icon in the colour their classes name', function () {
|
|
Route::middleware('web')->get('/colour-class-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
</head>
|
|
<body class="bg-surface">
|
|
<span id="error-ink" class="text-error">Reference</span>
|
|
<div id="terrain">
|
|
<x-group name="terrain" hint="No elevation data here" hint-class="text-error" :options="[['id' => 'flat', 'name' => 'Flat']]" />
|
|
</div>
|
|
<x-menu-item id="run" label="Running plan" icon="directions_run" icon-class="text-error" />
|
|
<x-menu-item id="chosen" label="Cycling plan" icon="directions_bike" icon-class="text-error" :selected="true" />
|
|
<x-menu-item id="off" label="Swimming plan" icon="pool" icon-class="text-error" disabled />
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$ink = fn (string $element): string => "getComputedStyle({$element}).color";
|
|
$error = $ink("document.querySelector('#error-ink')");
|
|
|
|
visit('/colour-class-probe')->waitForEvent('networkidle')
|
|
->assertScript($ink("document.querySelector('#terrain p')")." === {$error}")
|
|
->assertScript($ink("document.querySelector('#run svg')")." === {$error}")
|
|
->assertScript($ink("document.querySelector('#chosen svg')")." === {$error}")
|
|
->assertScript($ink("document.querySelector('#off svg')")." !== {$error}");
|
|
});
|