From cdf55990075a23efe154b989b3af617642a953ea Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Wed, 26 Apr 2023 12:22:01 +0200
Subject: [PATCH] fixed a11y inner focus for modal
---
assets/js/theme/design-system/modal.js | 16 +++++++++-------
1 file changed, 9 insertions(+), 7 deletions(-)
diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js
index 054006bb..335853d3 100644
--- a/assets/js/theme/design-system/modal.js
+++ b/assets/js/theme/design-system/modal.js
@@ -29,15 +29,16 @@ class Modal {
this.closeButtons.forEach(button => {
button.addEventListener('click', () => {
this.toggle(false);
+ this.button.focus()
});
});
window.addEventListener('keydown', (event) => {
if (event.keyCode === 27 || event.key === 'Escape') {
this.toggle(false);
- } else if (event.key === "Tab") {
- // TODO fix a11y inner focus
- // this.innerFocus(event);
+ } else if (this.state.isOpened && event.key === "Tab") {
+ this.innerFocus(event);
+ event.preventDefault();
}
});
@@ -67,7 +68,8 @@ class Modal {
firstFocusable.focus();
}
- this.closeButtons[0].focus();
+ // this.closeButtons[0].focus();
+ firstFocusable.focus();
}
toggle(open = !this.state.isOpened) {
@@ -77,9 +79,9 @@ class Modal {
this.element.setAttribute('aria-hidden', !this.state.isOpened);
document.documentElement.classList[classAction](CLASSES.modalOpened);
- if (!this.state.isOpened) {
- this.button.focus();
- }
+ // if (!this.state.isOpened) {
+ // this.button.focus();
+ // }
}
}
--
GitLab