From d0d899155e8f17c55300ef3186b0d5b29e8c37b7 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 10 Mar 2026 02:54:17 +0000 Subject: [PATCH 01/13] feat: add focusgroup attribute section to keyboard-interface practice Add comprehensive documentation about the emerging focusgroup HTML attribute to the keyboard-interface practice page (both EN and JA). Includes interactive demo component with linear, wrapping, and grid focusgroup examples, browser support detection, comparison table with existing JS-based approaches, and progressive enhancement guidance. https://claude.ai/code/session_01M8kaqxuhunpzSu9MynhadN --- .../keyboard-interface/FocusgroupDemo.astro | 208 ++++++++++++++++++ .../keyboard-interface/content.ja.mdx | 168 ++++++++++++++ src/practices/keyboard-interface/content.mdx | 168 ++++++++++++++ 3 files changed, 544 insertions(+) create mode 100644 src/practices/keyboard-interface/FocusgroupDemo.astro diff --git a/src/practices/keyboard-interface/FocusgroupDemo.astro b/src/practices/keyboard-interface/FocusgroupDemo.astro new file mode 100644 index 00000000..5a3d4642 --- /dev/null +++ b/src/practices/keyboard-interface/FocusgroupDemo.astro @@ -0,0 +1,208 @@ +--- +/** + * Interactive demo for the focusgroup HTML attribute. + * + * Shows three demos side-by-side: + * 1. Linear focusgroup (toolbar-like) + * 2. Wrapping focusgroup + * 3. Grid focusgroup + * + * Each demo includes a fallback for browsers that do not support focusgroup. + */ +--- + +
+ {/* Demo 1: Linear focusgroup */} +
+
+ Linear Focusgroup (focusgroup="horizontal") +
+ +

+ Use ← → arrow keys to navigate. Focus stops at the edges. +

+
+ + {/* Demo 2: Wrapping focusgroup */} +
+
+ Wrapping Focusgroup (focusgroup="horizontal wrap") +
+ +

+ Use ← → arrow keys. Focus wraps around from last to first and vice versa. +

+
+ + {/* Demo 3: Grid focusgroup */} +
+
+ Grid Focusgroup (focusgroup="grid") +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+

+ Use ← → ↑ ↓ arrow keys to navigate the 2D grid. +

+
+ + {/* Browser support notice */} + + +
+ + diff --git a/src/practices/keyboard-interface/content.ja.mdx b/src/practices/keyboard-interface/content.ja.mdx index 6b687ef0..5913a73c 100644 --- a/src/practices/keyboard-interface/content.ja.mdx +++ b/src/practices/keyboard-interface/content.ja.mdx @@ -1,4 +1,5 @@ import CodeFigure from '@/components/ui/CodeFigure.astro'; +import FocusgroupDemo from './FocusgroupDemo.astro'; ## 概要 @@ -303,6 +304,173 @@ class ActiveDescendant { ``` +### focusgroup 属性（新しい標準仕様） + +`focusgroup` HTML属性は、**JavaScriptなしで矢印キーナビゲーションを宣言的に実現する**新しいWeb標準です。従来、複合ウィジェット（ツールバー、タブリスト、グリッドなど）のキーボードナビゲーションを実装するには、ロービング tabindex や `aria-activedescendant` を管理するための大量のJavaScriptが必要でした。`focusgroup` 属性は、これをブラウザにネイティブで処理させることを目指しています。 + +#### 動作の仕組み + +コンテナ要素に `focusgroup` を追加すると、ブラウザが以下を自動的に行います： + +1. **フォーカス可能な子孫要素を1つのTabストップに集約** — 複数の ` + + + + + +
+ + + +
`} + lang="html" + caption="focusgroup 属性は手動のロービング tabindex 管理を置き換えます。ブラウザがボタンを1つの Tab ストップに自動的に集約し、矢印キーナビゲーションを有効にします。" +/> + +#### 利用可能な値 + +`focusgroup` 属性はスペース区切りのトークンでナビゲーション動作を制御します： + +| 値 | 動作 | +| ------------ | ------------------------------------------------------------------------------ | +| `horizontal` | 左右矢印キーのみでナビゲート（水平ツールバー、タブリストに適用） | +| `vertical` | 上下矢印キーのみでナビゲート（縦メニュー、リストボックスに適用） | +| `wrap` | 最後の項目から最初の項目へ（またはその逆に）フォーカスがラップする | +| `grid` | 4方向の矢印キーで2Dナビゲーション（グリッド、日付ピッカーに適用） | +| `extend` | ネストされたfocusgroupを親のfocusgroupに統合し、1つの論理グループとして機能する | + +これらの値を組み合わせることができます： + + +
+ + + +
+ + + + + +
+
+ + + +
+
+ + + +
+
`} + lang="html" + caption="異なるナビゲーションパターンに対する focusgroup 値の組み合わせ。" +/> + +#### ネストされた focusgroup と extend + +focusgroupがネストされている場合、デフォルトではそれぞれが独立したナビゲーションスコープを作成します。`extend` キーワードを使うと、子のfocusgroupが親に統合され、1つの論理グループとして機能します： + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
`} + lang="html" + caption="extend なしではネストされた focusgroup は独立します。extend を使うと親の focusgroup に統合されます。" +/> + +#### Shadow DOM との連携 + +`focusgroup` 属性はデフォルトで Shadow DOM 境界を越えて動作します。シャドウホストに宣言されたfocusgroupは、そのホストのシャドウツリー内のフォーカス可能な要素を含みます。シャドウツリー内で除外したい場合は `focusgroup="none"` を使用します。 + +#### キーの競合処理 + +focusgroup内に `` や `