mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix: trap tab focus within ComposedModal

Browse source
This commit is contained in:
dqzx 2021-07-02 20:31:49 +01:00
commit 48a5d16335
1 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/ComposedModal/ComposedModal.svelte
View file

@ -103,6 +103,33 @@
class:is-visible="{open}"
class:bx--modal--danger="{danger}"
{...$$restProps}
on:keydown
on:keydown="{(e) => {
if (open) {
if (e.key === 'Escape') {
open = false;
} else if (e.key === 'Tab') {
// taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
const selectorTabbable = `
a[href], area[href], input:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
`;
const tabbable = Array.from(ref.querySelectorAll(selectorTabbable));
let index = tabbable.indexOf(document.activeElement);
if (index === -1 && e.shiftKey) index = 0;
index += tabbable.length + (e.shiftKey ? -1 : 1);
index %= tabbable.length;
tabbable[index].focus();
e.preventDefault();
}
}
}}"
on:click
on:click="{() => {
if (!didClickInnerModal && !preventCloseOnClickOutside) open = false;