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

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>

resources/views/components/bottom-sheet.blade.php

@@ -98,7 +98,6 @@
         ...materialBottomSheet({{ $standard ? 'true' : 'false' }}, {{ $presets }}),
         @if ($model !== null) open: @entangle($attributes->wire('model')).live, @endif
     }"
-    x-on:keydown.window.escape="if (open && ! standard) close()"
     x-bind:data-md-open="open ? '' : null"
     data-md-bottom-sheet
     @if ($standard) data-md-standard @endif
@@ -121,7 +120,7 @@
         x-transition:enter="md-transition"
         x-transition:leave="md-transition"
         x-ref="sheet"
-        @unless ($standard) x-trap.inert.noscroll="open" @endunless
+        @unless ($standard) x-trap.inert.noscroll="open" x-layer="open" x-on:material-escape="close()" @endunless
         x-bind:style="sheetStyle"
         x-on:pointerdown="dragStart($event)"
         id="{{ $id }}"

resources/views/components/choices.blade.php

@@ -159,7 +159,7 @@
                     x-on:keydown.home="jump($event, false)"
                     x-on:keydown.end="jump($event, true)"
                     x-on:keydown.enter.prevent="choose(filtered[active])"
-                    x-on:keydown.escape="close()"
+                    x-on:keydown.escape="if (open) $event.preventDefault(); close()"
                     x-on:keydown.tab="close()"
                     x-on:blur="close()"
                 />

resources/views/components/drawer.blade.php

@@ -6,7 +6,10 @@
      Without `wire:model` it reads and writes `open` in the Alpine scope around it. `close()` is in
      scope for anything inside the sheet, so it can draw its own close button.
 
-     As a sheet it is modal: the page inert and still (`x-trap.inert.noscroll`), and it enters on
+     As a sheet it is modal: the page inert and still (`x-trap.inert.noscroll`), and Escape closes
+     only the topmost layer — a dialog, menu or list open above or inside the sheet takes its own,
+     and a sheet or dialog opened from this one stays readable to a screen reader
+     (`x-layer`, resources/js/layers.js). It enters on
      emphasized decelerate rather than a spring — a sheet anchored to the edge that overshot would
      open a gap. M3's modal side sheet (docs/reference/m3/components-actions-communication-
      containment.md § Side sheets; Compose has no side-sheet token file): surface-container-low, a
@@ -149,7 +152,6 @@
             },
         @endif
     }"
-    @if ($closeOnEscape) x-on:keydown.window.escape="if (open && ! wide) close()" @endif
     x-bind:data-md-open="open ? '' : null"
     x-bind:data-md-drawer-collapsed="collapsed ? '' : null"
     x-bind:data-md-drawer-settled="settled ? '' : null"
@@ -171,6 +173,8 @@
         x-transition:enter="md-transition"
         x-transition:leave="md-transition"
         x-trap.inert.noscroll="open && ! wide"
+        x-layer="open && ! wide"
+        @if ($closeOnEscape) x-on:material-escape="close()" @endif
         x-bind:role="wide ? 'region' : 'dialog'"
         x-bind:aria-modal="wide ? null : 'true'"
         role="dialog"

resources/views/components/modal.blade.php

@@ -1,7 +1,9 @@
 {{-- An M3 dialog, on the native `<dialog>` opened with `showModal()`.
 
      Native because it gets the hard parts right on its own: the top layer above everything, the
-     rest of the page inert, focus moved in and handed back, Escape. The open state is the Livewire
+     rest of the page inert, focus moved in and handed back, Escape. Its `x-trap` moves no focus of
+     its own; it is there to pause the focus trap of a sheet the dialog opened over, which would
+     otherwise take every Tab back to the inert sheet (resources/js/layers.js). The open state is the Livewire
      property in `wire:model` (entangled live) — a flag (`$confirmingDelete`) or an id
      (`$deletingShareId`) — and closing writes back whichever "closed" means for it, `false` or
      `null`. Without `wire:model` it reads and writes `open` in the Alpine scope around it:
@@ -97,6 +99,7 @@
         x-data="{ close() { this.open = false } }"
     @endif
     x-effect="open ? ($el.open || materialShowModal($el)) : ($el.open && $el.close())"
+    x-trap.noautofocus.noreturn="open"
     x-on:cancel.prevent="{{ $persistent ? '' : 'close()' }}"
     x-on:close="if (open) close()"
     @if (! $persistent) x-on:click.self="close()" @endif

resources/views/components/navigation-rail.blade.php

@@ -145,7 +145,8 @@
         aria-label="{{ $label ?? __('Main') }}"
         @if ($canOpen)
             x-trap.inert.noscroll="open"
-            x-on:keydown.escape.window="open && $store.rail.hide()"
+            x-layer="open"
+            x-on:material-escape="$store.rail.hide()"
         @endif
     >
         @if ($menu || isset($brand) || isset($header))

resources/views/components/search.blade.php

@@ -57,7 +57,7 @@
 
 <div
     x-data="materialSearch({{ $docked ? 'true' : 'false' }}, @js($announce), @js($trigger))"
-    x-on:keydown.escape="if (open) { $event.stopPropagation(); close(true); }"
+    x-on:keydown.escape="if (open) { $event.preventDefault(); $event.stopPropagation(); close(true); }"
     x-on:focusout="leave($event)"
     x-on:pointerdown.outside="close()"
     x-trap.noscroll="open && fullScreen"

resources/views/components/supporting-pane.blade.php

@@ -65,7 +65,7 @@
         @if ($sheet)
             x-data="{ sheetOpen: false }"
             x-bind:data-md-open="sheetOpen ? '' : null"
-            x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { sheetOpen = false; $refs.handle.focus() }"
+            x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { $event.preventDefault(); sheetOpen = false; $refs.handle.focus() }"
         @endif
     >
         @if ($sheet)