fix(frontend/modal): trap focus (#576)

adfinis · Jan 14, 2025 · 5faa9b1 · 5faa9b1
1 parent 3b3629a
commit 5faa9b1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git a/frontend/app/components/modal.hbs b/frontend/app/components/modal.hbs
@@ -1,6 +1,10 @@
 {{#if @visible}}
   {{#in-element this.target insertBefore=null}}
-    <Modal::Overlay @visible={{@visible}} @onClose={{optional @onClose}}>
+    <Modal::Overlay
+      @visible={{@visible}}
+      @onClose={{optional @onClose}}
+      {{focus-trap}}
+    >
       <div
         class="modal-dialog bg-background z-50 max-h-[100%] w-full rounded border"
         ...attributes

diff --git a/frontend/app/components/modal/overlay.hbs b/frontend/app/components/modal/overlay.hbs
@@ -5,6 +5,7 @@
   id={{this.id}}
   {{! template-lint-disable no-invalid-interactive }}
   {{on "click" this.handleClick}}
+  ...attributes
 >
   {{yield}}
 </div>
diff --git a/frontend/package.json b/frontend/package.json
@@ -74,6 +74,7 @@
     "ember-decorators": "6.1.1",
     "ember-event-helpers": "^0.1.1",
     "ember-fetch": "8.1.2",
+    "ember-focus-trap": "^1.1.1",
     "ember-in-viewport": "4.1.0",
     "ember-keyboard": "^9.0.1",
     "ember-load-initializers": "2.1.2",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml