@reykjavik/hanna-react 0.10.129 → 0.10.131
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/FocusTrap.js +22 -4
- package/esm/FocusTrap.js +22 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
- ... <!-- Add new lines here. -->
|
|
6
6
|
|
|
7
|
+
## 0.10.131
|
|
8
|
+
|
|
9
|
+
_2024-07-23_
|
|
10
|
+
|
|
11
|
+
- fix: Typo selector used by `FocusTrap` to find a fallback target
|
|
12
|
+
|
|
13
|
+
## 0.10.130
|
|
14
|
+
|
|
15
|
+
_2024-07-23_
|
|
16
|
+
|
|
17
|
+
- `FocusTrap`:
|
|
18
|
+
- fix: Account for hidden and disabled elements not being focusable
|
|
19
|
+
|
|
7
20
|
## 0.10.129
|
|
8
21
|
|
|
9
22
|
_2024-07-16_
|
package/FocusTrap.js
CHANGED
|
@@ -12,7 +12,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
|
|
|
12
12
|
const FocusTrap = (props) => {
|
|
13
13
|
const Tag = props.Tag || 'span';
|
|
14
14
|
return (react_1.default.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
|
|
15
|
-
|
|
15
|
+
e.preventDefault();
|
|
16
16
|
let container = e.currentTarget;
|
|
17
17
|
let depth = Math.max(props.depth || 1, 1);
|
|
18
18
|
while (depth-- && container) {
|
|
@@ -21,9 +21,27 @@ const FocusTrap = (props) => {
|
|
|
21
21
|
if (!container) {
|
|
22
22
|
return;
|
|
23
23
|
}
|
|
24
|
-
const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
|
|
25
|
-
const
|
|
26
|
-
|
|
24
|
+
const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
|
|
25
|
+
const delta = props.atTop ? -1 : 1;
|
|
26
|
+
let i = delta < 0 ? focusables.length - 1 : 0;
|
|
27
|
+
let newTarget;
|
|
28
|
+
while ((newTarget = focusables[i])) {
|
|
29
|
+
newTarget.focus();
|
|
30
|
+
// See if the focus actually moved to newTarget
|
|
31
|
+
if (document.activeElement === newTarget) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
i += delta;
|
|
35
|
+
}
|
|
36
|
+
// desperationLevel++; // We've failed to find a focusable element.
|
|
37
|
+
// Let's see if we can find a non-interactive focusable to fall back on
|
|
38
|
+
const fallbackFocusElm = container.matches('[tabindex]')
|
|
39
|
+
? container
|
|
40
|
+
: container.querySelector('[tabindex="-1"]') || container.closest('[tabindex]');
|
|
41
|
+
if (fallbackFocusElm) {
|
|
42
|
+
fallbackFocusElm.focus();
|
|
43
|
+
}
|
|
44
|
+
// desperationLevel++; // Whatever, we tried. ¯\_(ツ)_/¯
|
|
27
45
|
} }));
|
|
28
46
|
};
|
|
29
47
|
exports.FocusTrap = FocusTrap;
|
package/esm/FocusTrap.js
CHANGED
|
@@ -8,7 +8,7 @@ import React from 'react';
|
|
|
8
8
|
export const FocusTrap = (props) => {
|
|
9
9
|
const Tag = props.Tag || 'span';
|
|
10
10
|
return (React.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
|
|
11
|
-
|
|
11
|
+
e.preventDefault();
|
|
12
12
|
let container = e.currentTarget;
|
|
13
13
|
let depth = Math.max(props.depth || 1, 1);
|
|
14
14
|
while (depth-- && container) {
|
|
@@ -17,8 +17,26 @@ export const FocusTrap = (props) => {
|
|
|
17
17
|
if (!container) {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
|
-
const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
|
|
21
|
-
const
|
|
22
|
-
|
|
20
|
+
const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
|
|
21
|
+
const delta = props.atTop ? -1 : 1;
|
|
22
|
+
let i = delta < 0 ? focusables.length - 1 : 0;
|
|
23
|
+
let newTarget;
|
|
24
|
+
while ((newTarget = focusables[i])) {
|
|
25
|
+
newTarget.focus();
|
|
26
|
+
// See if the focus actually moved to newTarget
|
|
27
|
+
if (document.activeElement === newTarget) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
i += delta;
|
|
31
|
+
}
|
|
32
|
+
// desperationLevel++; // We've failed to find a focusable element.
|
|
33
|
+
// Let's see if we can find a non-interactive focusable to fall back on
|
|
34
|
+
const fallbackFocusElm = container.matches('[tabindex]')
|
|
35
|
+
? container
|
|
36
|
+
: container.querySelector('[tabindex="-1"]') || container.closest('[tabindex]');
|
|
37
|
+
if (fallbackFocusElm) {
|
|
38
|
+
fallbackFocusElm.focus();
|
|
39
|
+
}
|
|
40
|
+
// desperationLevel++; // Whatever, we tried. ¯\_(ツ)_/¯
|
|
23
41
|
} }));
|
|
24
42
|
};
|