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

Close only the topmost layer on Escape, and keep a layer opened over a sheet readable

Browse Source 
A modal side sheet, bottom sheet or the modal rail closed on any Escape
the window heard, so a dialog opened from a sheet, a menu, select list
or searchable choice inside one, a sheet opened from a sheet, and a
sheet inside a dialog each closed two layers on one press. And a dialog
or a second sheet rendered elsewhere on the page sat inside the
`aria-hidden` the first sheet's `x-trap.inert` put on its siblings, so a
screen reader could not read it, while the sheet's focus trap took every
Tab inside the dialog back to the inert sheet.

resources/js/layers.js adds `x-layer`, on each of those panels beside
its `x-trap`. An Escape is the panel's only when nothing has handled it
and the nearest open layer around its target is the panel itself - not
an open dialog, popover or customizable select, nor a panel inside it;
the panel claims it with preventDefault(), which also keeps a dialog
around it from cancelling, and dispatches `material-escape`, which the
views close on. A panel that opens lifts `aria-hidden` from its own
ancestors and puts it back on close only where a panel still open hides
them; materialShowModal() does the same for `<x-modal>`, whose new
`x-trap.noautofocus.noreturn` pauses the sheet's focus trap while it is
open and moves no focus of its own. The searchable choice, the search
view and the supporting pane's sheet now preventDefault() the Escape
they act on, so the dialog or sheet around them stays.

Four browser tests stack the layers every way above and fail without
the change in Chrome.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 05:59:32 +02:00
co-authored by Claude Opus 5
parent 029c78d301
commit 94a376a4fd
15 changed files with 360 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ContainmentTest.php
+182
View File
@@ -565,6 +565,188 @@ it('gives a closing standard side sheet\'s room back to the content beside it as
->assertScript("{$root}.hasAttribute('data-md-open') && ! {$root}.hasAttribute('data-md-drawer-collapsed') && Math.abs({$root}.getBoundingClientRect().width - 400) < 1 && getComputedStyle({$sheet}).opacity === '1'");
});
/**
* Layers stacked every way a page stacks them: a modal sheet holding a menu, a select, a searchable
* choice and a sheet of its own, which opens a dialog and a second sheet rendered elsewhere on the
* page; the dialog holding a menu, a select, a searchable choice and a sheet.
*/
function layersProbe(): mixed
{
Route::middleware('web')->get('/layers-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body style="background-color: var(--md-sys-color-surface);">
<main>
<div x-data="{ open: false }">
<button type="button" id="open-sheet" x-on:click="open = true">Open the session</button>
<x-drawer id="sheet" title="Session">
<button type="button" id="open-dialog" x-on:click="$dispatch('open-probe-dialog')">Set back</button>
<button type="button" id="open-beside" x-on:click="$dispatch('open-probe-beside')">Swap</button>
<x-menu label="More">
<x-slot:trigger><button type="button" id="open-menu">More</button></x-slot:trigger>
<x-menu-item label="Copy" />
<x-menu-item label="Move" />
</x-menu>
<x-select id="sheet-select" label="Expires" :options="[['id' => '1', 'name' => '1 hour'], ['id' => '24', 'name' => '1 day']]" />
<x-choices id="sheet-choices" label="Sport" searchable :options="[['id' => 'run', 'name' => 'Run'], ['id' => 'ride', 'name' => 'Ride']]" />
<div x-data="{ open: false }">
<button type="button" id="open-inner" x-on:click="open = true">Notes</button>
<x-drawer id="inner-sheet" title="Notes"><input id="inner-field" aria-label="Note" /></x-drawer>
</div>
</x-drawer>
</div>
<div x-data="{ open: false }" x-on:open-probe-beside.window="open = true">
<x-drawer id="beside-sheet" title="Swap"><input id="beside-field" aria-label="Swap with" /></x-drawer>
</div>
</main>
<div x-data="{ open: false }" x-on:open-probe-dialog.window="open = true">
<x-modal id="dialog" title="Set back the plan">
<input id="dialog-first" aria-label="Weeks" />
<input id="dialog-second" aria-label="Reason" />
<x-menu label="Dialog menu">
<x-slot:trigger><button type="button" id="open-dialog-menu">Options</button></x-slot:trigger>
<x-menu-item label="Keep" />
</x-menu>
<x-select id="dialog-select" label="Expires" :options="[['id' => '1', 'name' => '1 hour'], ['id' => '24', 'name' => '1 day']]" />
<x-choices id="dialog-choices" label="Sport" searchable :options="[['id' => 'run', 'name' => 'Run'], ['id' => 'ride', 'name' => 'Ride']]" />
<div x-data="{ open: false }">
<button type="button" id="open-dialog-sheet" x-on:click="open = true">Details</button>
<x-drawer id="dialog-sheet" title="Details"><input id="dialog-sheet-field" aria-label="Detail" /></x-drawer>
</div>
</x-modal>
</div>
@livewireScripts
</body>
</html>
BLADE));
return visit('/layers-probe')->resize(1000, 800)->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'");
}
function sheetOpen(string $id): string
{
return "document.getElementById('{$id}').closest('[data-md-drawer]').hasAttribute('data-md-open')";
}
function hiddenFromAssistiveTech(string $id): string
{
return "(document.getElementById('{$id}').closest('[aria-hidden=\"true\"]') !== null)";
}
it('closes only a dialog opened over a modal sheet on Escape, readable and tabbable while it is open', function () {
$page = layersProbe();
$page->click('#open-sheet')->assertScript(sheetOpen('sheet'));
$page->click('#open-dialog')->assertScript("document.getElementById('dialog').open");
// Rendered outside the sheet, the dialog is not inside what the sheet hides, and the sheet's
// focus trap does not take the Tab back to the sheet.
$page->assertScript('! '.hiddenFromAssistiveTech('dialog'));
$page->click('#dialog-first');
$page->keys('#dialog-first', 'Tab')->assertScript("document.activeElement.id === 'dialog-second'");
$page->keys('#dialog-second', 'Escape')
->assertScript("! document.getElementById('dialog').open")
->assertScript(sheetOpen('sheet'))
// Back under the sheet, the dialog's part of the page is hidden again, and shown once the
// sheet closes too.
->assertScript(hiddenFromAssistiveTech('dialog'));
$page->script("document.getElementById('open-dialog').focus()");
$page->keys('#open-dialog', 'Escape')
->assertScript('! '.sheetOpen('sheet'))
->assertScript('! '.hiddenFromAssistiveTech('dialog'))
->assertNoJavaScriptErrors();
});
it('closes only the menu, select list or searchable choice open inside a modal sheet on Escape', function () {
$page = layersProbe();
$page->click('#open-sheet')->assertScript(sheetOpen('sheet'));
$page->click('#open-menu')->assertScript("document.querySelector('#sheet [data-md-menu-popover]').matches(':popover-open')");
$page->keys(':focus', 'Escape')
->assertScript("! document.querySelector('#sheet [data-md-menu-popover]').matches(':popover-open')")
->assertScript(sheetOpen('sheet'));
$page->click('#sheet-choices')->assertScript("document.querySelector('#sheet [data-md-field-menu]').matches(':popover-open')");
$page->keys('#sheet-choices', 'Escape')
->assertScript("! document.querySelector('#sheet [data-md-field-menu]').matches(':popover-open')")
->assertScript(sheetOpen('sheet'));
// A customizable select's list, where the browser has one: elsewhere there is no list of the
// page's own open over the sheet.
if ($page->script("CSS.supports('appearance', 'base-select')") === true) {
$page->click('#sheet-select')->assertScript("document.getElementById('sheet-select').matches(':open')");
$page->keys(':focus', 'Escape')
->assertScript("! document.getElementById('sheet-select').matches(':open')")
->assertScript(sheetOpen('sheet'));
}
$page->assertNoJavaScriptErrors();
});
it('closes only the sheet on top on Escape, inside the first or beside it, and keeps the one beside it readable', function () {
$page = layersProbe();
$page->click('#open-sheet')->assertScript(sheetOpen('sheet'));
$page->click('#open-inner')->assertScript(sheetOpen('inner-sheet'));
$page->click('#inner-field');
$page->keys('#inner-field', 'Escape')
->assertScript('! '.sheetOpen('inner-sheet'))
->assertScript(sheetOpen('sheet'));
$page->click('#open-beside')->assertScript(sheetOpen('beside-sheet'))
->assertScript('! '.hiddenFromAssistiveTech('beside-sheet'));
$page->click('#beside-field');
$page->keys('#beside-field', 'Escape')
->assertScript('! '.sheetOpen('beside-sheet'))
->assertScript(sheetOpen('sheet'))
->assertScript(hiddenFromAssistiveTech('beside-sheet'))
->assertNoJavaScriptErrors();
});
it('closes only the sheet, searchable choice, menu or select list open inside a dialog on Escape', function () {
$page = layersProbe();
$page->script("window.dispatchEvent(new CustomEvent('open-probe-dialog'))");
$page->assertScript("document.getElementById('dialog').open");
$page->click('#open-dialog-sheet')->assertScript(sheetOpen('dialog-sheet'));
$page->click('#dialog-sheet-field');
$page->keys('#dialog-sheet-field', 'Escape')
->assertScript('! '.sheetOpen('dialog-sheet'))
->assertScript("document.getElementById('dialog').open");
$page->click('#dialog-choices')->assertScript("document.querySelector('#dialog [data-md-field-menu]').matches(':popover-open')");
$page->keys('#dialog-choices', 'Escape')
->assertScript("! document.querySelector('#dialog [data-md-field-menu]').matches(':popover-open')")
->assertScript("document.getElementById('dialog').open");
$page->click('#open-dialog-menu')->assertScript("document.querySelector('#dialog [data-md-menu-popover]').matches(':popover-open')");
$page->keys(':focus', 'Escape')
->assertScript("! document.querySelector('#dialog [data-md-menu-popover]').matches(':popover-open')")
->assertScript("document.getElementById('dialog').open");
if ($page->script("CSS.supports('appearance', 'base-select')") === true) {
$page->click('#dialog-select')->assertScript("document.getElementById('dialog-select').matches(':open')");
$page->keys(':focus', 'Escape')
->assertScript("! document.getElementById('dialog-select').matches(':open')")
->assertScript("document.getElementById('dialog').open");
}
$page->assertNoJavaScriptErrors();
});
it('draws a standard side sheet that starts open standing open, without growing it in on load', function () {
// Slow tokens, so a load-time entry would still be running when the page is first read.
Route::middleware('web')->get('/standard-sheet-load-probe', fn () => Blade::render(<<<'BLADE'