diff --git a/assets/js/theme/design-system/modal.js b/assets/js/theme/design-system/modal.js index 2bde96c220ebe6d944bbf5d416ba68ff16485793..a73a8a560b755c718ae7f72c39d43721a9a2e653 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 36bfc05f694f8a40c30986f8319dee74427c2ce0..1fab3885b1f56a1e1afccc22d26965e008e1c4e9 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