mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02: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 () {
|
componentDidMount () {
|
||||||
window.addEventListener('keyup', this.handleKeyUp, false);
|
window.addEventListener('keyup', this.handleKeyUp, false);
|
||||||
|
window.addEventListener('keydown', this.handleKeyDown, false);
|
||||||
this.history = this.context.router ? this.context.router.history : createHistory();
|
this.history = this.context.router ? this.context.router.history : createHistory();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,6 +82,7 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
window.removeEventListener('keyup', this.handleKeyUp);
|
window.removeEventListener('keyup', this.handleKeyUp);
|
||||||
|
window.removeEventListener('keydown', this.handleKeyDown);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleModalClose () {
|
handleModalClose () {
|
||||||
|
Loading…
Reference in New Issue
Block a user