feat: make modal accessible

ell-ska · ell-ska · commit 9967f4f9795f · 2025-02-04T15:37:25.000+01:00
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -7,9 +7,7 @@
         <title>{{ isset($title) ? "$title | Popco" : 'Popco' }}</title>
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
-    <body
-        class="flex min-h-screen flex-col items-center has-[.modal]:overflow-hidden"
-    >
+    <body class="flex min-h-screen flex-col items-center">
         <main class="w-full max-w-5xl px-4">
             {{ $slot }}
         </main>
diff --git a/resources/views/components/modal/base.blade.php b/resources/views/components/modal/base.blade.php
@@ -6,8 +6,39 @@
 <div
     x-data="{
         show: @js($show),
+        focusables() {
+            const selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            return [...$el.querySelectorAll(selector)].filter(element => !element.hasAttribute('disabled'))
+        },
+        firstFocusable() {
+            return this.focusables()[0]
+        },
+        lastFocusable() {
+            return this.focusables().slice(-1)[0]
+        },
+        nextFocusable() {
+            const focusables = this.focusables()
+            const nextFocusableIndex = (focusables.indexOf(document.activeElement) + 1) % (focusables.length + 1)
+
+            return focusables[nextFocusableIndex] || this.firstFocusable()
+        },
+        prevFocusable() {
+            const focusables = this.focusables()
+            const prevFocusableIndex = Math.max(0, focusables.indexOf(document.activeElement)) -1
+
+            return focusables[prevFocusableIndex] || this.lastFocusable()
+        },
     }"
     x-show="show"
+    x-init="
+        $watch('show', (show) => {
+            if (show) {
+                document.body.classList.add('overflow-hidden')
+            } else {
+                document.body.classList.remove('overflow-hidden')
+            }
+        })
+    "
     x-on:open-modal.window="
         if ($event.detail === '{{ $name }}') {
             show = true
@@ -18,15 +49,9 @@
             show = false
         }
     "
-    x-init="
-        $watch('show', (show) => {
-            if (show) {
-                document.body.classList.add('overflow-hidden')
-            } else {
-                document.body.classList.remove('overflow-hidden')
-            }
-        })
-    "
+    x-on:keydown.escape.window="show = false"
+    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     x-cloak
     @class([
         'flex' => $show,
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -77,6 +77,8 @@ class="w-40"
             <p>fake menu item</p>
             <p>fake menu item</p>
 
+            <x-button>test button</x-button>
+            <x-button>another test button</x-button>
             <x-button x-data @click="$dispatch('close-modal', 'test-modal')">
                 cancel
             </x-button>
