Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f5783ca

Browse files
stevematneydiasbruno
authored andcommitted
[fixed] ensuring usage of Web Components functions in all browsers (Safari, specifically)
1 parent b049feb commit f5783ca

File tree

2 files changed

+26
-6
lines changed

2 files changed

+26
-6
lines changed

‎src/helpers/scopeTab.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import findTabbable from "./tabbable";
22

3+
function getActiveElement(el = document) {
4+
return el.activeElement.shadowRoot
5+
? getActiveElement(el.activeElement.shadowRoot)
6+
: el.activeElement;
7+
}
8+
39
export default function scopeTab(node, event) {
410
const tabbable = findTabbable(node);
511

@@ -14,19 +20,20 @@ export default function scopeTab(node, event) {
1420
const shiftKey = event.shiftKey;
1521
const head = tabbable[0];
1622
const tail = tabbable[tabbable.length - 1];
23+
const activeElement = getActiveElement();
1724

1825
// proceed with default browser behavior on tab.
1926
// Focus on last element on shift + tab.
20-
if (node === document.activeElement) {
27+
if (node === activeElement) {
2128
if (!shiftKey) return;
2229
target = tail;
2330
}
2431

25-
if (tail === document.activeElement && !shiftKey) {
32+
if (tail === activeElement && !shiftKey) {
2633
target = head;
2734
}
2835

29-
if (head === document.activeElement && shiftKey) {
36+
if (head === activeElement && shiftKey) {
3037
target = tail;
3138
}
3239

@@ -57,7 +64,7 @@ export default function scopeTab(node, event) {
5764
// the focus
5865
if (!isSafariDesktop) return;
5966

60-
var x = tabbable.indexOf(document.activeElement);
67+
var x = tabbable.indexOf(activeElement);
6168

6269
if (x > -1) {
6370
x += shiftKey ? -1 : 1;

‎src/helpers/tabbable.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,11 @@ function visible(element) {
3838
let rootNode = element.getRootNode && element.getRootNode();
3939
while (parentElement) {
4040
if (parentElement === document.body) break;
41-
if (rootNode && parentElement === rootNode) parentElement = rootNode.host;
41+
42+
// if we are not hidden yet, skip to checking outside the Web Component
43+
if (rootNode && parentElement === rootNode)
44+
parentElement = rootNode.host.parentNode;
45+
4246
if (hidesContents(parentElement)) return false;
4347
parentElement = parentElement.parentNode;
4448
}
@@ -61,5 +65,14 @@ function tabbable(element) {
6165
}
6266

6367
export default function findTabbableDescendants(element) {
64-
return [].slice.call(element.querySelectorAll("*"), 0).filter(tabbable);
68+
const descendants = [].slice
69+
.call(element.querySelectorAll("*"), 0)
70+
.reduce(
71+
(finished, el) => [
72+
...finished,
73+
...(!el.shadowRoot ? [el] : findTabbableDescendants(el.shadowRoot))
74+
],
75+
[]
76+
);
77+
return descendants.filter(tabbable);
6578
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /