mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-28 07:57:45 +00:00
[Glitch] Trap tab in modals
Port 5c73746b69
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
parent
cad2e6eb7a
commit
6afdb6c2b6
|
@ -26,8 +26,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);
|
||||
this.history = this.context.router ? this.context.router.history : createHistory();
|
||||
}
|
||||
|
||||
|
@ -60,6 +82,7 @@ export default class ModalRoot extends React.PureComponent {
|
|||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('keyup', this.handleKeyUp);
|
||||
window.removeEventListener('keydown', this.handleKeyDown);
|
||||
}
|
||||
|
||||
handleModalClose () {
|
||||
|
|
Loading…
Reference in a new issue