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>
93 lines
4.6 KiB
PHP
93 lines
4.6 KiB
PHP
{{-- M3's supporting-pane canonical layout: a focus pane, and beside it what only means something
|
|
in relation to it — the comments on a document, the details of a video.
|
|
|
|
<x-supporting-pane label="Comments" compact="sheet">
|
|
<x-slot:main><x-pane title="Proposal">…</x-pane></x-slot:main>
|
|
<x-slot:supporting><x-pane title="Comments" heading="h2">…</x-pane></x-slot:supporting>
|
|
</x-supporting-pane>
|
|
|
|
M3's placement table, row by row (docs/reference/m3/foundations-supplement.md § Canonical
|
|
layouts → Supporting pane): below the focus pane at a flexible width on a compact or medium
|
|
window (below 840px), and at the side of the focus pane, a fixed 360dp, from expanded (840px).
|
|
If the relationship is parent and child — a list and what it selected — use `<x-list-detail>`.
|
|
|
|
`width`, from 840px: `fixed` (the default) is 360px, and 412px from 1200px, M3's fixed pane at
|
|
large and extra-large (§ Breakpoints); `split` gives the focus pane two-thirds and the
|
|
supporting pane the other third, the overview's split. Always on the trailing side, 24px from
|
|
the focus pane, which keeps the focus order the order on screen at every width, as M3 asks of
|
|
panes side by side (docs/reference/m3/foundations.md § Layout → Scaffold, Panes); a
|
|
right-to-left document mirrors it.
|
|
|
|
`compact`, below 840px: `below` (the default) stacks the supporting pane under the focus pane;
|
|
`sheet` docks it to the bottom of the window as a bottom sheet — M3's compact advice, "a
|
|
bottom sheet is a good way to keep focus on the primary pane while still giving access to
|
|
supporting info". The sheet shows its drag handle and `label` until the handle, a button
|
|
(`aria-expanded`), opens it; open, its content scrolls within half the window, and Escape
|
|
inside it closes it and returns focus to the handle. It clears a navigation bar and the
|
|
bottom safe area. From 840px the sheet is the side pane again, open.
|
|
|
|
`main` (or the default slot) is the focus pane, `supporting` the supporting one; `label`
|
|
names the supporting pane, an `<aside>`, and the sheet's handle. The
|
|
layout keeps M3's margin (16px below medium, 24px from it) unless it sits inside something
|
|
that already does, such as `<x-scaffold>`'s content region. It takes `as`, `hide-below` and
|
|
`hide-from` like every layout component, and the caller's `class` and `style` land on it
|
|
untouched. Drawn by resources/css/layout/supporting-pane.css. --}}
|
|
|
|
@props([
|
|
'as' => null,
|
|
'label' => null,
|
|
'width' => null,
|
|
'compact' => null,
|
|
'hideBelow' => null,
|
|
'hideFrom' => null,
|
|
])
|
|
|
|
@php
|
|
$layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
|
|
$element = $layout::element($as);
|
|
$compact = $layout::choice($compact, ['below', 'sheet'], 'below');
|
|
$sheet = $compact === 'sheet';
|
|
$body = 'material-supporting-pane-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
|
|
$attributes = $attributes->merge(array_filter([
|
|
'data-md-supporting-pane' => true,
|
|
'data-md-width' => $layout::choice($width, ['fixed', 'split'], 'fixed'),
|
|
'data-md-compact' => $compact,
|
|
] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $element }} {{ $attributes }}>
|
|
<div data-md-supporting-pane-main>{{ $main ?? $slot }}</div>
|
|
|
|
<aside
|
|
data-md-supporting-pane-supporting
|
|
@if (filled($label)) aria-label="{{ $label }}" @endif
|
|
@if ($sheet)
|
|
x-data="{ sheetOpen: false }"
|
|
x-bind:data-md-open="sheetOpen ? '' : null"
|
|
x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { $event.preventDefault(); sheetOpen = false; $refs.handle.focus() }"
|
|
@endif
|
|
>
|
|
@if ($sheet)
|
|
<button
|
|
type="button"
|
|
class="md-state-layer md-focus-ring"
|
|
data-md-supporting-pane-handle
|
|
aria-expanded="false"
|
|
aria-controls="{{ $body }}"
|
|
x-ref="handle"
|
|
x-bind:aria-expanded="sheetOpen.toString()"
|
|
x-on:click="sheetOpen = ! sheetOpen"
|
|
@if (blank($label)) aria-label="{{ __('Show more') }}" @endif
|
|
>
|
|
<span data-md-supporting-pane-grip aria-hidden="true"></span>
|
|
@if (filled($label))
|
|
<span class="md-type-title-sm" data-md-supporting-pane-label>{{ $label }}</span>
|
|
@endif
|
|
</button>
|
|
@endif
|
|
|
|
<div data-md-supporting-pane-body id="{{ $body }}">{{ $supporting ?? '' }}</div>
|
|
</aside>
|
|
</{{ $element }}>
|