feat: make modal accessible

Author: ell-ska

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,