@geckou/ui-core 0.4.0 → 0.5.0
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/dist/focus-trap.d.ts +15 -1
- package/dist/focus-trap.js +18 -2
- package/package.json +1 -1
package/dist/focus-trap.d.ts
CHANGED
|
@@ -17,6 +17,9 @@ export declare const FOCUSABLE_SELECTOR: string;
|
|
|
17
17
|
export type FocusableLike = {
|
|
18
18
|
focus: () => void;
|
|
19
19
|
hasAttribute?: (name: string) => boolean;
|
|
20
|
+
closest?: (selectors: string) => unknown;
|
|
21
|
+
matches?: (selectors: string) => boolean;
|
|
22
|
+
checkVisibility?: () => boolean;
|
|
20
23
|
};
|
|
21
24
|
export type FocusTrapContainer = FocusableLike & {
|
|
22
25
|
querySelectorAll: (selectors: string) => ArrayLike<FocusableLike>;
|
|
@@ -28,7 +31,18 @@ export type FocusTrapEvent = {
|
|
|
28
31
|
};
|
|
29
32
|
/**
|
|
30
33
|
* コンテナ内のフォーカス可能な要素を、DOM 順（= Tab 順）で返す。
|
|
31
|
-
*
|
|
34
|
+
*
|
|
35
|
+
* セレクタだけでは「実際にはフォーカスできない要素」が混ざる。
|
|
36
|
+
* 混ざると端の要素が no-op になって Tab が止まるか、preventDefault を挟んだ後に
|
|
37
|
+
* ブラウザ既定の移動が起きてダイアログの外へ抜けるため、ここで落とす。
|
|
38
|
+
*
|
|
39
|
+
* - `inert` 配下（閉じた SlideDownUi / DropdownUi の中身）。自身の属性だけでは足りない
|
|
40
|
+
* - `<fieldset disabled>` 配下（`:disabled` は継承する。`:not([disabled])` では消せない）
|
|
41
|
+
* - `display: none` で描画されていないもの（`hidden` な TabUI のパネルの中身など）。
|
|
42
|
+
* 引数なしの `checkVisibility()` は `visibility: hidden` / `opacity: 0` は落とさない
|
|
43
|
+
*
|
|
44
|
+
* `closest` / `matches` / `checkVisibility` は任意（`FocusableLike` は DOM 型を
|
|
45
|
+
* 要求しない）。持たない実装では従来どおりの結果になる
|
|
32
46
|
*/
|
|
33
47
|
export declare function getFocusableElements(container: FocusTrapContainer | null): FocusableLike[];
|
|
34
48
|
/**
|
package/dist/focus-trap.js
CHANGED
|
@@ -19,12 +19,28 @@ export const FOCUSABLE_SELECTOR = [
|
|
|
19
19
|
].join(', ');
|
|
20
20
|
/**
|
|
21
21
|
* コンテナ内のフォーカス可能な要素を、DOM 順（= Tab 順）で返す。
|
|
22
|
-
*
|
|
22
|
+
*
|
|
23
|
+
* セレクタだけでは「実際にはフォーカスできない要素」が混ざる。
|
|
24
|
+
* 混ざると端の要素が no-op になって Tab が止まるか、preventDefault を挟んだ後に
|
|
25
|
+
* ブラウザ既定の移動が起きてダイアログの外へ抜けるため、ここで落とす。
|
|
26
|
+
*
|
|
27
|
+
* - `inert` 配下（閉じた SlideDownUi / DropdownUi の中身）。自身の属性だけでは足りない
|
|
28
|
+
* - `<fieldset disabled>` 配下（`:disabled` は継承する。`:not([disabled])` では消せない）
|
|
29
|
+
* - `display: none` で描画されていないもの（`hidden` な TabUI のパネルの中身など）。
|
|
30
|
+
* 引数なしの `checkVisibility()` は `visibility: hidden` / `opacity: 0` は落とさない
|
|
31
|
+
*
|
|
32
|
+
* `closest` / `matches` / `checkVisibility` は任意（`FocusableLike` は DOM 型を
|
|
33
|
+
* 要求しない）。持たない実装では従来どおりの結果になる
|
|
23
34
|
*/
|
|
24
35
|
export function getFocusableElements(container) {
|
|
25
36
|
if (!container)
|
|
26
37
|
return [];
|
|
27
|
-
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) =>
|
|
38
|
+
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) =>
|
|
39
|
+
// closest を持たない実装のために、自身の inert も見る（DOM では冗長）
|
|
40
|
+
!element.hasAttribute?.('inert') &&
|
|
41
|
+
!element.closest?.('[inert]') &&
|
|
42
|
+
!element.matches?.(':disabled') &&
|
|
43
|
+
(element.checkVisibility?.() ?? true));
|
|
28
44
|
}
|
|
29
45
|
/**
|
|
30
46
|
* Tab / Shift+Tab を受けて、コンテナの端で折り返す。
|