Andreas Reinhold / reiniandClaude Opus 5
94a376a4fd
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>
73 lines
4.4 KiB
PHP
73 lines
4.4 KiB
PHP
<?php
|
|
|
|
it('draws the focus pane first and the supporting pane after it, fixed and below by default', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-supporting-pane>
|
|
<x-slot:main><article>MAIN</article></x-slot:main>
|
|
<x-slot:supporting><ul>SUPPORTING</ul></x-slot:supporting>
|
|
</x-supporting-pane>
|
|
BLADE);
|
|
|
|
expect(layoutRoot($html))->toMatchArray([
|
|
'<' => 'div',
|
|
'data-md-supporting-pane' => 'data-md-supporting-pane',
|
|
'data-md-width' => 'fixed',
|
|
'data-md-compact' => 'below',
|
|
])
|
|
->and($html)->toMatch('/<div data-md-supporting-pane-main><article>MAIN<\/article><\/div>\s*<aside\s+data-md-supporting-pane-supporting\s*>\s*<div data-md-supporting-pane-body id="[^"]+"><ul>SUPPORTING<\/ul><\/div>\s*<\/aside>/s')
|
|
->not->toContain('data-md-supporting-pane-handle')
|
|
->not->toContain('x-data');
|
|
});
|
|
|
|
it('takes the default slot as the focus pane', function () {
|
|
expect((string) $this->blade('<x-supporting-pane>MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>'))
|
|
->toMatch('/<div data-md-supporting-pane-main>\s*MAIN\s*<\/div>/');
|
|
});
|
|
|
|
it('splits the window two-thirds to one-third, or keeps the fixed pane for anything else', function () {
|
|
expect(layoutRoot((string) $this->blade('<x-supporting-pane width="split" />'))['data-md-width'])->toBe('split')
|
|
->and(layoutRoot((string) $this->blade('<x-supporting-pane width="half" />'))['data-md-width'])->toBe('fixed');
|
|
});
|
|
|
|
it('names the supporting pane with its label', function () {
|
|
expect((string) $this->blade('<x-supporting-pane label="Comments" />'))->toMatch('/<aside\s+data-md-supporting-pane-supporting\s+aria-label="Comments"/');
|
|
});
|
|
|
|
it('docks the supporting pane as a bottom sheet below expanded, opened by its handle', function () {
|
|
$html = (string) $this->blade('<x-supporting-pane compact="sheet" label="Comments">MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>');
|
|
|
|
preg_match('/aria-controls="([^"]+)"/', $html, $controls);
|
|
|
|
expect(layoutRoot($html)['data-md-compact'])->toBe('sheet')
|
|
->and($html)->toContain('x-data="{ sheetOpen: false }"')
|
|
->toContain("x-bind:data-md-open=\"sheetOpen ? '' : null\"")
|
|
->toContain('x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { $event.preventDefault(); sheetOpen = false; $refs.handle.focus() }"')
|
|
->toMatch('/<button\s+type="button"\s+class="md-state-layer md-focus-ring"\s+data-md-supporting-pane-handle\s+aria-expanded="false"/')
|
|
->toContain('x-bind:aria-expanded="sheetOpen.toString()"')
|
|
->toMatch('/<span data-md-supporting-pane-grip aria-hidden="true"><\/span>\s*<span class="md-type-title-sm" data-md-supporting-pane-label>Comments<\/span>/')
|
|
->toContain('<div data-md-supporting-pane-body id="'.$controls[1].'">SIDE</div>')
|
|
->and((string) $this->blade('<x-supporting-pane compact="sheet" />'))->toMatch('/data-md-supporting-pane-handle[^>]*aria-label="Show more"/s')
|
|
->and(layoutRoot((string) $this->blade('<x-supporting-pane compact="drawer" />'))['data-md-compact'])->toBe('below');
|
|
});
|
|
|
|
it('takes the element, the visibility props and the caller\'s class and style', function () {
|
|
expect(layoutRoot((string) $this->blade('<x-supporting-pane as="main" hide-from="extra-large" class="editor" style="min-height: 20rem" />')))
|
|
->toMatchArray([
|
|
'<' => 'main',
|
|
'data-md-hide-from' => 'extra-large',
|
|
'class' => 'editor',
|
|
'style' => 'min-height: 20rem;',
|
|
]);
|
|
});
|
|
|
|
it('places the supporting pane at M3\'s widths from expanded, in the layout layer', function () {
|
|
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/supporting-pane.css');
|
|
|
|
expect($css)->toContain('@layer material.layout')
|
|
->toContain("@media (width >= 840px) {\n grid-template-columns: minmax(0, 1fr) 360px;")
|
|
->toContain("@media (width >= 1200px) {\n grid-template-columns: minmax(0, 1fr) 412px;")
|
|
->toContain("[data-md-supporting-pane][data-md-width='split'] {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);")
|
|
->toContain('inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));')
|
|
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/supporting-pane.css';");
|
|
});
|