From 9815001aba6c790714c66db617ebcb0932a08230 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Fri, 17 Mar 2023 10:38:53 +0100
Subject: [PATCH] a11y modal
---
assets/js/theme/design-system/modal.js | 6 +++++-
assets/sass/_theme/design-system/layout.sass | 1 +
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js
index 2bde96c2..a73a8a56 100644
--- a/assets/js/theme/design-system/modal.js
+++ b/assets/js/theme/design-system/modal.js
@@ -36,7 +36,8 @@ class Modal {
if (event.keyCode === 27 || event.key === 'Escape') {
this.toggle(false);
} else if (event.key === "Tab") {
- this.innerFocus(event);
+ // TODO fix a11y inner focus
+ // this.innerFocus(event);
}
});
@@ -55,6 +56,7 @@ class Modal {
const firstFocusable = focusableInDialog[0];
const lastFocusable = focusableInDialog.at(-1);
+ console.log(firstFocusable, lastFocusable)
if (!this.state.isOpened) {
return;
}
@@ -65,6 +67,8 @@ class Modal {
else if (!this.element.contains(event.target)) {
firstFocusable.focus();
}
+
+ this.closeButtons[0].focus();
}
toggle(open = !this.state.isOpened) {
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 36bfc05f..1fab3885 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -127,5 +127,6 @@ details
@include button-reset
@include icon-block(close, before)
position: absolute
+ padding: 0
right: 0
top: 0
\ No newline at end of file
--
GitLab