Browse Source

Trap tab in modals (#11493)

tags/v2.9.3
ThibG 2 months ago
parent
commit
21e3671e32
1 changed files with 23 additions and 0 deletions
  1. 23
    0
      app/javascript/mastodon/components/modal_root.js

+ 23
- 0
app/javascript/mastodon/components/modal_root.js View File

@@ -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 = () => {

Loading…
Cancel
Save