From 21e3671e32c2a88f1b19cb42209c88b45ea07607 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 6 Aug 2019 11:59:28 +0200
Subject: [PATCH] Trap tab in modals (#11493)
---
.../mastodon/components/modal_root.js | 23 +++++++++++++++++++
1 file changed, 23 insertions(+)
diff --git a/app/javascript/mastodon/components/modal_root.js b/app/javascript/mastodon/components/modal_root.js
index ef1156571f..5d4f4bbe13 100644
--- a/app/javascript/mastodon/components/modal_root.js
+++ b/app/javascript/mastodon/components/modal_root.js
@@ -21,8 +21,30 @@ export default class ModalRoot extends React.PureComponent {
}
}
+ handleKeyDown = (e) => {
+ if (e.key === 'Tab') {
+ const focusable = Array.from(this.node.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((x) => window.getComputedStyle(x).display !== 'none');
+ const index = focusable.indexOf(e.target);
+
+ let element;
+
+ if (e.shiftKey) {
+ element = focusable[index - 1] || focusable[focusable.length - 1];
+ } else {
+ element = focusable[index + 1] || focusable[0];
+ }
+
+ if (element) {
+ element.focus();
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
+ }
+
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
+ window.addEventListener('keydown', this.handleKeyDown, false);
}
componentWillReceiveProps (nextProps) {
@@ -52,6 +74,7 @@ export default class ModalRoot extends React.PureComponent {
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp);
+ window.removeEventListener('keydown', this.handleKeyDown);
}
getSiblings = () => {
--
GitLab