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

change selector criteria for tabbable elements based on react component logic

Browse source
This commit is contained in:
dqzx 2021-07-02 20:32:58 +01:00
commit c9b2f5402c
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/Modal/Modal.svelte
View file

@ -144,8 +144,16 @@
open = false;
} else if (e.key === 'Tab') {
// trap focus
const nodes = ref.querySelectorAll('*');
const tabbable = Array.from(nodes).filter((n) => n.tabIndex >= 0);
// 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;