mirror of https://github.com/Siphonay/mastodon
Trap tab in modals (#11493)
This commit is contained in:
parent
792d0dd470
commit
5c73746b69
|
@ -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…
Reference in New Issue