Skip to content

Commit 9967f4f

Browse files
committed
feat: make modal accessible
1 parent 718c10c commit 9967f4f

File tree

3 files changed

+37
-12
lines changed

3 files changed

+37
-12
lines changed

resources/views/components/layout.blade.php

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77
<title>{{ isset($title) ? "$title | Popco" : 'Popco' }}</title>
88
@vite(['resources/css/app.css', 'resources/js/app.js'])
99
</head>
10-
<body
11-
class="flex min-h-screen flex-col items-center has-[.modal]:overflow-hidden"
12-
>
10+
<body class="flex min-h-screen flex-col items-center">
1311
<main class="w-full max-w-5xl px-4">
1412
{{ $slot }}
1513
</main>

resources/views/components/modal/base.blade.php

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,39 @@
66
<div
77
x-data="{
88
show: @js($show),
9+
focusables() {
10+
const selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
11+
return [...$el.querySelectorAll(selector)].filter(element => !element.hasAttribute('disabled'))
12+
},
13+
firstFocusable() {
14+
return this.focusables()[0]
15+
},
16+
lastFocusable() {
17+
return this.focusables().slice(-1)[0]
18+
},
19+
nextFocusable() {
20+
const focusables = this.focusables()
21+
const nextFocusableIndex = (focusables.indexOf(document.activeElement) + 1) % (focusables.length + 1)
22+
23+
return focusables[nextFocusableIndex] || this.firstFocusable()
24+
},
25+
prevFocusable() {
26+
const focusables = this.focusables()
27+
const prevFocusableIndex = Math.max(0, focusables.indexOf(document.activeElement)) -1
28+
29+
return focusables[prevFocusableIndex] || this.lastFocusable()
30+
},
931
}"
1032
x-show="show"
33+
x-init="
34+
$watch('show', (show) => {
35+
if (show) {
36+
document.body.classList.add('overflow-hidden')
37+
} else {
38+
document.body.classList.remove('overflow-hidden')
39+
}
40+
})
41+
"
1142
x-on:open-modal.window="
1243
if ($event.detail === '{{ $name }}') {
1344
show = true
@@ -18,15 +49,9 @@
1849
show = false
1950
}
2051
"
21-
x-init="
22-
$watch('show', (show) => {
23-
if (show) {
24-
document.body.classList.add('overflow-hidden')
25-
} else {
26-
document.body.classList.remove('overflow-hidden')
27-
}
28-
})
29-
"
52+
x-on:keydown.escape.window="show = false"
53+
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
54+
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
3055
x-cloak
3156
@class([
3257
'flex' => $show,

resources/views/home.blade.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ class="w-40"
7777
<p>fake menu item</p>
7878
<p>fake menu item</p>
7979

80+
<x-button>test button</x-button>
81+
<x-button>another test button</x-button>
8082
<x-button x-data @click="$dispatch('close-modal', 'test-modal')">
8183
cancel
8284
</x-button>

0 commit comments

Comments
 (0)