diff --git a/adev-ja/src/app/routing/sub-navigation-data.ts b/adev-ja/src/app/routing/sub-navigation-data.ts
index e13a0ce52a..b16e6ed9e7 100644
--- a/adev-ja/src/app/routing/sub-navigation-data.ts
+++ b/adev-ja/src/app/routing/sub-navigation-data.ts
@@ -652,62 +652,62 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
contentPath: 'guide/aria/overview',
},
{
- label: 'Accordion',
+ label: 'アコーディオン',
path: 'guide/aria/accordion',
contentPath: 'guide/aria/accordion',
},
{
- label: 'Autocomplete',
+ label: 'オートコンプリート',
path: 'guide/aria/autocomplete',
contentPath: 'guide/aria/autocomplete',
},
{
- label: 'Combobox',
+ label: 'コンボボックス',
path: 'guide/aria/combobox',
contentPath: 'guide/aria/combobox',
},
{
- label: 'Grid',
+ label: 'グリッド',
path: 'guide/aria/grid',
contentPath: 'guide/aria/grid',
},
{
- label: 'Listbox',
+ label: 'リストボックス',
path: 'guide/aria/listbox',
contentPath: 'guide/aria/listbox',
},
{
- label: 'Menu',
+ label: 'メニュー',
path: 'guide/aria/menu',
contentPath: 'guide/aria/menu',
},
{
- label: 'Menubar',
+ label: 'メニューバー',
path: 'guide/aria/menubar',
contentPath: 'guide/aria/menubar',
},
{
- label: 'Multiselect',
+ label: 'マルチセレクト',
path: 'guide/aria/multiselect',
contentPath: 'guide/aria/multiselect',
},
{
- label: 'Select',
+ label: 'セレクト',
path: 'guide/aria/select',
contentPath: 'guide/aria/select',
},
{
- label: 'Tabs',
+ label: 'タブ',
path: 'guide/aria/tabs',
contentPath: 'guide/aria/tabs',
},
{
- label: 'Toolbar',
+ label: 'ツールバー',
path: 'guide/aria/toolbar',
contentPath: 'guide/aria/toolbar',
},
{
- label: 'Tree',
+ label: 'ツリー',
path: 'guide/aria/tree',
contentPath: 'guide/aria/tree',
},
diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md
new file mode 100644
index 0000000000..990da2c19c
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/accordion.en.md
@@ -0,0 +1,251 @@
+
+
+
+
+
+
+
+
+## Overview
+
+An accordion organizes related content into expandable and collapsible sections, reducing page scrolling and helping users focus on relevant information. Each section has a trigger button and a content panel. Clicking a trigger toggles the visibility of its associated panel.
+
+
+
+
+
+
+
+## Usage
+
+Accordions work well for organizing content into logical groups where users typically need to view one section at a time.
+
+**Use accordions when:**
+
+- Displaying FAQs with multiple questions and answers
+- Organizing long forms into manageable sections
+- Reducing scrolling on content-heavy pages
+- Progressively disclosing related information
+
+**Avoid accordions when:**
+
+- Building navigation menus (use the [Menu](guide/aria/menu) component instead)
+- Creating tabbed interfaces (use the [Tabs](guide/aria/tabs) component instead)
+- Showing a single collapsible section (use a disclosure pattern instead)
+- Users need to see multiple sections simultaneously (consider a different layout)
+
+## Features
+
+- **Expansion modes** - Control whether one or multiple panels can be open at the same time
+- **Keyboard navigation** - Navigate between triggers using arrow keys, Home, and End
+- **Lazy rendering** - Content is only created when a panel first expands, improving initial load performance
+- **Disabled states** - Disable the entire group or individual triggers
+- **Focus management** - Control whether disabled items can receive keyboard focus
+- **Programmatic control** - Expand, collapse, or toggle panels from your component code
+- **RTL support** - Automatic support for right-to-left languages
+
+## Examples
+
+### Single expansion mode
+
+Set `[multiExpandable]="false"` to allow only one panel to be open at a time. Opening a new panel automatically closes any previously open panel.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This mode works well for FAQs or situations where you want users to focus on one answer at a time.
+
+### Multiple expansion mode
+
+Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneously. Users can expand as many panels as needed without closing others.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This mode is useful for form sections or when users need to compare content across multiple panels.
+
+NOTE: The `multiExpandable` input defaults to `true`. Set it to `false` explicitly if you want single expansion behavior.
+
+### Disabled accordion items
+
+Disable specific triggers using the `disabled` input. Control how disabled items behave during keyboard navigation using the `softDisabled` input on the accordion group.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When `[softDisabled]="true"` (the default), disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped entirely during keyboard navigation.
+
+### Lazy content rendering
+
+Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel first expands. This improves performance for accordions with heavy content like images, charts, or complex components.
+
+```angular-html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+By default, content remains in the DOM after the panel collapses. Set `[preserveContent]="false"` to remove the content from the DOM when the panel closes.
+
+## APIs
+
+### AccordionGroup
+
+The container directive that manages keyboard navigation and expansion behavior for a group of accordion items.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ------------------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables all triggers in the group |
+| `multiExpandable` | `boolean` | `true` | Whether multiple panels can be expanded simultaneously |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable. When `false`, they are skipped |
+| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first item and vice versa |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ------------- | ---------- | ---------------------------------------------------------------- |
+| `expandAll` | none | Expands all panels (only works when `multiExpandable` is `true`) |
+| `collapseAll` | none | Collapses all panels |
+
+### AccordionTrigger
+
+The directive applied to the button element that toggles panel visibility.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | -------------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the trigger |
+| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated panel |
+| `disabled` | `boolean` | `false` | Disables this trigger |
+| `expanded` | `boolean` | `false` | Whether the panel is expanded (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| -------- | ----------------- | --------------------------------------- |
+| `active` | `Signal` | Whether the trigger currently has focus |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------------- |
+| `expand` | none | Expands the associated panel |
+| `collapse` | none | Collapses the associated panel |
+| `toggle` | none | Toggles the panel expansion state |
+
+### AccordionPanel
+
+The directive applied to the element containing the collapsible content.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ---------------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the panel |
+| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated trigger |
+| `preserveContent` | `boolean` | `true` | Whether to keep content in DOM after panel collapses |
+
+#### Signals
+
+| Property | Type | Description |
+| --------- | ----------------- | --------------------------------------- |
+| `visible` | `Signal` | Whether the panel is currently expanded |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------- |
+| `expand` | none | Expands this panel |
+| `collapse` | none | Collapses this panel |
+| `toggle` | none | Toggles the expansion state |
+
+### AccordionContent
+
+The structural directive applied to an `ng-template` inside an accordion panel to enable lazy rendering.
+
+This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element:
+
+```angular-html
+
+
+
+
+
+```
diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md
index 990da2c19c..269530307f 100644
--- a/adev-ja/src/content/guide/aria/accordion.md
+++ b/adev-ja/src/content/guide/aria/accordion.md
@@ -1,14 +1,14 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-An accordion organizes related content into expandable and collapsible sections, reducing page scrolling and helping users focus on relevant information. Each section has a trigger button and a content panel. Clicking a trigger toggles the visibility of its associated panel.
+アコーディオンは、関連するコンテンツを展開・折りたたみ可能なセクションに整理し、ページのスクロールを減らし、ユーザーが関連情報に集中するのを助けます。各セクションには、トリガーボタンとコンテンツパネルがあります。トリガーをクリックすると、関連するパネルの表示/非表示が切り替わります。
@@ -16,39 +16,39 @@ An accordion organizes related content into expandable and collapsible sections,
-## Usage
+## 使い方 {#usage}
-Accordions work well for organizing content into logical groups where users typically need to view one section at a time.
+アコーディオンは、ユーザーが通常一度に1つのセクションを表示する必要がある場合に、コンテンツを論理的なグループに整理するのに適しています。
-**Use accordions when:**
+**アコーディオンを使用する場合:**
-- Displaying FAQs with multiple questions and answers
-- Organizing long forms into manageable sections
-- Reducing scrolling on content-heavy pages
-- Progressively disclosing related information
+- 複数の質問と回答を持つFAQを表示する
+- 長いフォームを管理しやすいセクションに整理する
+- コンテンツの多いページでのスクロールを減らす
+- 関連情報を段階的に開示する
-**Avoid accordions when:**
+**アコーディオンを避けるべき場合:**
-- Building navigation menus (use the [Menu](guide/aria/menu) component instead)
-- Creating tabbed interfaces (use the [Tabs](guide/aria/tabs) component instead)
-- Showing a single collapsible section (use a disclosure pattern instead)
-- Users need to see multiple sections simultaneously (consider a different layout)
+- ナビゲーションメニューを構築する（代わりに[Menu](guide/aria/menu)コンポーネントを使用してください）
+- タブ付きインターフェースを作成する（代わりに[Tabs](guide/aria/tabs)コンポーネントを使用してください）
+- 単一の折りたたみ可能なセクションを表示する（代わりにdisclosureパターンを使用してください）
+- ユーザーが複数のセクションを同時に見る必要がある（異なるレイアウトを検討してください）
-## Features
+## 機能 {#features}
-- **Expansion modes** - Control whether one or multiple panels can be open at the same time
-- **Keyboard navigation** - Navigate between triggers using arrow keys, Home, and End
-- **Lazy rendering** - Content is only created when a panel first expands, improving initial load performance
-- **Disabled states** - Disable the entire group or individual triggers
-- **Focus management** - Control whether disabled items can receive keyboard focus
-- **Programmatic control** - Expand, collapse, or toggle panels from your component code
-- **RTL support** - Automatic support for right-to-left languages
+- **展開モード** - 一度に1つまたは複数のパネルを開けるかどうかを制御します
+- **キーボードナビゲーション** - 矢印キー、Home、Endを使用してトリガー間を移動します
+- **遅延レンダリング** - コンテンツはパネルが最初に展開されたときにのみ作成され、初期読み込みのパフォーマンスを向上させます
+- **無効状態** - グループ全体または個々のトリガーを無効にします
+- **フォーカス管理** - 無効化されたアイテムがキーボードフォーカスを受け取れるかどうかを制御します
+- **プログラムによる制御** - コンポーネントのコードからパネルを展開、折りたたみ、または切り替えます
+- **RTLサポート** - 右から左へ記述する言語を自動的にサポートします
-## Examples
+## 例 {#examples}
-### Single expansion mode
+### 単一展開モード {#single-expansion-mode}
-Set `[multiExpandable]="false"` to allow only one panel to be open at a time. Opening a new panel automatically closes any previously open panel.
+`[multiExpandable]="false"`を設定すると、一度に開けるパネルが1つだけになります。新しいパネルを開くと、以前に開いていたパネルは自動的に閉じます。
@@ -74,11 +74,11 @@ Set `[multiExpandable]="false"` to allow only one panel to be open at a time. Op
-This mode works well for FAQs or situations where you want users to focus on one answer at a time.
+このモードは、FAQや、ユーザーに一度に1つの回答に集中してもらいたい場合に適しています。
-### Multiple expansion mode
+### 複数展開モード {#multiple-expansion-mode}
-Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneously. Users can expand as many panels as needed without closing others.
+`[multiExpandable]="true"`を設定すると、複数のパネルを同時に開くことができます。ユーザーは他のパネルを閉じることなく、必要なだけパネルを展開できます。
@@ -104,13 +104,13 @@ Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneousl
-This mode is useful for form sections or when users need to compare content across multiple panels.
+このモードは、フォームのセクションや、ユーザーが複数のパネルにわたるコンテンツを比較する必要がある場合に便利です。
-NOTE: The `multiExpandable` input defaults to `true`. Set it to `false` explicitly if you want single expansion behavior.
+NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の動作が必要な場合は、明示的に`false`に設定してください。
-### Disabled accordion items
+### 無効化されたアコーディオンアイテム {#disabled-accordion-items}
-Disable specific triggers using the `disabled` input. Control how disabled items behave during keyboard navigation using the `softDisabled` input on the accordion group.
+`disabled`入力を使用して特定のトリガーを無効にします。アコーディオンのグループで`softDisabled`入力を使用し、キーボードナビゲーション中に無効化されたアイテムの動作を制御します。
@@ -136,11 +136,11 @@ Disable specific triggers using the `disabled` input. Control how disabled items
-When `[softDisabled]="true"` (the default), disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped entirely during keyboard navigation.
+`[softDisabled]="true"`（デフォルト）の場合、無効化されたアイテムはフォーカスを受け取れますが、アクティブにはできません。`[softDisabled]="false"`の場合、無効化されたアイテムはキーボードナビゲーション中に完全にスキップされます。
-### Lazy content rendering
+### コンテンツの遅延レンダリング {#lazy-content-rendering}
-Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel first expands. This improves performance for accordions with heavy content like images, charts, or complex components.
+`ngAccordionContent`ディレクティブを`ng-template`で使用すると、パネルが最初に展開されるまでコンテンツのレンダリングを遅延させることができます。これにより、画像、チャート、または複雑なコンポーネントなどの重いコンテンツを持つアコーディオンのパフォーマンスが向上します。
```angular-html
@@ -150,7 +150,7 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co
-
+
@@ -159,88 +159,88 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co
```
-By default, content remains in the DOM after the panel collapses. Set `[preserveContent]="false"` to remove the content from the DOM when the panel closes.
+デフォルトでは、パネルが折りたたまれた後もコンテンツはDOMに残ります。パネルが閉じたときにDOMからコンテンツを削除するには、`[preserveContent]="false"`を設定します。
-## APIs
+## API
-### AccordionGroup
+### AccordionGroup {#accordiongroup}
-The container directive that manages keyboard navigation and expansion behavior for a group of accordion items.
+アコーディオンアイテムのグループのキーボードナビゲーションと展開動作を管理するコンテナディレクティブです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ----------------- | --------- | ------- | ------------------------------------------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables all triggers in the group |
-| `multiExpandable` | `boolean` | `true` | Whether multiple panels can be expanded simultaneously |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable. When `false`, they are skipped |
-| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first item and vice versa |
+| `disabled` | `boolean` | `false` | グループ内のすべてのトリガーを無効にします |
+| `multiExpandable` | `boolean` | `true` | 複数のパネルを同時に展開できるかどうか |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたアイテムはフォーカス可能です。`false`の場合、スキップされます |
+| `wrap` | `boolean` | `false` | キーボードナビゲーションが最後のアイテムから最初のアイテムへ、またはその逆にラップするかどうか |
-#### Methods
+#### Methods {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| ------------- | ---------- | ---------------------------------------------------------------- |
-| `expandAll` | none | Expands all panels (only works when `multiExpandable` is `true`) |
-| `collapseAll` | none | Collapses all panels |
+| `expandAll` | none | すべてのパネルを展開します（`multiExpandable`が`true`の場合のみ機能します） |
+| `collapseAll` | none | すべてのパネルを折りたたみます |
-### AccordionTrigger
+### AccordionTrigger {#accordiontrigger}
-The directive applied to the button element that toggles panel visibility.
+パネルの表示/非表示を切り替えるボタン要素に適用されるディレクティブです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | -------------------------------------------------------------- |
-| `id` | `string` | auto | Unique identifier for the trigger |
-| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated panel |
-| `disabled` | `boolean` | `false` | Disables this trigger |
-| `expanded` | `boolean` | `false` | Whether the panel is expanded (supports two-way binding) |
+| `id` | `string` | auto | トリガーの一意の識別子 |
+| `panelId` | `string` | — | **必須。**関連付けられたパネルの`panelId`と一致する必要があります |
+| `disabled` | `boolean` | `false` | このトリガーを無効にします |
+| `expanded` | `boolean` | `false` | パネルが展開されているかどうか（双方向バインディングをサポート） |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| -------- | ----------------- | --------------------------------------- |
-| `active` | `Signal` | Whether the trigger currently has focus |
+| `active` | `Signal` | トリガーが現在フォーカスを持っているかどうか |
-#### Methods
+#### Methods {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| ---------- | ---------- | --------------------------------- |
-| `expand` | none | Expands the associated panel |
-| `collapse` | none | Collapses the associated panel |
-| `toggle` | none | Toggles the panel expansion state |
+| `expand` | none | 関連付けられたパネルを展開します |
+| `collapse` | none | 関連付けられたパネルを折りたたみます |
+| `toggle` | none | パネルの展開状態を切り替えます |
-### AccordionPanel
+### AccordionPanel {#accordionpanel}
-The directive applied to the element containing the collapsible content.
+折りたたみ可能なコンテンツを含む要素に適用されるディレクティブです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ----------------- | --------- | ------- | ---------------------------------------------------------------- |
-| `id` | `string` | auto | Unique identifier for the panel |
-| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated trigger |
-| `preserveContent` | `boolean` | `true` | Whether to keep content in DOM after panel collapses |
+| `id` | `string` | auto | パネルの一意の識別子 |
+| `panelId` | `string` | — | **必須。**関連付けられたトリガーの`panelId`と一致する必要があります |
+| `preserveContent` | `boolean` | `true` | パネルが折りたたまれた後もコンテンツをDOMに保持するかどうか |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| --------- | ----------------- | --------------------------------------- |
-| `visible` | `Signal` | Whether the panel is currently expanded |
+| `visible` | `Signal` | パネルが現在展開されているかどうか |
-#### Methods
+#### Methods {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| ---------- | ---------- | --------------------------- |
-| `expand` | none | Expands this panel |
-| `collapse` | none | Collapses this panel |
-| `toggle` | none | Toggles the expansion state |
+| `expand` | none | このパネルを展開します |
+| `collapse` | none | このパネルを折りたたみます |
+| `toggle` | none | 展開状態を切り替えます |
-### AccordionContent
+### AccordionContent {#accordioncontent}
-The structural directive applied to an `ng-template` inside an accordion panel to enable lazy rendering.
+遅延レンダリングを有効にするために、アコーディオンパネル内の`ng-template`に適用される構造ディレクティブです。
-This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element:
+このディレクティブには、input、output、メソッドはありません。`ng-template`要素に適用してください:
```angular-html
diff --git a/adev-ja/src/content/guide/aria/autocomplete.en.md b/adev-ja/src/content/guide/aria/autocomplete.en.md
new file mode 100644
index 0000000000..f1fd46946e
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/autocomplete.en.md
@@ -0,0 +1,190 @@
+
+
+
+## Overview
+
+An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Autocomplete works best when users need to select from a large set of options where typing is faster than scrolling. Consider using autocomplete when:
+
+- **The option list is long** (more than 20 items) - Typing narrows down choices faster than scrolling through a dropdown
+- **Users know what they're looking for** - They can type part of the expected value (like a state name, product, or username)
+- **Options follow predictable patterns** - Users can guess partial matches (like country codes, email domains, or categories)
+- **Speed matters** - Forms benefit from quick selection without extensive navigation
+
+Avoid autocomplete when:
+
+- The list has fewer than 10 options - A regular dropdown or radio group provides better visibility
+- Users need to browse options - If discovery is important, show all options upfront
+- Options are unfamiliar - Users can't type what they don't know exists in the list
+
+## Features
+
+Angular's autocomplete provides a fully accessible combobox implementation with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Three Filter Modes** - Choose between auto-select, manual selection, or highlighting behavior
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Popover API Integration** - Leverages the native HTML Popover API for optimal positioning
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+
+## Examples
+
+### Auto-select mode
+
+Users typing partial text expect immediate confirmation that their input matches an available option. Auto-select mode updates the input value to match the first filtered option as users type, reducing the number of keystrokes needed and providing instant feedback that their search is on the right track.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Manual selection mode
+
+Manual selection mode keeps the typed text unchanged while users navigate the suggestion list, preventing confusion from automatic updates. The input only changes when users explicitly confirm their choice with Enter or a click.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Highlight mode
+
+Highlight mode allows the user to navigate options with arrow keys without changing the input value as they browse until they explicitly select a new option with Enter or click.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## APIs
+
+### Combobox Directive
+
+The `ngCombobox` directive provides the container for autocomplete functionality.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ------------ | ---------------------------------------------- | ---------- | ------------------------------------------------- |
+| `filterMode` | `'auto-select'` \| `'manual'` \| `'highlight'` | `'manual'` | Controls selection behavior |
+| `disabled` | `boolean` | `false` | Disables the combobox |
+| `firstMatch` | `string` | - | The value of the first matching item in the popup |
+
+#### Outputs
+
+| Property | Type | Description |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| `expanded` | `Signal` | Signal indicating whether the popup is currently open |
+
+### ComboboxInput Directive
+
+The `ngComboboxInput` directive connects an input element to the combobox.
+
+#### Model
+
+| Property | Type | Description |
+| -------- | -------- | ------------------------------------------------------------ |
+| `value` | `string` | Two-way bindable string value of the input using `[(value)]` |
+
+### ComboboxPopupContainer Directive
+
+The `ngComboboxPopupContainer` directive wraps the popup content and manages its display.
+
+Must be used with `` inside a popover element.
+
+### Related components
+
+Autocomplete uses [Listbox](/api/aria/listbox/Listbox) and [Option](/api/aria/listbox/Option) directives to render the suggestion list. See the [Listbox documentation](/guide/aria/listbox) for additional customization options.
diff --git a/adev-ja/src/content/guide/aria/autocomplete.md b/adev-ja/src/content/guide/aria/autocomplete.md
index f1fd46946e..70661aeffe 100644
--- a/adev-ja/src/content/guide/aria/autocomplete.md
+++ b/adev-ja/src/content/guide/aria/autocomplete.md
@@ -1,12 +1,12 @@
-
+
-## Overview
+## 概要 {#overview}
-An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+ユーザーが入力するにつれてオプションをフィルタリングして提案し、リストから値を見つけて選択するのに役立つ、アクセシブルな入力フィールドです。
-
+
@@ -22,7 +22,7 @@ An accessible input field that filters and suggests options as users type, helpi
-
+
@@ -31,37 +31,37 @@ An accessible input field that filters and suggests options as users type, helpi
-## Usage
+## 使用法 {#usage}
-Autocomplete works best when users need to select from a large set of options where typing is faster than scrolling. Consider using autocomplete when:
+オートコンプリートは、タイピングがスクロールよりも速い大規模なオプションのセットからユーザーが選択する必要がある場合に最適です。次のような場合にオートコンプリートの使用を検討してください:
-- **The option list is long** (more than 20 items) - Typing narrows down choices faster than scrolling through a dropdown
-- **Users know what they're looking for** - They can type part of the expected value (like a state name, product, or username)
-- **Options follow predictable patterns** - Users can guess partial matches (like country codes, email domains, or categories)
-- **Speed matters** - Forms benefit from quick selection without extensive navigation
+- **オプションリストが長い** (20項目以上) - タイピングすることで、ドロップダウンをスクロールするよりも速く選択肢を絞り込めます
+- **ユーザーが探しているものを知っている** - 期待される値の一部を入力できます (州名、製品名、ユーザー名など)
+- **オプションが予測可能なパターンに従っている** - ユーザーが部分一致を推測できます (国コード、メールドメイン、カテゴリーなど)
+- **スピードが重要である** - フォームは、広範なナビゲーションなしで迅速に選択できるというメリットがあります
-Avoid autocomplete when:
+次のような場合はオートコンプリートを避けてください:
-- The list has fewer than 10 options - A regular dropdown or radio group provides better visibility
-- Users need to browse options - If discovery is important, show all options upfront
-- Options are unfamiliar - Users can't type what they don't know exists in the list
+- リストのオプションが10個未満の場合 - 通常のドロップダウンやラジオグループの方が視認性が高いためです
+- ユーザーがオプションを閲覧する必要がある場合 - 発見が重要である場合は、すべてのオプションを最初から表示します
+- オプションが馴染みのないものである場合 - ユーザーはリストに存在することを知らないものを入力できないためです
-## Features
+## 機能 {#features}
-Angular's autocomplete provides a fully accessible combobox implementation with:
+Angularのオートコンプリートは、以下の機能を備えた、完全にアクセシブルなコンボボックスの実装を提供します：
-- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
-- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
-- **Three Filter Modes** - Choose between auto-select, manual selection, or highlighting behavior
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
-- **Popover API Integration** - Leverages the native HTML Popover API for optimal positioning
-- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+- **キーボードナビゲーション** - 矢印キーでオプションを移動し、Enterで選択、Escapeで閉じます
+- **スクリーンリーダーのサポート** - 支援技術のための組み込みARIA属性
+- **3つのフィルターモード** - 自動選択、手動選択、またはハイライト表示の動作から選択できます
+- **シグナルベースのリアクティビティ** - Angularシグナルを使用したリアクティブな状態管理
+- **Popover APIとの統合** - ネイティブのHTML Popover APIを活用し、最適な配置を実現します
+- **双方向テキストのサポート** - 右から左へ記述する言語（RTL）に自動的に対応します
-## Examples
+## 例
-### Auto-select mode
+### 自動選択モード {#auto-select-mode}
-Users typing partial text expect immediate confirmation that their input matches an available option. Auto-select mode updates the input value to match the first filtered option as users type, reducing the number of keystrokes needed and providing instant feedback that their search is on the right track.
+ユーザーがテキストの一部を入力すると、その入力が利用可能なオプションと一致することの即時確認が期待されます。自動選択モードは、ユーザーが入力するにつれて、フィルタリングされた最初のオプションに一致するように入力値を更新し、必要なキーストロークの数を減らし、検索が正しい方向に向かっていることを即座にフィードバックします。
@@ -89,9 +89,9 @@ Users typing partial text expect immediate confirmation that their input matches
-### Manual selection mode
+### 手動選択モード {#manual-selection-mode}
-Manual selection mode keeps the typed text unchanged while users navigate the suggestion list, preventing confusion from automatic updates. The input only changes when users explicitly confirm their choice with Enter or a click.
+手動選択モードでは、ユーザーが候補リストをナビゲートしている間、入力されたテキストは変更されず、自動更新による混乱を防ぎます。入力は、ユーザーがEnterキーまたはクリックで明示的に選択を確定した場合にのみ変更されます。
@@ -119,9 +119,9 @@ Manual selection mode keeps the typed text unchanged while users navigate the su
-### Highlight mode
+### ハイライトモード {#highlight-mode}
-Highlight mode allows the user to navigate options with arrow keys without changing the input value as they browse until they explicitly select a new option with Enter or click.
+ハイライトモードでは、ユーザーは矢印キーでオプションをナビゲートできますが、Enterキーまたはクリックで明示的に新しいオプションを選択するまで、閲覧中に入力値は変更されません。
@@ -149,42 +149,42 @@ Highlight mode allows the user to navigate options with arrow keys without chang
-## APIs
+## API
-### Combobox Directive
+### Comboboxディレクティブ {#combobox-directive}
-The `ngCombobox` directive provides the container for autocomplete functionality.
+`ngCombobox`ディレクティブは、オートコンプリート機能のためのコンテナを提供します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
-| ------------ | ---------------------------------------------- | ---------- | ------------------------------------------------- |
-| `filterMode` | `'auto-select'` \| `'manual'` \| `'highlight'` | `'manual'` | Controls selection behavior |
-| `disabled` | `boolean` | `false` | Disables the combobox |
-| `firstMatch` | `string` | - | The value of the first matching item in the popup |
+| プロパティ | 型 | デフォルト | 説明 |
+| ------------ | ---------------------------------------------- | ---------- | ---------------------------------------------------- |
+| `filterMode` | `'auto-select'` \| `'manual'` \| `'highlight'` | `'manual'` | 選択の動作を制御します |
+| `disabled` | `boolean` | `false` | コンボボックスを無効にします |
+| `firstMatch` | `string` | - | ポップアップ内で最初に一致したアイテムの値を表します |
-#### Outputs
+#### 出力 {#outputs}
-| Property | Type | Description |
-| ---------- | ----------------- | ----------------------------------------------------- |
-| `expanded` | `Signal` | Signal indicating whether the popup is currently open |
+| プロパティ | 型 | 説明 |
+| ---------- | ----------------- | ---------------------------------------------------- |
+| `expanded` | `Signal` | ポップアップが現在開いているかどうかを示すSignalです |
-### ComboboxInput Directive
+### ComboboxInputディレクティブ {#comboboxinput-directive}
-The `ngComboboxInput` directive connects an input element to the combobox.
+`ngComboboxInput`ディレクティブは、input要素をコンボボックスに接続します。
-#### Model
+#### モデル {#model}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| -------- | -------- | ------------------------------------------------------------ |
-| `value` | `string` | Two-way bindable string value of the input using `[(value)]` |
+| `value` | `string` | `[(value)]`を使用した、inputの双方向バインディング可能な文字列値です |
-### ComboboxPopupContainer Directive
+### ComboboxPopupContainerディレクティブ {#comboboxpopupcontainer-directive}
-The `ngComboboxPopupContainer` directive wraps the popup content and manages its display.
+`ngComboboxPopupContainer`ディレクティブは、ポップアップのコンテンツをラップし、その表示を管理します。
-Must be used with `` inside a popover element.
+popover要素内の``と共に使用する必要があります。
-### Related components
+### 関連コンポーネント {#related-components}
-Autocomplete uses [Listbox](/api/aria/listbox/Listbox) and [Option](/api/aria/listbox/Option) directives to render the suggestion list. See the [Listbox documentation](/guide/aria/listbox) for additional customization options.
+オートコンプリートは、候補リストをレンダリングするために[Listbox](/api/aria/listbox/Listbox)と[Option](/api/aria/listbox/Option)ディレクティブを使用します。追加のカスタマイズオプションについては、[Listboxのドキュメント](/guide/aria/listbox)を参照してください。
diff --git a/adev-ja/src/content/guide/aria/combobox.en.md b/adev-ja/src/content/guide/aria/combobox.en.md
new file mode 100644
index 0000000000..858eb4865e
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/combobox.en.md
@@ -0,0 +1,255 @@
+
+
+
+
+
+
+
+
+## Overview
+
+A directive that coordinates a text input with a popup, providing the primitive directive for autocomplete, select, and multiselect patterns.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Combobox is the primitive directive that coordinates a text input with a popup. It provides the foundation for autocomplete, select, and multiselect patterns. Consider using combobox directly when:
+
+- **Building custom autocomplete patterns** - Creating specialized filtering or suggestion behavior
+- **Creating custom selection components** - Developing dropdowns with unique requirements
+- **Coordinating input with popup** - Pairing text input with listbox, tree, or dialog content
+- **Implementing specific filter modes** - Using manual, auto-select, or highlight behaviors
+
+Use documented patterns instead when:
+
+- Standard autocomplete with filtering is needed - See the [Autocomplete pattern](guide/aria/autocomplete) for ready-to-use examples
+- Single-selection dropdowns are needed - See the [Select pattern](guide/aria/select) for complete dropdown implementation
+- Multiple-selection dropdowns are needed - See the [Multiselect pattern](guide/aria/multiselect) for multi-select with compact display
+
+Note: The [Autocomplete](guide/aria/autocomplete), [Select](guide/aria/select), and [Multiselect](guide/aria/multiselect) guides show documented patterns that combine this directive with [Listbox](guide/aria/listbox) for specific use cases.
+
+## Features
+
+Angular's combobox provides a fully accessible input-popup coordination system with:
+
+- **Text Input with Popup** - Coordinates input field with popup content
+- **Three Filter Modes** - Manual, auto-select, or highlight behaviors
+- **Keyboard Navigation** - Arrow keys, Enter, Escape handling
+- **Screen Reader Support** - Built-in ARIA attributes including role="combobox" and aria-expanded
+- **Popup Management** - Automatic show/hide based on user interaction
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+
+## Examples
+
+### Autocomplete
+
+An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `filterMode="manual"` setting gives complete control over filtering and selection. The input updates a signal that filters the options list. Users navigate with arrow keys and select with Enter or click. This mode provides the most flexibility for custom filtering logic. See the [Autocomplete guide](guide/aria/autocomplete) for complete filtering patterns and examples.
+
+### Readonly mode
+
+A pattern that combines a readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `readonly` attribute prevents typing in the input field. The popup opens on click or arrow keys. Users navigate options with keyboard and select with Enter or click.
+
+This configuration provides the foundation for the [Select](guide/aria/select) and [Multiselect](guide/aria/multiselect) patterns. See those guides for complete dropdown implementations with triggers and overlay positioning.
+
+### Dialog popup
+
+Popups sometimes need modal behavior with a backdrop and focus trap. The combobox dialog directive provides this pattern for specialized use cases.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `ngComboboxDialog` directive creates a modal popup using the native dialog element. This provides backdrop behavior and focus trapping. Use dialog popups when the selection interface requires modal interaction or when the popup content is complex enough to warrant full-screen focus.
+
+## APIs
+
+### Combobox Directive
+
+The `ngCombobox` directive coordinates a text input with a popup.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------------- | ---------------------------------------------- | ---------- | ------------------------------------------------ |
+| `filterMode` | `'manual'` \| `'auto-select'` \| `'highlight'` | `'manual'` | Controls selection behavior |
+| `disabled` | `boolean` | `false` | Disables the combobox |
+| `readonly` | `boolean` | `false` | Makes combobox readonly (for Select/Multiselect) |
+| `firstMatch` | `V` | - | Value of first matching item for auto-select |
+| `alwaysExpanded` | `boolean` | `false` | Keeps popup always open |
+
+**Filter Modes:**
+
+- **`'manual'`** - User controls filtering and selection explicitly. The popup shows options based on your filtering logic. Users select with Enter or click. This mode provides the most flexibility.
+- **`'auto-select'`** - Input value automatically updates to the first matching option as users type. Requires the `firstMatch` input for coordination. See the [Autocomplete guide](guide/aria/autocomplete#auto-select-mode) for examples.
+- **`'highlight'`** - Highlights matching text without changing the input value. Users navigate with arrow keys and select with Enter.
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------- |
+| `expanded` | `Signal` | Whether popup is currently open |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | ---------------------- |
+| `open` | none | Opens the combobox |
+| `close` | none | Closes the combobox |
+| `expand` | none | Expands the combobox |
+| `collapse` | none | Collapses the combobox |
+
+### ComboboxInput Directive
+
+The `ngComboboxInput` directive connects an input element to the combobox.
+
+#### Model
+
+| Property | Type | Description |
+| -------- | -------- | ---------------------------------------- |
+| `value` | `string` | Two-way bindable value using `[(value)]` |
+
+The input element receives keyboard handling and ARIA attributes automatically.
+
+### ComboboxPopup Directive
+
+The `ngComboboxPopup` directive (host directive) manages popup visibility and coordination. Typically used with `ngComboboxPopupContainer` in an `ng-template` or with CDK Overlay.
+
+### ComboboxPopupContainer Directive
+
+The `ngComboboxPopupContainer` directive marks an `ng-template` as the popup content.
+
+```html
+
+
...
+
+```
+
+Used with Popover API or CDK Overlay for positioning.
+
+### ComboboxDialog Directive
+
+The `ngComboboxDialog` directive creates a modal combobox popup.
+
+```html
+
+```
+
+Use for modal popup behavior with backdrop and focus trap.
+
+### Related patterns and directives
+
+Combobox is the primitive directive for these documented patterns:
+
+- **[Autocomplete](guide/aria/autocomplete)** - Filtering and suggestions pattern (uses Combobox with filter modes)
+- **[Select](guide/aria/select)** - Single selection dropdown pattern (uses Combobox with `readonly`)
+- **[Multiselect](guide/aria/multiselect)** - Multiple selection pattern (uses Combobox with `readonly` + multi-enabled Listbox)
+
+Combobox typically combines with:
+
+- **[Listbox](guide/aria/listbox)** - Most common popup content
+- **[Tree](guide/aria/tree)** - Hierarchical popup content (see Tree guide for examples)
diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md
index 858eb4865e..5c650d2725 100644
--- a/adev-ja/src/content/guide/aria/combobox.md
+++ b/adev-ja/src/content/guide/aria/combobox.md
@@ -1,17 +1,17 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-A directive that coordinates a text input with a popup, providing the primitive directive for autocomplete, select, and multiselect patterns.
+テキスト入力とポップアップを連携させ、オートコンプリート、セレクト、マルチセレクトのパターンにプリミティブディレクティブを提供するディレクティブです。
-
+
@@ -27,7 +27,7 @@ A directive that coordinates a text input with a popup, providing the primitive
-
+
@@ -36,39 +36,39 @@ A directive that coordinates a text input with a popup, providing the primitive
-## Usage
+## 使い方 {#usage}
-Combobox is the primitive directive that coordinates a text input with a popup. It provides the foundation for autocomplete, select, and multiselect patterns. Consider using combobox directly when:
+コンボボックスは、テキスト入力とポップアップを連携させるプリミティブディレクティブです。オートコンプリート、セレクト、マルチセレクトパターンの基盤を提供します。次のような場合には、コンボボックスを直接使用することを検討してください：
-- **Building custom autocomplete patterns** - Creating specialized filtering or suggestion behavior
-- **Creating custom selection components** - Developing dropdowns with unique requirements
-- **Coordinating input with popup** - Pairing text input with listbox, tree, or dialog content
-- **Implementing specific filter modes** - Using manual, auto-select, or highlight behaviors
+- **カスタムオートコンプリートパターンの構築** - 特殊なフィルタリングやサジェスチョンの動作を作成する
+- **カスタム選択コンポーネントの作成** - 独自の要件を持つドロップダウンを開発する
+- **入力とポップアップの連携** - テキスト入力をリストボックス、ツリー、またはダイアログコンテンツと組み合わせる
+- **特定のフィルターモードの実装** - 手動、自動選択、またはハイライトの動作を使用する
-Use documented patterns instead when:
+代わりに、次のような場合はドキュメント化されたパターンを使用してください：
-- Standard autocomplete with filtering is needed - See the [Autocomplete pattern](guide/aria/autocomplete) for ready-to-use examples
-- Single-selection dropdowns are needed - See the [Select pattern](guide/aria/select) for complete dropdown implementation
-- Multiple-selection dropdowns are needed - See the [Multiselect pattern](guide/aria/multiselect) for multi-select with compact display
+- フィルタリング付きの標準的なオートコンプリートが必要な場合 - すぐに使える例については、[Autocompleteパターン](guide/aria/autocomplete)を参照してください
+- 単一選択のドロップダウンが必要な場合 - 完全なドロップダウンの実装については、[Selectパターン](guide/aria/select)を参照してください
+- 複数選択のドロップダウンが必要な場合 - コンパクトな表示の複数選択については、[Multiselectパターン](guide/aria/multiselect)を参照してください
-Note: The [Autocomplete](guide/aria/autocomplete), [Select](guide/aria/select), and [Multiselect](guide/aria/multiselect) guides show documented patterns that combine this directive with [Listbox](guide/aria/listbox) for specific use cases.
+Note: [Autocomplete](guide/aria/autocomplete)、[Select](guide/aria/select)、[Multiselect](guide/aria/multiselect)のガイドでは、このディレクティブを特定のユースケースのために[Listbox](guide/aria/listbox)と組み合わせた、ドキュメント化されたパターンが示されています。
-## Features
+## 機能 {#features}
-Angular's combobox provides a fully accessible input-popup coordination system with:
+Angularのコンボボックスは、完全にアクセシブルな入力とポップアップの連携システムを以下の機能とともに提供します:
-- **Text Input with Popup** - Coordinates input field with popup content
-- **Three Filter Modes** - Manual, auto-select, or highlight behaviors
-- **Keyboard Navigation** - Arrow keys, Enter, Escape handling
-- **Screen Reader Support** - Built-in ARIA attributes including role="combobox" and aria-expanded
-- **Popup Management** - Automatic show/hide based on user interaction
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **ポップアップ付きテキスト入力** - 入力フィールドとポップアップコンテンツを連携させます
+- **3つのフィルターモード** - 手動、自動選択、またはハイライトの動作
+- **キーボードナビゲーション** - 矢印キー、Enter、Escapeキーのハンドリング
+- **スクリーンリーダーのサポート** - `role="combobox"`や`aria-expanded`を含む組み込みのARIA属性
+- **ポップアップ管理** - ユーザーインタラクションに基づく自動的な表示/非表示
+- **シグナルベースのリアクティビティ** - Angularシグナルを使用したリアクティブな状態管理
-## Examples
+## 例
-### Autocomplete
+### オートコンプリート {#autocomplete}
-An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+ユーザーが入力するにつれてオプションをフィルタリングして提案する、アクセシブルな入力フィールドです。リストから値を見つけて選択するのに役立ちます。
@@ -96,11 +96,11 @@ An accessible input field that filters and suggests options as users type, helpi
-The `filterMode="manual"` setting gives complete control over filtering and selection. The input updates a signal that filters the options list. Users navigate with arrow keys and select with Enter or click. This mode provides the most flexibility for custom filtering logic. See the [Autocomplete guide](guide/aria/autocomplete) for complete filtering patterns and examples.
+`filterMode="manual"`設定は、フィルタリングと選択を完全に制御します。入力は、オプションリストをフィルタリングするシグナルを更新します。ユーザーは矢印キーで移動し、Enterキーまたはクリックで選択します。このモードは、カスタムフィルタリングロジックに最も柔軟性を提供します。完全なフィルタリングパターンと例については、[オートコンプリートガイド](guide/aria/autocomplete)を参照してください。
-### Readonly mode
+### 読み取り専用モード {#readonly-mode}
-A pattern that combines a readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+読み取り専用のコンボボックスとリストボックスを組み合わせて、キーボードナビゲーションとスクリーンリーダーをサポートする単一選択のドロップダウンを作成するパターンです。
@@ -128,13 +128,13 @@ A pattern that combines a readonly combobox with listbox to create single-select
-The `readonly` attribute prevents typing in the input field. The popup opens on click or arrow keys. Users navigate options with keyboard and select with Enter or click.
+`readonly`属性は、入力フィールドへの入力を防ぎます。ポップアップはクリックまたは矢印キーで開きます。ユーザーはキーボードでオプションを移動し、Enterキーかクリックで選択します。
-This configuration provides the foundation for the [Select](guide/aria/select) and [Multiselect](guide/aria/multiselect) patterns. See those guides for complete dropdown implementations with triggers and overlay positioning.
+この設定は、[Select](guide/aria/select)および[Multiselect](guide/aria/multiselect)パターンの基盤を提供します。トリガーとオーバーレイの位置決めを含む完全なドロップダウンの実装については、これらのガイドを参照してください。
-### Dialog popup
+### ダイアログポップアップ {#dialog-popup}
-Popups sometimes need modal behavior with a backdrop and focus trap. The combobox dialog directive provides this pattern for specialized use cases.
+ポップアップには、背景とフォーカストラップを備えたモーダルな動作が必要な場合があります。コンボボックスダイアログディレクティブは、特殊なユースケースのためにこのパターンを提供します。
@@ -162,64 +162,64 @@ Popups sometimes need modal behavior with a backdrop and focus trap. The combobo
-The `ngComboboxDialog` directive creates a modal popup using the native dialog element. This provides backdrop behavior and focus trapping. Use dialog popups when the selection interface requires modal interaction or when the popup content is complex enough to warrant full-screen focus.
+`ngComboboxDialog`ディレクティブは、ネイティブのdialog要素を使用してモーダルポップアップを作成します。これにより、背景の動作とフォーカストラップが提供されます。選択インターフェースがモーダルなインタラクションを必要とする場合や、ポップアップのコンテンツがフルスクリーンのフォーカスを必要とするほど複雑な場合に、ダイアログポップアップを使用します。
-## APIs
+## API {#apis}
-### Combobox Directive
+### Comboboxディレクティブ {#combobox-directive}
-The `ngCombobox` directive coordinates a text input with a popup.
+`ngCombobox`ディレクティブは、テキスト入力とポップアップを連携させます。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------------- | ---------------------------------------------- | ---------- | ------------------------------------------------ |
-| `filterMode` | `'manual'` \| `'auto-select'` \| `'highlight'` | `'manual'` | Controls selection behavior |
-| `disabled` | `boolean` | `false` | Disables the combobox |
-| `readonly` | `boolean` | `false` | Makes combobox readonly (for Select/Multiselect) |
-| `firstMatch` | `V` | - | Value of first matching item for auto-select |
-| `alwaysExpanded` | `boolean` | `false` | Keeps popup always open |
+| `filterMode` | `'manual'` \| `'auto-select'` \| `'highlight'` | `'manual'` | 選択の動作を制御します |
+| `disabled` | `boolean` | `false` | コンボボックスを無効にします |
+| `readonly` | `boolean` | `false` | コンボボックスを読み取り専用にします（Select/Multiselect用） |
+| `firstMatch` | `V` | - | 自動選択のために、最初に一致した項目の値 |
+| `alwaysExpanded` | `boolean` | `false` | ポップアップを常に開いたままにします |
-**Filter Modes:**
+**フィルターモード:**
-- **`'manual'`** - User controls filtering and selection explicitly. The popup shows options based on your filtering logic. Users select with Enter or click. This mode provides the most flexibility.
-- **`'auto-select'`** - Input value automatically updates to the first matching option as users type. Requires the `firstMatch` input for coordination. See the [Autocomplete guide](guide/aria/autocomplete#auto-select-mode) for examples.
-- **`'highlight'`** - Highlights matching text without changing the input value. Users navigate with arrow keys and select with Enter.
+- **`'manual'`** - ユーザーがフィルタリングと選択を明示的に制御します。ポップアップには、あなたのフィルタリングロジックに基づいたオプションが表示されます。ユーザーはEnterキーまたはクリックで選択します。このモードは最も柔軟性があります。
+- **`'auto-select'`** - ユーザーが入力すると、入力値は最初に一致したオプションに自動的に更新されます。連携のために`firstMatch`入力が必要です。例については[オートコンプリートガイド](guide/aria/autocomplete#auto-select-mode)を参照してください。
+- **`'highlight'`** - 入力値を変更せずに、一致するテキストをハイライトします。ユーザーは矢印キーで移動し、Enterキーで選択します。
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| ---------- | ----------------- | ------------------------------- |
-| `expanded` | `Signal` | Whether popup is currently open |
+| `expanded` | `Signal` | ポップアップが現在開いているかどうか |
-#### Methods
+#### メソッド {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| ---------- | ---------- | ---------------------- |
-| `open` | none | Opens the combobox |
-| `close` | none | Closes the combobox |
-| `expand` | none | Expands the combobox |
-| `collapse` | none | Collapses the combobox |
+| `open` | なし | コンボボックスを開きます |
+| `close` | なし | コンボボックスを閉じます |
+| `expand` | なし | コンボボックスを展開します |
+| `collapse` | なし | コンボボックスを折りたたみます |
-### ComboboxInput Directive
+### ComboboxInputディレクティブ {#comboboxinput-directive}
-The `ngComboboxInput` directive connects an input element to the combobox.
+`ngComboboxInput`ディレクティブは、入力要素をコンボボックスに接続します。
-#### Model
+#### モデル {#model}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| -------- | -------- | ---------------------------------------- |
-| `value` | `string` | Two-way bindable value using `[(value)]` |
+| `value` | `string` | `[(value)]`を使用した双方向バインディング可能な値 |
-The input element receives keyboard handling and ARIA attributes automatically.
+入力要素は、キーボード操作とARIA属性を自動的に受け取ります。
-### ComboboxPopup Directive
+### ComboboxPopupディレクティブ {#comboboxpopup-directive}
-The `ngComboboxPopup` directive (host directive) manages popup visibility and coordination. Typically used with `ngComboboxPopupContainer` in an `ng-template` or with CDK Overlay.
+`ngComboboxPopup`ディレクティブ（ホストディレクティブ）は、ポップアップの可視性と連携を管理します。通常、`ng-template`内の`ngComboboxPopupContainer`またはCDK Overlayと一緒に使用されます。
-### ComboboxPopupContainer Directive
+### ComboboxPopupContainerディレクティブ {#comboboxpopupcontainer-directive}
-The `ngComboboxPopupContainer` directive marks an `ng-template` as the popup content.
+`ngComboboxPopupContainer`ディレクティブは、`ng-template`をポップアップのコンテンツとしてマークします。
```html
@@ -227,11 +227,11 @@ The `ngComboboxPopupContainer` directive marks an `ng-template` as the popup con
```
-Used with Popover API or CDK Overlay for positioning.
+Popover APIまたはCDK Overlayと一緒に使用して、位置決めします。
-### ComboboxDialog Directive
+### ComboboxDialogディレクティブ {#comboboxdialog-directive}
-The `ngComboboxDialog` directive creates a modal combobox popup.
+`ngComboboxDialog`ディレクティブは、モーダルなコンボボックスポップアップを作成します。
```html
```
-Use for modal popup behavior with backdrop and focus trap.
+背景とフォーカストラップを備えたモーダルポップアップの動作に使用します。
-### Related patterns and directives
+### 関連するパターンとディレクティブ {#related-patterns-and-directives}
-Combobox is the primitive directive for these documented patterns:
+Comboboxは、これらのドキュメント化されたパターンのためのプリミティブディレクティブです:
-- **[Autocomplete](guide/aria/autocomplete)** - Filtering and suggestions pattern (uses Combobox with filter modes)
-- **[Select](guide/aria/select)** - Single selection dropdown pattern (uses Combobox with `readonly`)
-- **[Multiselect](guide/aria/multiselect)** - Multiple selection pattern (uses Combobox with `readonly` + multi-enabled Listbox)
+- **[オートコンプリート](guide/aria/autocomplete)** - フィルタリングと提案のパターン（フィルターモード付きのComboboxを使用）
+- **[セレクト](guide/aria/select)** - 単一選択のドロップダウンパターン（`readonly`付きのComboboxを使用）
+- **[マルチセレクト](guide/aria/multiselect)** - 複数選択のパターン（`readonly` + 複数選択が有効なListbox付きのComboboxを使用）
-Combobox typically combines with:
+Comboboxは通常、以下と組み合わせて使用されます:
-- **[Listbox](guide/aria/listbox)** - Most common popup content
-- **[Tree](guide/aria/tree)** - Hierarchical popup content (see Tree guide for examples)
+- **[Listbox](guide/aria/listbox)** - 最も一般的なポップアップコンテンツ
+- **[Tree](guide/aria/tree)** - 階層的なポップアップコンテンツ（例についてはTreeガイドを参照）
diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md
new file mode 100644
index 0000000000..6545e3045b
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/grid.en.md
@@ -0,0 +1,214 @@
+
+
+
+
+
+
+
+
+## Overview
+
+A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
+
+
+
+
+
+
+
+## Usage
+
+Grids work well for data or interactive elements organized in rows and columns where users need keyboard navigation in multiple directions.
+
+**Use grids when:**
+
+- Building interactive data tables with editable or selectable cells
+- Creating calendars or date pickers
+- Implementing spreadsheet-like interfaces
+- Grouping interactive elements (buttons, checkboxes) to reduce tab stops on a page
+- Building interfaces requiring two-dimensional keyboard navigation
+
+**Avoid grids when:**
+
+- Displaying simple read-only tables (use semantic HTML `
` instead)
+- Showing single-column lists (use [Listbox](guide/aria/listbox) instead)
+- Displaying hierarchical data (use [Tree](guide/aria/tree) instead)
+- Building forms without tabular layout (use standard form controls)
+
+## Features
+
+- **Two-dimensional navigation** - Arrow keys move between cells in all directions
+- **Focus modes** - Choose between roving tabindex or activedescendant focus strategies
+- **Selection support** - Optional cell selection with single or multi-select modes
+- **Wrapping behavior** - Configure how navigation wraps at grid edges (continuous, loop, or nowrap)
+- **Range selection** - Select multiple cells with modifier keys or dragging
+- **Disabled states** - Disable the entire grid or individual cells
+- **RTL support** - Automatic right-to-left language navigation
+
+## Examples
+
+### Data table grid
+
+Use a grid for interactive tables where users need to navigate between cells using arrow keys. This example shows a basic data table with keyboard navigation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Apply the `ngGrid` directive to the table element, `ngGridRow` to each row, and `ngGridCell` to each cell.
+
+### Calendar grid
+
+Calendars are a common use case for grids. This example shows a month view where users navigate dates using arrow keys.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Users can activate a date by pressing Enter or Space when focused on a cell.
+
+### Layout grid
+
+Use a layout grid to group interactive elements and reduce tab stops. This example shows a grid of pill buttons.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Instead of tabbing through each button, users navigate with arrow keys and only one button receives tab focus.
+
+### Selection and focus modes
+
+Enable selection with `[enableSelection]="true"` and configure how focus and selection interact.
+
+```angular-html
+
+
+
Cell 1
+
Cell 2
+
+
+```
+
+**Selection modes:**
+
+- `follow`: Focused cell is automatically selected
+- `explicit`: Users select cells with Space or click
+
+**Focus modes:**
+
+- `roving`: Focus moves to cells using `tabindex` (better for simple grids)
+- `activedescendant`: Focus stays on grid container, `aria-activedescendant` indicates active cell (better for virtual scrolling)
+
+## APIs
+
+### Grid
+
+The container directive that provides keyboard navigation and focus management for rows and cells.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------------------- | ------------------------------------ | ---------- | ------------------------------------------------------------- |
+| `enableSelection` | `boolean` | `false` | Whether selection is enabled for the grid |
+| `disabled` | `boolean` | `false` | Disables the entire grid |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled cells are focusable but not interactive |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the grid |
+| `rowWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along rows |
+| `colWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along columns |
+| `multi` | `boolean` | `false` | Whether multiple cells can be selected |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether selection follows focus or requires explicit action |
+| `enableRangeSelection` | `boolean` | `false` | Enable range selections with modifier keys or dragging |
+
+### GridRow
+
+Represents a row within a grid and serves as a container for grid cells.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | -------- | ------- | ------------------------------------- |
+| `rowIndex` | `number` | auto | The index of this row within the grid |
+
+### GridCell
+
+Represents an individual cell within a grid row.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the cell |
+| `role` | `string` | `'gridcell'` | Cell role: `gridcell`, `columnheader`, or `rowheader` |
+| `disabled` | `boolean` | `false` | Disables this cell |
+| `selected` | `boolean` | `false` | Whether the cell is selected (supports two-way binding) |
+| `selectable` | `boolean` | `true` | Whether the cell can be selected |
+| `rowSpan` | `number` | — | Number of rows the cell spans |
+| `colSpan` | `number` | — | Number of columns the cell spans |
+| `rowIndex` | `number` | — | Row index of the cell |
+| `colIndex` | `number` | — | Column index of the cell |
+| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Orientation for widgets within the cell |
+| `wrap` | `boolean` | `true` | Whether widget navigation wraps within the cell |
+
+#### Signals
+
+| Property | Type | Description |
+| -------- | ----------------- | ------------------------------------ |
+| `active` | `Signal` | Whether the cell currently has focus |
diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md
index 6545e3045b..463ae853b4 100644
--- a/adev-ja/src/content/guide/aria/grid.md
+++ b/adev-ja/src/content/guide/aria/grid.md
@@ -1,14 +1,14 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
+グリッドを使用すると、ユーザーは方向矢印キー、Home、End、Page Up/Downを使用して2次元データやインタラクティブな要素をナビゲートできます。グリッドは、データテーブル、カレンダー、スプレッドシート、および関連するインタラクティブな要素をグループ化するレイアウトパターンで機能します。
@@ -16,40 +16,40 @@ A grid enables users to navigate two-dimensional data or interactive elements us
-## Usage
+## 使用法 {#usage}
-Grids work well for data or interactive elements organized in rows and columns where users need keyboard navigation in multiple directions.
+グリッドは、ユーザーが複数の方向へのキーボードナビゲーションを必要とする、行と列で構成されたデータやインタラクティブな要素に適しています。
-**Use grids when:**
+**次の場合にグリッドを使用します:**
-- Building interactive data tables with editable or selectable cells
-- Creating calendars or date pickers
-- Implementing spreadsheet-like interfaces
-- Grouping interactive elements (buttons, checkboxes) to reduce tab stops on a page
-- Building interfaces requiring two-dimensional keyboard navigation
+- 編集可能または選択可能なセルを持つインタラクティブなデータテーブルを構築する場合
+- カレンダーや日付ピッカーを作成する場合
+- スプレッドシートのようなインターフェースを実装する場合
+- ページのタブストップを減らすために、インタラクティブな要素（ボタン、チェックボックス）をグループ化する場合
+- 2次元のキーボードナビゲーションを必要とするインターフェースを構築する場合
-**Avoid grids when:**
+**次の場合にグリッドの使用を避けます:**
-- Displaying simple read-only tables (use semantic HTML `
` instead)
-- Showing single-column lists (use [Listbox](guide/aria/listbox) instead)
-- Displaying hierarchical data (use [Tree](guide/aria/tree) instead)
-- Building forms without tabular layout (use standard form controls)
+- 単純な読み取り専用のテーブルを表示する場合（代わりにセマンティックなHTMLの`
`を使用します）
+- 単一列のリストを表示する場合（代わりに[Listbox](guide/aria/listbox)を使用します）
+- 階層データを表示する場合（代わりに[Tree](guide/aria/tree)を使用します）
+- 表形式のレイアウトではないフォームを構築する場合（標準のフォームコントロールを使用します）
-## Features
+## 機能 {#features}
-- **Two-dimensional navigation** - Arrow keys move between cells in all directions
-- **Focus modes** - Choose between roving tabindex or activedescendant focus strategies
-- **Selection support** - Optional cell selection with single or multi-select modes
-- **Wrapping behavior** - Configure how navigation wraps at grid edges (continuous, loop, or nowrap)
-- **Range selection** - Select multiple cells with modifier keys or dragging
-- **Disabled states** - Disable the entire grid or individual cells
-- **RTL support** - Automatic right-to-left language navigation
+- **2次元ナビゲーション** - 矢印キーですべての方向にセル間を移動
+- **フォーカスモード** - roving tabindexまたはactivedescendantのフォーカス戦略から選択
+- **選択のサポート** - 単一または複数選択モードによるオプションのセル選択
+- **折り返し動作** - グリッドの端でナビゲーションがどのように折り返すかを設定 (continuous、loop、またはnowrap)
+- **範囲選択** - 修飾キーまたはドラッグで複数のセルを選択
+- **無効状態** - グリッド全体または個々のセルを無効化
+- **RTLサポート** - 右から左へ記述する言語の自動ナビゲーション
-## Examples
+## 例 {#examples}
-### Data table grid
+### データテーブルグリッド {#data-table-grid}
-Use a grid for interactive tables where users need to navigate between cells using arrow keys. This example shows a basic data table with keyboard navigation.
+ユーザーが矢印キーを使ってセル間を移動する必要があるインタラクティブなテーブルには、グリッドを使用します。この例は、キーボードナビゲーションを備えた基本的なデータテーブルを示しています。
@@ -68,11 +68,11 @@ Use a grid for interactive tables where users need to navigate between cells usi
-Apply the `ngGrid` directive to the table element, `ngGridRow` to each row, and `ngGridCell` to each cell.
+`ngGrid`ディレクティブをテーブル要素に、`ngGridRow`を各行に、`ngGridCell`を各セルに適用します。
-### Calendar grid
+### カレンダーグリッド {#calendar-grid}
-Calendars are a common use case for grids. This example shows a month view where users navigate dates using arrow keys.
+カレンダーはグリッドの一般的なユースケースです。この例は、ユーザーが矢印キーを使って日付を移動する月表示を示しています。
@@ -98,11 +98,11 @@ Calendars are a common use case for grids. This example shows a month view where
-Users can activate a date by pressing Enter or Space when focused on a cell.
+ユーザーは、セルにフォーカスが当たっているときにEnterキーまたはSpaceキーを押すことで、日付をアクティブにできます。
-### Layout grid
+### レイアウトグリッド {#layout-grid}
-Use a layout grid to group interactive elements and reduce tab stops. This example shows a grid of pill buttons.
+レイアウトグリッドを使用して、インタラクティブな要素をグループ化し、タブストップを減らします。この例は、ピルボタンのグリッドを示しています。
@@ -128,11 +128,11 @@ Use a layout grid to group interactive elements and reduce tab stops. This examp
-Instead of tabbing through each button, users navigate with arrow keys and only one button receives tab focus.
+各ボタンをタブで移動する代わりに、ユーザーは矢印キーで移動し、1つのボタンのみがタブフォーカスを受け取ります。
-### Selection and focus modes
+### 選択とフォーカスモード {#selection-and-focus-modes}
-Enable selection with `[enableSelection]="true"` and configure how focus and selection interact.
+`[enableSelection]="true"`で選択を有効にし、フォーカスと選択がどのように相互作用するかを設定します。
```angular-html
```
-**Selection modes:**
+**選択モード:**
-- `follow`: Focused cell is automatically selected
-- `explicit`: Users select cells with Space or click
+- `follow`: フォーカスされたセルが自動的に選択されます
+- `explicit`: ユーザーがSpaceキーまたはクリックでセルを選択します
-**Focus modes:**
+**フォーカスモード:**
-- `roving`: Focus moves to cells using `tabindex` (better for simple grids)
-- `activedescendant`: Focus stays on grid container, `aria-activedescendant` indicates active cell (better for virtual scrolling)
+- `roving`: `tabindex`を使用してフォーカスがセルに移動します（単純なグリッドに適しています）
+- `activedescendant`: フォーカスはグリッドコンテナに留まり、`aria-activedescendant`がアクティブなセルを示します（仮想スクロールに適しています）
-## APIs
+## API
-### Grid
+### Grid {#grid}
-The container directive that provides keyboard navigation and focus management for rows and cells.
+行とセルのキーボードナビゲーションとフォーカス管理を提供するコンテナディレクティブです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------------------- | ------------------------------------ | ---------- | ------------------------------------------------------------- |
-| `enableSelection` | `boolean` | `false` | Whether selection is enabled for the grid |
-| `disabled` | `boolean` | `false` | Disables the entire grid |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled cells are focusable but not interactive |
-| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the grid |
-| `rowWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along rows |
-| `colWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along columns |
-| `multi` | `boolean` | `false` | Whether multiple cells can be selected |
-| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether selection follows focus or requires explicit action |
-| `enableRangeSelection` | `boolean` | `false` | Enable range selections with modifier keys or dragging |
+| `enableSelection` | `boolean` | `false` | グリッドの選択が有効かどうか |
+| `disabled` | `boolean` | `false` | グリッド全体を無効にします |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたセルはフォーカス可能ですが、インタラクティブではありません |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | グリッドで使用されるフォーカス戦略 |
+| `rowWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | 行に沿ったナビゲーションの折り返し動作 |
+| `colWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | 列に沿ったナビゲーションの折り返し動作 |
+| `multi` | `boolean` | `false` | 複数のセルを選択できるかどうか |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | 選択がフォーカスに追従するか、明示的なアクションを必要とするか |
+| `enableRangeSelection` | `boolean` | `false` | 修飾キーまたはドラッグによる範囲選択を有効にします |
-### GridRow
+### GridRow {#gridrow}
-Represents a row within a grid and serves as a container for grid cells.
+グリッド内の行を表し、グリッドセルのコンテナとして機能します。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | -------- | ------- | ------------------------------------- |
-| `rowIndex` | `number` | auto | The index of this row within the grid |
+| `rowIndex` | `number` | auto | グリッド内でのこの行のインデックス |
-### GridCell
+### GridCell {#gridcell}
-Represents an individual cell within a grid row.
+グリッド行内の個々のセルを表します。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ------------- | ---------------------------- | -------------- | ------------------------------------------------------- |
-| `id` | `string` | auto | Unique identifier for the cell |
-| `role` | `string` | `'gridcell'` | Cell role: `gridcell`, `columnheader`, or `rowheader` |
-| `disabled` | `boolean` | `false` | Disables this cell |
-| `selected` | `boolean` | `false` | Whether the cell is selected (supports two-way binding) |
-| `selectable` | `boolean` | `true` | Whether the cell can be selected |
-| `rowSpan` | `number` | — | Number of rows the cell spans |
-| `colSpan` | `number` | — | Number of columns the cell spans |
-| `rowIndex` | `number` | — | Row index of the cell |
-| `colIndex` | `number` | — | Column index of the cell |
-| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Orientation for widgets within the cell |
-| `wrap` | `boolean` | `true` | Whether widget navigation wraps within the cell |
-
-#### Signals
-
-| Property | Type | Description |
+| `id` | `string` | auto | セルの一意の識別子 |
+| `role` | `string` | `'gridcell'` | セルのロール: `gridcell`、`columnheader`、または`rowheader` |
+| `disabled` | `boolean` | `false` | このセルを無効にします |
+| `selected` | `boolean` | `false` | セルが選択されているかどうか (双方向バインディングをサポート) |
+| `selectable` | `boolean` | `true` | セルが選択可能かどうか |
+| `rowSpan` | `number` | — | セルがまたがる行の数 |
+| `colSpan` | `number` | — | セルがまたがる列の数 |
+| `rowIndex` | `number` | — | セルの行インデックス |
+| `colIndex` | `number` | — | セルの列インデックス |
+| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | セル内のウィジェットの方向 |
+| `wrap` | `boolean` | `true` | ウィジェットのナビゲーションがセル内で折り返すかどうか |
+
+#### シグナル {#signals}
+
+| プロパティ | 型 | 説明 |
| -------- | ----------------- | ------------------------------------ |
-| `active` | `Signal` | Whether the cell currently has focus |
+| `active` | `Signal` | セルが現在フォーカスを持っているかどうか |
diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md
new file mode 100644
index 0000000000..0255ee6894
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/listbox.en.md
@@ -0,0 +1,188 @@
+
+
+
+## Overview
+
+A directive that displays a list of options for users to select from, supporting keyboard navigation, single or multiple selection, and screen reader support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Listbox is a foundational directive used by the [Select](guide/aria/select), [Multiselect](guide/aria/multiselect), and [Autocomplete](guide/aria/autocomplete) patterns. For most dropdown needs, use those documented patterns instead.
+
+Consider using listbox directly when:
+
+- **Building custom selection components** - Creating specialized interfaces with specific behavior
+- **Visible selection lists** - Displaying selectable items directly on the page (not in dropdowns)
+- **Custom integration patterns** - Integrating with unique popup or layout requirements
+
+Avoid listbox when:
+
+- **Navigation menus are needed** - Use the [Menu](guide/aria/menu) directive for actions and commands
+
+## Features
+
+Angular's listbox provides a fully accessible list implementation with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter or Space
+- **Screen Reader Support** - Built-in ARIA attributes including role="listbox"
+- **Single or Multiple Selection** - `multi` attribute controls selection mode
+- **Horizontal or Vertical** - `orientation` attribute for layout direction
+- **Type-ahead Search** - Type characters to jump to matching options
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+
+## Examples
+
+### Basic listbox
+
+Applications sometimes need selectable lists visible directly on the page rather than hidden in a dropdown. A standalone listbox provides keyboard navigation and selection for these visible list interfaces.
+
+
+
+
+
+
+The `values` model signal provides two-way binding to the selected items. With `selectionMode="explicit"`, users press Space or Enter to select options. For dropdown patterns that combine listbox with combobox and overlay positioning, see the [Select](guide/aria/select) pattern.
+
+### Horizontal listbox
+
+Lists sometimes work better horizontally, such as toolbar-like interfaces or tab-style selections. The `orientation` attribute changes both the layout and keyboard navigation direction.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+With `orientation="horizontal"`, left and right arrow keys navigate between options instead of up and down. The listbox automatically handles right-to-left (RTL) languages by reversing navigation direction.
+
+### Selection modes
+
+Listbox supports two selection modes that control when items become selected. Choose the mode that matches your interface's interaction pattern.
+
+
+
+
+
+
+The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection.
+
+## APIs
+
+### Listbox Directive
+
+The `ngListbox` directive creates an accessible list of selectable options.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------------- | ---------------------------------- | ------------ | -------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the listbox |
+| `multi` | `boolean` | `false` | Enables multiple selection |
+| `orientation` | `'vertical'` \| `'horizontal'` | `'vertical'` | Layout direction of the list |
+| `wrap` | `boolean` | `true` | Whether focus wraps at list edges |
+| `selectionMode` | `'follow'` \| `'explicit'` | `'follow'` | How selection is triggered |
+| `focusMode` | `'roving'` \| `'activedescendant'` | `'roving'` | Focus management strategy |
+| `softDisabled` | `boolean` | `true` | Whether disabled items are focusable |
+| `disabled` | `boolean` | `false` | Disables the entire listbox |
+| `readonly` | `boolean` | `false` | Makes listbox readonly |
+| `typeaheadDelay` | `number` | `500` | Milliseconds before type-ahead search resets |
+
+#### Model
+
+| Property | Type | Description |
+| -------- | ----- | ----------------------------------------- |
+| `values` | `V[]` | Two-way bindable array of selected values |
+
+#### Signals
+
+| Property | Type | Description |
+| -------- | ------------- | ------------------------------------- |
+| `values` | `Signal` | Currently selected values as a signal |
+
+#### Methods
+
+| Method | Parameters | Description |
+| -------------------------- | --------------------------------- | ------------------------------------------ |
+| `scrollActiveItemIntoView` | `options?: ScrollIntoViewOptions` | Scrolls the active item into view |
+| `gotoFirst` | none | Navigates to the first item in the listbox |
+
+### Option Directive
+
+The `ngOption` directive marks an item within a listbox.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ------------------------------------------------ |
+| `id` | `string` | auto | Unique identifier for the option |
+| `value` | `V` | - | The value associated with this option (required) |
+| `label` | `string` | - | Optional label for screen readers |
+| `disabled` | `boolean` | `false` | Whether this option is disabled |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------- |
+| `selected` | `Signal` | Whether this option is selected |
+| `active` | `Signal` | Whether this option has focus |
+
+### Related patterns
+
+Listbox is used by these documented dropdown patterns:
+
+- **[Select](guide/aria/select)** - Single-selection dropdown pattern using readonly combobox + listbox
+- **[Multiselect](guide/aria/multiselect)** - Multiple-selection dropdown pattern using readonly combobox + listbox with `multi`
+- **[Autocomplete](guide/aria/autocomplete)** - Filterable dropdown pattern using combobox + listbox
+
+For complete dropdown patterns with trigger, popup, and overlay positioning, see those pattern guides instead of using listbox alone.
+
+
+
+
+
diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md
index 0255ee6894..0e6fa9e2f8 100644
--- a/adev-ja/src/content/guide/aria/listbox.md
+++ b/adev-ja/src/content/guide/aria/listbox.md
@@ -1,12 +1,12 @@
-
+
-## Overview
+## 概要 {#overview}
-A directive that displays a list of options for users to select from, supporting keyboard navigation, single or multiple selection, and screen reader support.
+ユーザーが選択するためのオプションのリストを表示するディレクティブで、キーボードナビゲーション、単一または複数選択、スクリーンリーダーをサポートしています。
-
+
@@ -22,7 +22,7 @@ A directive that displays a list of options for users to select from, supporting
-
+
@@ -31,47 +31,47 @@ A directive that displays a list of options for users to select from, supporting
-## Usage
+## 使い方 {#usage}
-Listbox is a foundational directive used by the [Select](guide/aria/select), [Multiselect](guide/aria/multiselect), and [Autocomplete](guide/aria/autocomplete) patterns. For most dropdown needs, use those documented patterns instead.
+Listboxは、[Select](guide/aria/select)、[Multiselect](guide/aria/multiselect)、[Autocomplete](guide/aria/autocomplete)の各パターンで使用される基本的なディレクティブです。ほとんどのドロップダウンのニーズには、代わりにこれらのドキュメント化されたパターンを使用してください。
-Consider using listbox directly when:
+次のような場合は、listboxを直接使用することを検討してください:
-- **Building custom selection components** - Creating specialized interfaces with specific behavior
-- **Visible selection lists** - Displaying selectable items directly on the page (not in dropdowns)
-- **Custom integration patterns** - Integrating with unique popup or layout requirements
+- **カスタム選択コンポーネントの構築** - 特定の動作を持つ特殊なインターフェースを作成する
+- **可視の選択リスト** - 選択可能な項目を（ドロップダウンではなく）ページに直接表示する
+- **カスタム統合パターン** - 独自のポップアップやレイアウト要件と統合する
-Avoid listbox when:
+次のような場合は、listboxの使用を避けてください:
-- **Navigation menus are needed** - Use the [Menu](guide/aria/menu) directive for actions and commands
+- **ナビゲーションメニューが必要な場合** - アクションやコマンドには[Menu](guide/aria/menu)ディレクティブを使用してください
-## Features
+## 機能 {#features}
-Angular's listbox provides a fully accessible list implementation with:
+Angularのリストボックスは、以下の機能を備えた完全にアクセシブルなリスト実装を提供します:
-- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter or Space
-- **Screen Reader Support** - Built-in ARIA attributes including role="listbox"
-- **Single or Multiple Selection** - `multi` attribute controls selection mode
-- **Horizontal or Vertical** - `orientation` attribute for layout direction
-- **Type-ahead Search** - Type characters to jump to matching options
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **キーボードナビゲーション** - 矢印キーでオプションを移動し、EnterキーまたはSpaceキーで選択
+- **スクリーンリーダーのサポート** - `role="listbox"`を含む組み込みのARIA属性
+- **単一選択または複数選択** - `multi`属性で選択モードを制御
+- **水平または垂直** - `orientation`属性でレイアウト方向を指定
+- **先行入力による検索** - 文字を入力して一致するオプションにジャンプ
+- **シグナルベースのリアクティビティ** - Angularシグナルを使用したリアクティブな状態管理
-## Examples
+## 例 {#examples}
-### Basic listbox
+### 基本的なリストボックス {#basic-listbox}
-Applications sometimes need selectable lists visible directly on the page rather than hidden in a dropdown. A standalone listbox provides keyboard navigation and selection for these visible list interfaces.
+アプリケーションでは、ドロップダウンに隠すのではなく、ページ上に直接表示される選択可能なリストが必要になることがあります。スタンドアロンのリストボックスは、これらの表示されるリストインターフェースに対して、キーボードによるナビゲーションと選択機能を提供します。
-The `values` model signal provides two-way binding to the selected items. With `selectionMode="explicit"`, users press Space or Enter to select options. For dropdown patterns that combine listbox with combobox and overlay positioning, see the [Select](guide/aria/select) pattern.
+`values`モデルシグナルは、選択されたアイテムへの双方向バインディングを提供します。`selectionMode="explicit"`では、ユーザーはSpaceキーまたはEnterキーを押してオプションを選択します。リストボックスとコンボボックス、オーバーレイ配置を組み合わせたドロップダウンパターンについては、[Select](guide/aria/select)パターンを参照してください。
-### Horizontal listbox
+### 水平リストボックス {#horizontal-listbox}
-Lists sometimes work better horizontally, such as toolbar-like interfaces or tab-style selections. The `orientation` attribute changes both the layout and keyboard navigation direction.
+ツールバーのようなインターフェースやタブ形式の選択など、リストは水平方向に配置した方がうまく機能する場合があります。`orientation`属性は、レイアウトとキーボードナビゲーションの方向の両方を変更します。
@@ -99,88 +99,88 @@ Lists sometimes work better horizontally, such as toolbar-like interfaces or tab
-With `orientation="horizontal"`, left and right arrow keys navigate between options instead of up and down. The listbox automatically handles right-to-left (RTL) languages by reversing navigation direction.
+`orientation="horizontal"`の場合、上下の矢印キーの代わりに、左右の矢印キーでオプション間を移動します。リストボックスは、ナビゲーションの方向を反転させることで、右から左へ記述する言語 (RTL) に自動的に対応します。
-### Selection modes
+### 選択モード {#selection-modes}
-Listbox supports two selection modes that control when items become selected. Choose the mode that matches your interface's interaction pattern.
+リストボックスは、アイテムがいつ選択されるかを制御する2つの選択モードをサポートしています。インターフェースのインタラクションパターンに合ったモードを選択してください。
-The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection.
+`'follow'`モードはフォーカスされたアイテムを自動的に選択し、選択が頻繁に変わる場合に、より速いインタラクションを提供します。`'explicit'`モードでは、選択を確定するためにSpaceキーまたはEnterキーが必要で、ナビゲーション中の意図しない変更を防ぎます。ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。
-## APIs
+## API
-### Listbox Directive
+### Listboxディレクティブ {#listbox-directive}
-The `ngListbox` directive creates an accessible list of selectable options.
+`ngListbox`ディレクティブは、選択可能なオプションのアクセシブルなリストを作成します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------------- | ---------------------------------- | ------------ | -------------------------------------------- |
-| `id` | `string` | auto | Unique identifier for the listbox |
-| `multi` | `boolean` | `false` | Enables multiple selection |
-| `orientation` | `'vertical'` \| `'horizontal'` | `'vertical'` | Layout direction of the list |
-| `wrap` | `boolean` | `true` | Whether focus wraps at list edges |
-| `selectionMode` | `'follow'` \| `'explicit'` | `'follow'` | How selection is triggered |
-| `focusMode` | `'roving'` \| `'activedescendant'` | `'roving'` | Focus management strategy |
-| `softDisabled` | `boolean` | `true` | Whether disabled items are focusable |
-| `disabled` | `boolean` | `false` | Disables the entire listbox |
-| `readonly` | `boolean` | `false` | Makes listbox readonly |
-| `typeaheadDelay` | `number` | `500` | Milliseconds before type-ahead search resets |
-
-#### Model
-
-| Property | Type | Description |
-| -------- | ----- | ----------------------------------------- |
-| `values` | `V[]` | Two-way bindable array of selected values |
-
-#### Signals
-
-| Property | Type | Description |
+| `id` | `string` | auto | リストボックスの一意の識別子 |
+| `multi` | `boolean` | `false` | 複数選択を有効にします |
+| `orientation` | `'vertical'` \| `'horizontal'` | `'vertical'` | リストのレイアウト方向 |
+| `wrap` | `boolean` | `true` | リストの端でフォーカスをラップするかどうか |
+| `selectionMode` | `'follow'` \| `'explicit'` | `'follow'` | 選択がどのようにトリガーされるか |
+| `focusMode` | `'roving'` \| `'activedescendant'` | `'roving'` | フォーカス管理戦略 |
+| `softDisabled` | `boolean` | `true` | 無効化されたアイテムがフォーカス可能かどうか |
+| `disabled` | `boolean` | `false` | リストボックス全体を無効にします |
+| `readonly` | `boolean` | `false` | リストボックスを読み取り専用にします |
+| `typeaheadDelay` | `number` | `500` | 先行入力の検索がリセットされるまでのミリ秒 |
+
+#### モデル {#model}
+
+| プロパティ | 型 | 説明 |
+| -------- | ----- | ------------------------------------------ |
+| `values` | `V[]` | 選択された値の双方向バインディング可能な配列 |
+
+#### シグナル {#signals}
+
+| プロパティ | 型 | 説明 |
| -------- | ------------- | ------------------------------------- |
-| `values` | `Signal` | Currently selected values as a signal |
+| `values` | `Signal` | 現在選択されている値（シグナルとして） |
-#### Methods
+#### メソッド {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| -------------------------- | --------------------------------- | ------------------------------------------ |
-| `scrollActiveItemIntoView` | `options?: ScrollIntoViewOptions` | Scrolls the active item into view |
-| `gotoFirst` | none | Navigates to the first item in the listbox |
+| `scrollActiveItemIntoView` | `options?: ScrollIntoViewOptions` | アクティブなアイテムを表示領域にスクロールします |
+| `gotoFirst` | none | リストボックスの最初のアイテムに移動します |
-### Option Directive
+### Optionディレクティブ {#option-directive}
-The `ngOption` directive marks an item within a listbox.
+`ngOption`ディレクティブは、リストボックス内のアイテムをマークします。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ------------------------------------------------ |
-| `id` | `string` | auto | Unique identifier for the option |
-| `value` | `V` | - | The value associated with this option (required) |
-| `label` | `string` | - | Optional label for screen readers |
-| `disabled` | `boolean` | `false` | Whether this option is disabled |
+| `id` | `string` | auto | オプションの一意の識別子 |
+| `value` | `V` | - | このオプションに関連付けられた値（必須） |
+| `label` | `string` | - | スクリーンリーダー用のオプションのラベル |
+| `disabled` | `boolean` | `false` | このオプションが無効かどうか |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| ---------- | ----------------- | ------------------------------- |
-| `selected` | `Signal` | Whether this option is selected |
-| `active` | `Signal` | Whether this option has focus |
+| `selected` | `Signal` | このオプションが選択されているかどうか |
+| `active` | `Signal` | このオプションにフォーカスがあるかどうか |
-### Related patterns
+### 関連パターン {#related-patterns}
-Listbox is used by these documented dropdown patterns:
+Listboxは、これらのドキュメント化されたドロップダウンパターンで使用されます：
-- **[Select](guide/aria/select)** - Single-selection dropdown pattern using readonly combobox + listbox
-- **[Multiselect](guide/aria/multiselect)** - Multiple-selection dropdown pattern using readonly combobox + listbox with `multi`
-- **[Autocomplete](guide/aria/autocomplete)** - Filterable dropdown pattern using combobox + listbox
+- **[Select](guide/aria/select)** - 読み取り専用のcombobox + listboxを使用した単一選択のドロップダウンパターン
+- **[Multiselect](guide/aria/multiselect)** - `multi`を使用した読み取り専用のcombobox + listboxによる複数選択のドロップダウンパターン
+- **[Autocomplete](guide/aria/autocomplete)** - combobox + listboxを使用したフィルタリング可能なドロップダウンパターン
-For complete dropdown patterns with trigger, popup, and overlay positioning, see those pattern guides instead of using listbox alone.
+トリガー、ポップアップ、オーバーレイの配置を含む完全なドロップダウンパターンについては、listboxを単独で使用するのではなく、それらのパターンガイドを参照してください。
diff --git a/adev-ja/src/content/guide/aria/menu.en.md b/adev-ja/src/content/guide/aria/menu.en.md
new file mode 100644
index 0000000000..444325cfd2
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/menu.en.md
@@ -0,0 +1,258 @@
+
+
+
+
+
+
+
+
+## Overview
+
+A menu offers a list of actions or options to users, typically appearing in response to a button click or right-click. Menus support keyboard navigation with arrow keys, submenus, checkboxes, radio buttons, and disabled items.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Menus work well for presenting lists of actions or commands that users can choose from.
+
+**Use menus when:**
+
+- Building application command menus (File, Edit, View)
+- Creating context menus (right-click actions)
+- Showing dropdown action lists
+- Implementing toolbar dropdowns
+- Organizing settings or options
+
+**Avoid menus when:**
+
+- Building site navigation (use navigation landmarks instead)
+- Creating form selects (use the [Select](guide/aria/select) component)
+- Switching between content panels (use [Tabs](guide/aria/tabs))
+- Showing collapsible content (use [Accordion](guide/aria/accordion))
+
+## Features
+
+- **Keyboard navigation** - Arrow keys, Home/End, and character search for efficient navigation
+- **Submenus** - Nested menu support with automatic positioning
+- **Menu types** - Standalone menus, triggered menus, and menubars
+- **Checkboxes and radios** - Toggle and selection menu items
+- **Disabled items** - Soft or hard disabled states with focus management
+- **Auto-close behavior** - Configurable close on selection
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Menu with trigger
+
+Create a dropdown menu by pairing a trigger button with a menu. The trigger opens and closes the menu.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The menu automatically closes when a user selects an item or presses Escape.
+
+### Context menu
+
+Context menus appear at the cursor position when users right-click an element.
+
+
+
+
+
+
+Position the menu using the `contextmenu` event coordinates.
+
+### Standalone menu
+
+A standalone menu doesn't require a trigger and remains visible in the interface.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Standalone menus work well for always-visible action lists or navigation.
+
+### Disabled menu items
+
+Disable specific menu items using the `disabled` input. Control focus behavior with `softDisabled`.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When `[softDisabled]="true"`, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## APIs
+
+### Menu
+
+The container directive for menu items.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables all items in the menu |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------------- | ---------- | ---------------------------------- |
+| `close` | none | Closes the menu |
+| `focusFirstItem` | none | Moves focus to the first menu item |
+
+### MenuBar
+
+A horizontal container for multiple menus.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables the entire menubar |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+
+### MenuItem
+
+An individual item within a menu.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ------------ | --------- | ------- | ---------------------------------------------------- |
+| `value` | `any` | — | **Required.** Value for this item |
+| `disabled` | `boolean` | `false` | Disables this menu item |
+| `submenu` | `Menu` | — | Reference to a submenu |
+| `searchTerm` | `string` | `''` | Search term for typeahead (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------------ |
+| `active` | `Signal` | Whether the item currently has focus |
+| `expanded` | `Signal` | Whether the submenu is expanded |
+| `hasPopup` | `Signal` | Whether the item has an associated submenu |
+
+NOTE: MenuItem does not expose public methods. Use the `submenu` input to associate submenus with menu items.
+
+### MenuTrigger
+
+A button or element that opens a menu.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------ |
+| `menu` | `Menu` | — | **Required.** The menu to trigger |
+| `disabled` | `boolean` | `false` | Disables the trigger |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled trigger is focusable |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------------ |
+| `expanded` | `Signal` | Whether the menu is currently open |
+| `hasPopup` | `Signal` | Whether the trigger has an associated menu |
+
+#### Methods
+
+| Method | Parameters | Description |
+| -------- | ---------- | ---------------------------- |
+| `open` | none | Opens the menu |
+| `close` | none | Closes the menu |
+| `toggle` | none | Toggles the menu open/closed |
diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md
index 444325cfd2..c9bbe91404 100644
--- a/adev-ja/src/content/guide/aria/menu.md
+++ b/adev-ja/src/content/guide/aria/menu.md
@@ -1,17 +1,17 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-A menu offers a list of actions or options to users, typically appearing in response to a button click or right-click. Menus support keyboard navigation with arrow keys, submenus, checkboxes, radio buttons, and disabled items.
+メニューは、ユーザーにアクションやオプションのリストを提供し、通常はボタンのクリックや右クリックに応じて表示されます。メニューは、矢印キーによるキーボードナビゲーション、サブメニュー、チェックボックス、ラジオボタン、無効化されたアイテムをサポートしています。
-
+
@@ -27,7 +27,7 @@ A menu offers a list of actions or options to users, typically appearing in resp
-
+
@@ -36,40 +36,40 @@ A menu offers a list of actions or options to users, typically appearing in resp
-## Usage
+## 使い方 {#usage}
-Menus work well for presenting lists of actions or commands that users can choose from.
+メニューは、ユーザーが選択できるアクションやコマンドのリストを提示するのに適しています。
-**Use menus when:**
+**メニューを使用する場合:**
-- Building application command menus (File, Edit, View)
-- Creating context menus (right-click actions)
-- Showing dropdown action lists
-- Implementing toolbar dropdowns
-- Organizing settings or options
+- アプリケーションのコマンドメニュー(File、Edit、View)を構築する場合
+- コンテキストメニュー(右クリックアクション)を作成する場合
+- ドロップダウンのアクションリストを表示する場合
+- ツールバーのドロップダウンを実装する場合
+- 設定やオプションを整理する場合
-**Avoid menus when:**
+**メニューを避けるべき場合:**
-- Building site navigation (use navigation landmarks instead)
-- Creating form selects (use the [Select](guide/aria/select) component)
-- Switching between content panels (use [Tabs](guide/aria/tabs))
-- Showing collapsible content (use [Accordion](guide/aria/accordion))
+- サイトナビゲーションを構築する場合(代わりにナビゲーションランドマークを使用してください)
+- フォームのセレクトを作成する場合([Select](guide/aria/select)コンポーネントを使用してください)
+- コンテンツパネルを切り替える場合([Tabs](guide/aria/tabs)を使用してください)
+- 折りたたみ可能なコンテンツを表示する場合([Accordion](guide/aria/accordion)を使用してください)
-## Features
+## 機能 {#features}
-- **Keyboard navigation** - Arrow keys, Home/End, and character search for efficient navigation
-- **Submenus** - Nested menu support with automatic positioning
-- **Menu types** - Standalone menus, triggered menus, and menubars
-- **Checkboxes and radios** - Toggle and selection menu items
-- **Disabled items** - Soft or hard disabled states with focus management
-- **Auto-close behavior** - Configurable close on selection
-- **RTL support** - Right-to-left language navigation
+- **キーボードナビゲーション** - 矢印キー、Home/End、文字検索による効率的なナビゲーション
+- **サブメニュー** - 自動配置の機能を備えたネストされたメニューのサポート
+- **メニュータイプ** - スタンドアロンメニュー、トリガーメニュー、メニューバー
+- **チェックボックスとラジオボタン** - トグルおよび選択メニューアイテム
+- **無効化されたアイテム** - フォーカス管理を備えたソフトまたはハードな無効状態
+- **自動クローズ動作** - 選択時に閉じる設定が可能
+- **RTLサポート** - 右から左へ記述する言語のナビゲーション
-## Examples
+## 例 {#examples}
-### Menu with trigger
+### トリガー付きメニュー {#menu-with-trigger}
-Create a dropdown menu by pairing a trigger button with a menu. The trigger opens and closes the menu.
+トリガーボタンとメニューを組み合わせることで、ドロップダウンメニューを作成します。トリガーはメニューを開閉します。
@@ -97,22 +97,22 @@ Create a dropdown menu by pairing a trigger button with a menu. The trigger open
-The menu automatically closes when a user selects an item or presses Escape.
+ユーザーがアイテムを選択するかEscapeキーを押すと、メニューは自動的に閉じます。
-### Context menu
+### コンテキストメニュー {#context-menu}
-Context menus appear at the cursor position when users right-click an element.
+コンテキストメニューは、ユーザーが要素を右クリックしたときにカーソル位置に表示されます。
-Position the menu using the `contextmenu` event coordinates.
+`contextmenu`イベントの座標を使用してメニューを配置します。
-### Standalone menu
+### スタンドアロンメニュー {#standalone-menu}
-A standalone menu doesn't require a trigger and remains visible in the interface.
+スタンドアロンメニューはトリガーを必要とせず、インターフェース上で常に表示されたままになります。
@@ -140,11 +140,11 @@ A standalone menu doesn't require a trigger and remains visible in the interface
-Standalone menus work well for always-visible action lists or navigation.
+スタンドアロンメニューは、常に表示されるアクションリストやナビゲーションに適しています。
-### Disabled menu items
+### 無効化されたメニューアイテム {#disabled-menu-items}
-Disable specific menu items using the `disabled` input. Control focus behavior with `softDisabled`.
+`disabled`入力を使用して特定のメニューアイテムを無効にします。`softDisabled`でフォーカスの動作を制御します。
@@ -172,87 +172,87 @@ Disable specific menu items using the `disabled` input. Control focus behavior w
-When `[softDisabled]="true"`, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+`[softDisabled]="true"`の場合、無効化されたアイテムはフォーカスを受け取ることができますが、アクティブにできません。`[softDisabled]="false"`の場合、無効化されたアイテムはキーボードナビゲーション中にスキップされます。
-## APIs
+## API {#apis}
-### Menu
+### Menu {#menu}
-The container directive for menu items.
+メニューアイテムのコンテナディレクティブです。
-#### Inputs
+#### 入力 {#inputs}
| Property | Type | Default | Description |
| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables all items in the menu |
-| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+| `disabled` | `boolean` | `false` | メニュー内のすべてのアイテムを無効にします |
+| `wrap` | `boolean` | `true` | キーボードナビゲーションが端で折り返すかどうか |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-#### Methods
+#### メソッド {#methods}
| Method | Parameters | Description |
| ---------------- | ---------- | ---------------------------------- |
-| `close` | none | Closes the menu |
-| `focusFirstItem` | none | Moves focus to the first menu item |
+| `close` | none | メニューを閉じます |
+| `focusFirstItem` | none | 最初のメニューアイテムにフォーカスを移動します |
-### MenuBar
+### MenuBar {#menubar}
-A horizontal container for multiple menus.
+複数のメニューを格納する水平コンテナです。
-#### Inputs
+#### 入力 {#inputs}
| Property | Type | Default | Description |
| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables the entire menubar |
-| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+| `disabled` | `boolean` | `false` | メニューバー全体を無効にします |
+| `wrap` | `boolean` | `true` | キーボードナビゲーションが端で折り返すかどうか |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-### MenuItem
+### MenuItem {#menuitem}
-An individual item within a menu.
+メニュー内の個々のアイテムです。
-#### Inputs
+#### 入力 {#inputs}
| Property | Type | Default | Description |
| ------------ | --------- | ------- | ---------------------------------------------------- |
-| `value` | `any` | — | **Required.** Value for this item |
-| `disabled` | `boolean` | `false` | Disables this menu item |
-| `submenu` | `Menu` | — | Reference to a submenu |
-| `searchTerm` | `string` | `''` | Search term for typeahead (supports two-way binding) |
+| `value` | `any` | — | **必須。** このアイテムの値です |
+| `disabled` | `boolean` | `false` | このメニューアイテムを無効にします |
+| `submenu` | `Menu` | — | サブメニューへの参照です |
+| `searchTerm` | `string` | `''` | タイプアヘッドの検索語です（双方向バインディングをサポート） |
-#### Signals
+#### シグナル {#signals}
| Property | Type | Description |
| ---------- | ----------------- | ------------------------------------------ |
-| `active` | `Signal` | Whether the item currently has focus |
-| `expanded` | `Signal` | Whether the submenu is expanded |
-| `hasPopup` | `Signal` | Whether the item has an associated submenu |
+| `active` | `Signal` | アイテムが現在フォーカスを持っているかどうか |
+| `expanded` | `Signal` | サブメニューが展開されているかどうか |
+| `hasPopup` | `Signal` | アイテムに関連付けられたサブメニューがあるかどうか |
-NOTE: MenuItem does not expose public methods. Use the `submenu` input to associate submenus with menu items.
+NOTE: MenuItemはパブリックメソッドを公開しません。`submenu`入力を使用して、サブメニューをメニューアイテムに関連付けます。
-### MenuTrigger
+### MenuTrigger {#menutrigger}
-A button or element that opens a menu.
+メニューを開くボタンまたは要素です。
-#### Inputs
+#### 入力 {#inputs}
| Property | Type | Default | Description |
| -------------- | --------- | ------- | ------------------------------------------ |
-| `menu` | `Menu` | — | **Required.** The menu to trigger |
-| `disabled` | `boolean` | `false` | Disables the trigger |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled trigger is focusable |
+| `menu` | `Menu` | — | **必須。** トリガーするメニューです |
+| `disabled` | `boolean` | `false` | トリガーを無効にします |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたトリガーはフォーカス可能です |
-#### Signals
+#### シグナル {#signals}
| Property | Type | Description |
| ---------- | ----------------- | ------------------------------------------ |
-| `expanded` | `Signal` | Whether the menu is currently open |
-| `hasPopup` | `Signal` | Whether the trigger has an associated menu |
+| `expanded` | `Signal` | メニューが現在開いているかどうか |
+| `hasPopup` | `Signal` | トリガーに関連付けられたメニューがあるかどうか |
-#### Methods
+#### メソッド {#methods}
| Method | Parameters | Description |
| -------- | ---------- | ---------------------------- |
-| `open` | none | Opens the menu |
-| `close` | none | Closes the menu |
-| `toggle` | none | Toggles the menu open/closed |
+| `open` | none | メニューを開きます |
+| `close` | none | メニューを閉じます |
+| `toggle` | none | メニューの開閉を切り替えます |
diff --git a/adev-ja/src/content/guide/aria/menubar.en.md b/adev-ja/src/content/guide/aria/menubar.en.md
new file mode 100644
index 0000000000..780d7af8b7
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/menubar.en.md
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+
+
+## Overview
+
+The manubar is a horizontal navigation bar that provides persistent access to application menus. Menubars organize commands into logical categories like File, Edit, and View, helping users discover and execute application features through keyboard or mouse interaction.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Menubars work well for organizing application commands into persistent, discoverable navigation.
+
+**Use menubars when:**
+
+- Building application command bars (such as File, Edit, View, Insert, Format)
+- Creating persistent navigation that stays visible across the interface
+- Organizing commands into logical top-level categories
+- Need horizontal menu navigation with keyboard support
+- Building desktop-style application interfaces
+
+**Avoid menubars when:**
+
+- Building dropdown menus for individual actions (use [Menu with trigger](guide/aria/menu) instead)
+- Creating context menus (use [Menu](guide/aria/menu) guide pattern)
+- Simple standalone action lists (use [Menu](guide/aria/menu) instead)
+- Mobile interfaces where horizontal space is limited
+- Navigation belongs in a sidebar or header navigation pattern
+
+## Features
+
+- **Horizontal navigation** - Left/Right arrow keys move between top-level categories
+- **Persistent visibility** - Always visible, not modal or dismissable
+- **Hover-to-open** - Submenus open on hover after first keyboard or click interaction
+- **Nested submenus** - Support multiple levels of menu depth
+- **Keyboard navigation** - Arrow keys, Enter/Space, Escape, and typeahead search
+- **Disabled states** - Disable entire menubar or individual items
+- **RTL support** - Automatic right-to-left language navigation
+
+## Examples
+
+### Basic menubar
+
+A menubar provides persistent access to application commands organized into top-level categories. Users navigate between categories with Left/Right arrows and open menus with Enter or Down arrow.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Press Right arrow to move between File, Edit, and View. Press Enter or Down arrow to open a menu and navigate submenu items with Up/Down arrows.
+
+### Disabled menubar items
+
+Disable specific menu items or the entire menubar to prevent interaction. Control whether disabled items can receive keyboard focus with the `softDisabled` input.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When `[softDisabled]="true"` on the menubar, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+### RTL support
+
+Menubars automatically adapt to right-to-left (RTL) languages. Arrow key navigation reverses direction, and submenus position on the left side.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `dir="rtl"` attribute enables RTL mode. Left arrow moves right, Right arrow moves left, maintaining natural navigation for RTL language users.
+
+## APIs
+
+The menubar pattern uses directives from Angular's Aria library. See the [Menu guide](guide/aria/menu) for complete API documentation.
+
+### MenuBar
+
+The horizontal container for top-level menu items.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables the entire menubar |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps from last to first item |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+
+See the [Menu API documentation](guide/aria/menu#apis) for complete details on all available inputs and signals.
+
+### MenuItem
+
+Individual items within the menubar. Same API as Menu - see [MenuItem](guide/aria/menu#menuitem).
+
+**Menubar-specific behavior:**
+
+- Left/Right arrows navigate between menubar items (vs Up/Down in vertical menus)
+- First keyboard interaction or click enables hover-to-open for submenus
+- Enter or Down arrow opens the submenu and focuses the first item
+- `aria-haspopup="menu"` indicates items with submenus
+
+### MenuTrigger
+
+Not typically used in menubars - MenuItem handles trigger behavior directly when it has an associated submenu. See [MenuTrigger](guide/aria/menu#menutrigger) for standalone menu trigger patterns.
diff --git a/adev-ja/src/content/guide/aria/menubar.md b/adev-ja/src/content/guide/aria/menubar.md
index 780d7af8b7..592af724ee 100644
--- a/adev-ja/src/content/guide/aria/menubar.md
+++ b/adev-ja/src/content/guide/aria/menubar.md
@@ -1,17 +1,17 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-The manubar is a horizontal navigation bar that provides persistent access to application menus. Menubars organize commands into logical categories like File, Edit, and View, helping users discover and execute application features through keyboard or mouse interaction.
+メニューバーは、アプリケーションメニューへの永続的なアクセスを提供する水平ナビゲーションバーです。メニューバーは、ファイル、編集、表示などの論理的なカテゴリーにコマンドを整理し、ユーザーがキーボードやマウスの操作を通じてアプリケーションの機能を発見し、実行するのに役立ちます。
-
+
@@ -19,7 +19,7 @@ The manubar is a horizontal navigation bar that provides persistent access to ap
-
+
@@ -27,7 +27,7 @@ The manubar is a horizontal navigation bar that provides persistent access to ap
-
+
@@ -36,41 +36,41 @@ The manubar is a horizontal navigation bar that provides persistent access to ap
-## Usage
+## 使い方 {#usage}
-Menubars work well for organizing application commands into persistent, discoverable navigation.
+メニューバーは、アプリケーションのコマンドを永続的で発見しやすいナビゲーションに整理するのに適しています。
-**Use menubars when:**
+**メニューバーを使用する場合:**
-- Building application command bars (such as File, Edit, View, Insert, Format)
-- Creating persistent navigation that stays visible across the interface
-- Organizing commands into logical top-level categories
-- Need horizontal menu navigation with keyboard support
-- Building desktop-style application interfaces
+- アプリケーションのコマンドバー(ファイル、編集、表示、挿入、フォーマットなど)を構築する場合
+- インターフェース全体で表示され続ける永続的なナビゲーションを作成する場合
+- コマンドを論理的なトップレベルのカテゴリーに整理する場合
+- キーボードサポート付きの水平メニューナビゲーションが必要な場合
+- デスクトップスタイルのアプリケーションインターフェースを構築する場合
-**Avoid menubars when:**
+**メニューバーを避けるべき場合:**
-- Building dropdown menus for individual actions (use [Menu with trigger](guide/aria/menu) instead)
-- Creating context menus (use [Menu](guide/aria/menu) guide pattern)
-- Simple standalone action lists (use [Menu](guide/aria/menu) instead)
-- Mobile interfaces where horizontal space is limited
-- Navigation belongs in a sidebar or header navigation pattern
+- 個々のアクションのためのドロップダウンメニューを構築する場合(代わりに[トリガー付きMenu](guide/aria/menu)を使用してください)
+- コンテキストメニューを作成する場合([Menu](guide/aria/menu)ガイドパターンを使用してください)
+- シンプルなスタンドアロンのアクションリストの場合(代わりに[Menu](guide/aria/menu)を使用してください)
+- 水平方向のスペースが限られているモバイルインターフェースの場合
+- ナビゲーションがサイドバーまたはヘッダーのナビゲーションパターンに属する場合
-## Features
+## 機能 {#features}
-- **Horizontal navigation** - Left/Right arrow keys move between top-level categories
-- **Persistent visibility** - Always visible, not modal or dismissable
-- **Hover-to-open** - Submenus open on hover after first keyboard or click interaction
-- **Nested submenus** - Support multiple levels of menu depth
-- **Keyboard navigation** - Arrow keys, Enter/Space, Escape, and typeahead search
-- **Disabled states** - Disable entire menubar or individual items
-- **RTL support** - Automatic right-to-left language navigation
+- **水平ナビゲーション** - 左右の矢印キーでトップレベルのカテゴリー間を移動
+- **永続的な可視性** - 常に表示され、モーダルでも非表示でもない
+- **ホバーで開く** - 最初のキーボードまたはクリック操作の後、ホバーでサブメニューが開く
+- **ネストされたサブメニュー** - 複数レベルのメニュー深度をサポート
+- **キーボードナビゲーション** - 矢印キー、Enter/Space、Escape、および先行入力サーチ
+- **無効状態** - メニューバー全体または個々の項目を無効化
+- **RTLサポート** - 右から左へ記述する言語のナビゲーションを自動でサポート
-## Examples
+## 例 {#examples}
-### Basic menubar
+### 基本的なメニューバー {#basic-menubar}
-A menubar provides persistent access to application commands organized into top-level categories. Users navigate between categories with Left/Right arrows and open menus with Enter or Down arrow.
+メニューバーは、トップレベルのカテゴリーに整理されたアプリケーションコマンドへの永続的なアクセスを提供します。ユーザーは左/右矢印キーでカテゴリー間を移動し、Enterキーまたは下矢印キーでメニューを開きます。
@@ -98,11 +98,11 @@ A menubar provides persistent access to application commands organized into top-
-Press Right arrow to move between File, Edit, and View. Press Enter or Down arrow to open a menu and navigate submenu items with Up/Down arrows.
+右矢印キーを押すと、File、Edit、Viewの間を移動します。Enterキーまたは下矢印キーを押すとメニューが開き、上/下矢印キーでサブメニュー項目を操作できます。
-### Disabled menubar items
+### 無効化されたメニューバーアイテム {#disabled-menubar-items}
-Disable specific menu items or the entire menubar to prevent interaction. Control whether disabled items can receive keyboard focus with the `softDisabled` input.
+特定のメニュー項目またはメニューバー全体を無効にして、インタラクションを防ぎます。`softDisabled`入力で、無効化された項目がキーボードフォーカスを受け取れるかどうかを制御します。
@@ -130,11 +130,11 @@ Disable specific menu items or the entire menubar to prevent interaction. Contro
-When `[softDisabled]="true"` on the menubar, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+メニューバーで`[softDisabled]="true"`の場合、無効化された項目はフォーカスを受け取れますが、アクティブにはできません。`[softDisabled]="false"`の場合、無効化された項目はキーボードナビゲーション中にスキップされます。
-### RTL support
+### RTLサポート {#rtl-support}
-Menubars automatically adapt to right-to-left (RTL) languages. Arrow key navigation reverses direction, and submenus position on the left side.
+メニューバーは、右から左へ記述する言語（RTL）に自動的に適応します。矢印キーによるナビゲーションの方向は逆になり、サブメニューは左側に配置されます。
@@ -162,37 +162,37 @@ Menubars automatically adapt to right-to-left (RTL) languages. Arrow key navigat
-The `dir="rtl"` attribute enables RTL mode. Left arrow moves right, Right arrow moves left, maintaining natural navigation for RTL language users.
+`dir="rtl"`属性はRTLモードを有効にします。左矢印キーは右に、右矢印キーは左に移動し、RTL言語のユーザーにとって自然なナビゲーションを維持します。
-## APIs
+## API {#apis}
-The menubar pattern uses directives from Angular's Aria library. See the [Menu guide](guide/aria/menu) for complete API documentation.
+メニューバーパターンはAngularのAriaライブラリのディレクティブを使用します。完全なAPIドキュメントについては、[Menuガイド](guide/aria/menu)を参照してください。
-### MenuBar
+### MenuBar {#menubar}
-The horizontal container for top-level menu items.
+トップレベルのメニューアイテムのための水平コンテナです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables the entire menubar |
-| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps from last to first item |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+| `disabled` | `boolean` | `false` | メニューバー全体を無効にします |
+| `wrap` | `boolean` | `true` | キーボードナビゲーションが最後のアイテムから最初のアイテムにラップするかどうか |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-See the [Menu API documentation](guide/aria/menu#apis) for complete details on all available inputs and signals.
+利用可能なすべての入力とシグナルの詳細については、[Menu APIドキュメント](guide/aria/menu#apis)を参照してください。
-### MenuItem
+### MenuItem {#menuitem}
-Individual items within the menubar. Same API as Menu - see [MenuItem](guide/aria/menu#menuitem).
+メニューバー内の個々のアイテムです。Menuと同じAPIです - [MenuItem](guide/aria/menu#menuitem)を参照してください。
-**Menubar-specific behavior:**
+**メニューバー固有の動作:**
-- Left/Right arrows navigate between menubar items (vs Up/Down in vertical menus)
-- First keyboard interaction or click enables hover-to-open for submenus
-- Enter or Down arrow opens the submenu and focuses the first item
-- `aria-haspopup="menu"` indicates items with submenus
+- 左右の矢印キーでメニューバーのアイテム間を移動します（垂直メニューでは上下）
+- 最初のキーボード操作またはクリックで、サブメニューのホバーで開く機能が有効になります
+- Enterキーまたは下矢印キーでサブメニューを開き、最初のアイテムにフォーカスします
+- `aria-haspopup="menu"`はサブメニューを持つアイテムを示します
-### MenuTrigger
+### MenuTrigger {#menutrigger}
-Not typically used in menubars - MenuItem handles trigger behavior directly when it has an associated submenu. See [MenuTrigger](guide/aria/menu#menutrigger) for standalone menu trigger patterns.
+通常メニューバーでは使用されません - MenuItemは関連するサブメニューがある場合、トリガーの動作を直接処理します。スタンドアロンのメニュートリガーパターンについては、[MenuTrigger](guide/aria/menu#menutrigger)を参照してください。
diff --git a/adev-ja/src/content/guide/aria/multiselect.en.md b/adev-ja/src/content/guide/aria/multiselect.en.md
new file mode 100644
index 0000000000..dc27f4a676
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/multiselect.en.md
@@ -0,0 +1,201 @@
+
+
+
+## Overview
+
+A pattern that combines readonly combobox with multi-enabled listbox to create multiple-selection dropdowns with keyboard navigation and screen reader support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+The multiselect pattern works best when users need to choose multiple related items from a familiar set of options.
+
+Consider using this pattern when:
+
+- **Users need multiple selections** - Tags, categories, filters, or labels where multiple choices apply
+- **The option list is fixed** (fewer than 20 items) - Users can scan options without search
+- **Filtering content** - Multiple criteria can be active simultaneously
+- **Assigning attributes** - Labels, permissions, or features where multiple values make sense
+- **Related choices** - Options that logically work together (such as selecting multiple team members)
+
+Avoid this pattern when:
+
+- **Only single selection is needed** - Use the [Select pattern](guide/aria/select) for simpler single-choice dropdowns
+- **The list has more than 20 items with search needed** - Use the [Autocomplete pattern](guide/aria/autocomplete) with multiselect capability
+- **Most or all options will be selected** - A checklist pattern provides better visibility
+- **Choices are independent binary options** - Individual checkboxes communicate the choices more clearly
+
+## Features
+
+The multiselect pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, toggle with Space, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes including aria-multiselectable
+- **Selection Count Display** - Shows compact "Item + 2 more" pattern for multiple selections
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
+- **Persistent Selection** - Selected options remain visible with checkmarks after selection
+
+## Examples
+
+### Basic multiselect
+
+Users need to select multiple items from a list of options. A readonly combobox paired with a multi-enabled listbox provides familiar multiselect functionality with full accessibility support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `multi` attribute on `ngListbox` enables multiple selection. Press Space to toggle options, and the popup remains open for additional selections. The display shows the first selected item plus a count of remaining selections.
+
+### Multiselect with custom display
+
+Options often need visual indicators like icons or colors to help users identify choices. Custom templates within options allow rich formatting while the display value shows a compact summary.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Each option displays an icon alongside its label. The display value updates to show the first selection's icon and text, followed by a count of additional selections. Selected options show a checkmark for clear visual feedback.
+
+### Controlled selection
+
+Forms sometimes need to limit the number of selections or validate user choices. Programmatic control over selection enables these constraints while maintaining accessibility.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+This example limits selections to three items. When the limit is reached, unselected options become disabled, preventing additional selections. A message informs users about the constraint.
+
+## APIs
+
+The multiselect pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+
+### Combobox Directives
+
+The multiselect pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ----------------------------------------- |
+| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
+| `disabled` | `boolean` | `false` | Disables the entire multiselect |
+
+See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
+
+### Listbox Directives
+
+The multiselect pattern uses `ngListbox` with the `multi` attribute for multiple selection and `ngOption` for each selectable item.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------- | --------- | ------- | ------------------------------------------ |
+| `multi` | `boolean` | `false` | Set to `true` to enable multiple selection |
+
+#### Model
+
+| Property | Type | Description |
+| -------- | ------- | ----------------------------------------- |
+| `values` | `any[]` | Two-way bindable array of selected values |
+
+When `multi` is true, users can select multiple options using Space to toggle selection. The popup remains open after selection, allowing additional choices.
+
+See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
+
+### Positioning
+
+The multiselect pattern integrates with [CDK Overlay](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
diff --git a/adev-ja/src/content/guide/aria/multiselect.md b/adev-ja/src/content/guide/aria/multiselect.md
index dc27f4a676..372f247845 100644
--- a/adev-ja/src/content/guide/aria/multiselect.md
+++ b/adev-ja/src/content/guide/aria/multiselect.md
@@ -1,9 +1,9 @@
-
+
-## Overview
+## 概要 {#overview}
-A pattern that combines readonly combobox with multi-enabled listbox to create multiple-selection dropdowns with keyboard navigation and screen reader support.
+読み取り専用コンボボックスと複数選択が有効なリストボックスを組み合わせて、キーボードナビゲーションとスクリーンリーダーをサポートする複数選択ドロップダウンを作成するパターンです。
@@ -31,41 +31,41 @@ A pattern that combines readonly combobox with multi-enabled listbox to create m
-## Usage
+## 使い方 {#usage}
-The multiselect pattern works best when users need to choose multiple related items from a familiar set of options.
+マルチセレクトパターンは、ユーザーがよく知られた選択肢のセットから複数の関連アイテムを選択する必要がある場合に最も効果的です。
-Consider using this pattern when:
+このパターンは次のような場合に使用を検討してください:
-- **Users need multiple selections** - Tags, categories, filters, or labels where multiple choices apply
-- **The option list is fixed** (fewer than 20 items) - Users can scan options without search
-- **Filtering content** - Multiple criteria can be active simultaneously
-- **Assigning attributes** - Labels, permissions, or features where multiple values make sense
-- **Related choices** - Options that logically work together (such as selecting multiple team members)
+- **ユーザーが複数の選択を必要とする** - 複数の選択肢が適用されるタグ、カテゴリー、フィルター、またはラベル
+- **オプションリストが固定されている** (20項目未満) - ユーザーは検索なしでオプションを一覧できます
+- **コンテンツのフィルタリング** - 複数の基準を同時にアクティブにできます
+- **属性の割り当て** - 複数の値が意味を持つラベル、権限、または機能
+- **関連する選択肢** - 論理的に連携するオプション (複数のチームメンバーを選択するなど)
-Avoid this pattern when:
+このパターンは次のような場合には避けてください:
-- **Only single selection is needed** - Use the [Select pattern](guide/aria/select) for simpler single-choice dropdowns
-- **The list has more than 20 items with search needed** - Use the [Autocomplete pattern](guide/aria/autocomplete) with multiselect capability
-- **Most or all options will be selected** - A checklist pattern provides better visibility
-- **Choices are independent binary options** - Individual checkboxes communicate the choices more clearly
+- **単一選択のみが必要** - よりシンプルな単一選択のドロップダウンには[セレクトパターン](guide/aria/select)を使用してください
+- **リストが20項目以上あり、検索が必要** - マルチセレクト機能付きの[オートコンプリートパターン](guide/aria/autocomplete)を使用してください
+- **ほとんどまたはすべてのオプションが選択される** - チェックリストパターンの方が視認性が高いです
+- **選択肢が独立した二者択一のオプションである** - 個別のチェックボックスの方が選択肢をより明確に伝えます
-## Features
+## 機能 {#features}
-The multiselect pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+マルチセレクトパターンは[Combobox](guide/aria/combobox)と[Listbox](guide/aria/listbox)ディレクティブを組み合わせ、以下の機能を備えた完全にアクセシブルなドロップダウンを提供します:
-- **Keyboard Navigation** - Navigate options with arrow keys, toggle with Space, close with Escape
-- **Screen Reader Support** - Built-in ARIA attributes including aria-multiselectable
-- **Selection Count Display** - Shows compact "Item + 2 more" pattern for multiple selections
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
-- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
-- **Persistent Selection** - Selected options remain visible with checkmarks after selection
+- **キーボードナビゲーション** - 矢印キーでオプションを移動、Spaceキーで切り替え、Escapeキーで閉じます
+- **スクリーンリーダーのサポート** - aria-multiselectableを含む組み込みのARIA属性
+- **選択数の表示** - 複数選択時に「アイテム + 他2件」のようなコンパクトなパターンを表示します
+- **シグナルベースのリアクティビティ** - Angularのシグナルを使用したリアクティブな状態管理
+- **スマートな配置** - CDK Overlayがビューポートの端やスクロールを処理します
+- **永続的な選択** - 選択後も、選択されたオプションはチェックマーク付きで表示されたままになります
-## Examples
+## 例
-### Basic multiselect
+### 基本的な複数選択 {#basic-multiselect}
-Users need to select multiple items from a list of options. A readonly combobox paired with a multi-enabled listbox provides familiar multiselect functionality with full accessibility support.
+ユーザーはオプションのリストから複数のアイテムを選択する必要があります。読み取り専用のコンボボックスと複数選択が有効なリストボックスを組み合わせることで、完全なアクセシビリティサポートを備えた使い慣れた複数選択の機能を提供します。
@@ -93,11 +93,11 @@ Users need to select multiple items from a list of options. A readonly combobox
-The `multi` attribute on `ngListbox` enables multiple selection. Press Space to toggle options, and the popup remains open for additional selections. The display shows the first selected item plus a count of remaining selections.
+`ngListbox`の`multi`属性は複数選択を有効にします。スペースキーを押すとオプションが切り替わり、ポップアップは追加の選択のために開いたままになります。表示には、最初に選択されたアイテムと残りの選択数が表示されます。
-### Multiselect with custom display
+### カスタム表示の複数選択 {#multiselect-with-custom-display}
-Options often need visual indicators like icons or colors to help users identify choices. Custom templates within options allow rich formatting while the display value shows a compact summary.
+オプションには、ユーザーが選択肢を識別しやすくするために、アイコンや色などの視覚的なインジケーターが必要になることがよくあります。オプション内のカスタムテンプレートを使用すると、リッチなフォーマットが可能になり、表示値にはコンパクトなサマリーが表示されます。
@@ -125,11 +125,11 @@ Options often need visual indicators like icons or colors to help users identify
-Each option displays an icon alongside its label. The display value updates to show the first selection's icon and text, followed by a count of additional selections. Selected options show a checkmark for clear visual feedback.
+各オプションには、ラベルの横にアイコンが表示されます。表示値は、最初に選択されたアイテムのアイコンとテキスト、その後に続く追加の選択数を表示するように更新されます。選択されたオプションにはチェックマークが表示され、明確な視覚的フィードバックを提供します。
-### Controlled selection
+### 制御された選択 {#controlled-selection}
-Forms sometimes need to limit the number of selections or validate user choices. Programmatic control over selection enables these constraints while maintaining accessibility.
+フォームでは、選択数を制限したり、ユーザーの選択を検証したりする必要がある場合があります。選択をプログラムで制御することで、アクセシビリティを維持しながらこれらの制約を有効にできます。
@@ -157,45 +157,45 @@ Forms sometimes need to limit the number of selections or validate user choices.
-This example limits selections to three items. When the limit is reached, unselected options become disabled, preventing additional selections. A message informs users about the constraint.
+この例では、選択を3つのアイテムに制限しています。制限に達すると、選択されていないオプションは無効になり、追加の選択ができなくなります。メッセージでユーザーに制約を通知します。
-## APIs
+## API {#apis}
-The multiselect pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+マルチセレクトパターンは、AngularのAriaライブラリから以下のディレクティブを使用します。詳細なAPIドキュメントについては、リンク先のガイドを参照してください。
-### Combobox Directives
+### Comboboxディレクティブ {#combobox-directives}
-The multiselect pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+マルチセレクトパターンでは、`ngCombobox`と`readonly`属性を使用して、キーボードナビゲーションを維持しながらテキスト入力を防ぎます。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ----------------------------------------- |
-| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
-| `disabled` | `boolean` | `false` | Disables the entire multiselect |
+| `readonly` | `boolean` | `false` | `true`に設定するとドロップダウンの動作になります |
+| `disabled` | `boolean` | `false` | マルチセレクト全体を無効化します |
-See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
+利用可能なすべての入力とシグナルの詳細については、[Combobox APIドキュメント](guide/aria/combobox#apis)を参照してください。
-### Listbox Directives
+### Listboxディレクティブ {#listbox-directives}
-The multiselect pattern uses `ngListbox` with the `multi` attribute for multiple selection and `ngOption` for each selectable item.
+マルチセレクトパターンでは、複数選択のために`ngListbox`と`multi`属性を、各選択可能な項目のために`ngOption`を使用します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| -------- | --------- | ------- | ------------------------------------------ |
-| `multi` | `boolean` | `false` | Set to `true` to enable multiple selection |
+| `multi` | `boolean` | `false` | `true`に設定すると複数選択が可能になります |
-#### Model
+#### モデル {#model}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| -------- | ------- | ----------------------------------------- |
-| `values` | `any[]` | Two-way bindable array of selected values |
+| `values` | `any[]` | 選択された値の双方向バインディング可能な配列 |
-When `multi` is true, users can select multiple options using Space to toggle selection. The popup remains open after selection, allowing additional choices.
+`multi`がtrueの場合、ユーザーはスペースキーを使用して選択を切り替えることで、複数のオプションを選択できます。ポップアップは選択後も開いたままで、追加の選択が可能です。
-See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
+リストボックスの設定、選択モード、オプションのプロパティに関する完全な詳細については、[Listbox APIドキュメント](guide/aria/listbox#apis)を参照してください。
-### Positioning
+### ポジショニング {#positioning}
-The multiselect pattern integrates with [CDK Overlay](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
+マルチセレクトパターンは、スマートなポジショニングのために[CDK Overlay](api/cdk/overlay/CdkConnectedOverlay)と統合されています。`cdkConnectedOverlay`を使用すると、ビューポートの端やスクロールを自動的に処理できます。
diff --git a/adev-ja/src/content/guide/aria/radio.en.md b/adev-ja/src/content/guide/aria/radio.en.md
new file mode 100644
index 0000000000..e205adb76b
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/radio.en.md
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+### Example with TailwindCSS
+
+
diff --git a/adev-ja/src/content/guide/aria/radio.md b/adev-ja/src/content/guide/aria/radio.md
index e205adb76b..a82c69fbd0 100644
--- a/adev-ja/src/content/guide/aria/radio.md
+++ b/adev-ja/src/content/guide/aria/radio.md
@@ -1,14 +1,14 @@
-
-
+
+
-
+
-
-### Example with TailwindCSS
+### TailwindCSSを使用した例 {#example-with-tailwindcss}
-
+
diff --git a/adev-ja/src/content/guide/aria/select.en.md b/adev-ja/src/content/guide/aria/select.en.md
new file mode 100644
index 0000000000..fa7f431c4c
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/select.en.md
@@ -0,0 +1,193 @@
+
+
+
+## Overview
+
+A pattern that combines readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+The select pattern works best when users need to choose a single value from a familiar set of options.
+
+Consider using this pattern when:
+
+- **The option list is fixed** (fewer than 20 items) - Users can scan and choose without filtering
+- **Options are familiar** - Users recognize the choices without needing to search
+- **Forms need standard fields** - Country, state, category, or status selection
+- **Settings and configuration** - Dropdown menus for preferences or options
+- **Clear option labels** - Each choice has a distinct, scannable name
+
+Avoid this pattern when:
+
+- **The list has more than 20 items** - Use the [Autocomplete pattern](guide/aria/autocomplete) for better filtering
+- **Users need to search options** - [Autocomplete](guide/aria/autocomplete) provides text input and filtering
+- **Multiple selection is needed** - Use the [Multiselect pattern](guide/aria/multiselect) instead
+- **Very few options exist (2-3)** - Radio buttons provide better visibility of all choices
+
+## Features
+
+The select pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Custom Display** - Show selected values with icons, formatting, or rich content
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+
+## Examples
+
+### Basic select
+
+Users need a standard dropdown to choose from a list of values. A readonly combobox paired with a listbox provides the familiar select experience with full accessibility support.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+The `readonly` attribute on `ngCombobox` prevents text input while preserving keyboard navigation. Users interact with the dropdown using arrow keys and Enter, just like a native select element.
+
+### Select with custom display
+
+Options often need visual indicators like icons or badges to help users identify choices quickly. Custom templates within options allow rich formatting while maintaining accessibility.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Each option displays an icon alongside the label. The selected value updates to show the chosen option's icon and text, providing clear visual feedback.
+
+### Disabled select
+
+Selects can be disabled to prevent user interaction when certain form conditions aren't met. The disabled state provides visual feedback and prevents keyboard interaction.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When disabled, the select shows a disabled visual state and blocks all user interaction. Screen readers announce the disabled state to assistive technology users.
+
+## APIs
+
+The select pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+
+### Combobox Directives
+
+The select pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ----------------------------------------- |
+| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
+| `disabled` | `boolean` | `false` | Disables the entire select |
+
+See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
+
+### Listbox Directives
+
+The select pattern uses `ngListbox` for the dropdown list and `ngOption` for each selectable item.
+
+#### Model
+
+| Property | Type | Description |
+| -------- | ------- | ---------------------------------------------------------------------------- |
+| `values` | `any[]` | Two-way bindable array of selected values (contains single value for select) |
+
+See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
+
+### Positioning
+
+The select pattern integrates with [CDK Overlay](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
diff --git a/adev-ja/src/content/guide/aria/select.md b/adev-ja/src/content/guide/aria/select.md
index fa7f431c4c..f1dbfb0329 100644
--- a/adev-ja/src/content/guide/aria/select.md
+++ b/adev-ja/src/content/guide/aria/select.md
@@ -1,12 +1,12 @@
-
+
-## Overview
+## 概要 {#overview}
-A pattern that combines readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+読み取り専用コンボボックスとリストボックスを組み合わせて、キーボードナビゲーションとスクリーンリーダーをサポートする単一選択ドロップダウンを作成するパターンです。
-
+
@@ -14,7 +14,7 @@ A pattern that combines readonly combobox with listbox to create single-selectio
-
+
@@ -22,7 +22,7 @@ A pattern that combines readonly combobox with listbox to create single-selectio
-
+
@@ -31,41 +31,41 @@ A pattern that combines readonly combobox with listbox to create single-selectio
-## Usage
+## 使い方 {#usage}
-The select pattern works best when users need to choose a single value from a familiar set of options.
+selectパターンは、ユーザーがよく知られた選択肢のセットから単一の値を選択する必要がある場合に最適です。
-Consider using this pattern when:
+次のような場合にこのパターンの使用を検討してください：
-- **The option list is fixed** (fewer than 20 items) - Users can scan and choose without filtering
-- **Options are familiar** - Users recognize the choices without needing to search
-- **Forms need standard fields** - Country, state, category, or status selection
-- **Settings and configuration** - Dropdown menus for preferences or options
-- **Clear option labels** - Each choice has a distinct, scannable name
+- **選択肢のリストが固定されている場合**（20項目未満）- ユーザーはフィルタリングなしで一覧して選択できます
+- **選択肢がよく知られている場合** - ユーザーは検索しなくても選択肢を認識できます
+- **フォームに標準的なフィールドが必要な場合** - 国、州、カテゴリー、またはステータスの選択
+- **設定と構成** - 設定やオプションのためのドロップダウンメニュー
+- **選択肢のラベルが明確な場合** - 各選択肢に、識別しやすく一覧できる名前が付いている
-Avoid this pattern when:
+次のような場合はこのパターンを避けてください：
-- **The list has more than 20 items** - Use the [Autocomplete pattern](guide/aria/autocomplete) for better filtering
-- **Users need to search options** - [Autocomplete](guide/aria/autocomplete) provides text input and filtering
-- **Multiple selection is needed** - Use the [Multiselect pattern](guide/aria/multiselect) instead
-- **Very few options exist (2-3)** - Radio buttons provide better visibility of all choices
+- **リストに20項目以上ある場合** - より良いフィルタリングのために[Autocompleteパターン](guide/aria/autocomplete)を使用してください
+- **ユーザーが選択肢を検索する必要がある場合** - [Autocomplete](guide/aria/autocomplete)はテキスト入力とフィルタリングを提供します
+- **複数選択が必要な場合** - 代わりに[Multiselectパターン](guide/aria/multiselect)を使用してください
+- **選択肢が非常に少ない場合（2〜3個）** - ラジオボタンはすべての選択肢の可視性を高めます
-## Features
+## 機能 {#features}
-The select pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+selectパターンは、[Combobox](guide/aria/combobox)と[Listbox](guide/aria/listbox)ディレクティブを組み合わせて、以下の機能を備えた完全にアクセシブルなドロップダウンを提供します:
-- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
-- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
-- **Custom Display** - Show selected values with icons, formatting, or rich content
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
-- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
-- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+- **キーボードナビゲーション** - 矢印キーでオプションを移動し、Enterで選択、Escapeで閉じます
+- **スクリーンリーダーのサポート** - 支援技術のための組み込みARIA属性
+- **カスタム表示** - 選択された値をアイコン、フォーマット、またはリッチコンテンツで表示します
+- **シグナルベースのリアクティビティ** - Angularシグナルを使用したリアクティブな状態管理
+- **スマートな配置** - CDK Overlayがビューポートの端やスクロールを処理します
+- **双方向テキストのサポート** - 右から左へ記述する言語 (RTL) を自動的に処理します
-## Examples
+## 例
-### Basic select
+### 基本的なセレクト {#basic-select}
-Users need a standard dropdown to choose from a list of values. A readonly combobox paired with a listbox provides the familiar select experience with full accessibility support.
+ユーザーは、値のリストから選択するために標準的なドロップダウンを必要とします。読み取り専用のコンボボックスとリストボックスを組み合わせることで、完全なアクセシビリティサポートを備えた、使い慣れたセレクト体験を提供します。
@@ -93,11 +93,11 @@ Users need a standard dropdown to choose from a list of values. A readonly combo
-The `readonly` attribute on `ngCombobox` prevents text input while preserving keyboard navigation. Users interact with the dropdown using arrow keys and Enter, just like a native select element.
+`ngCombobox`の`readonly`属性は、キーボードナビゲーションを維持しながらテキスト入力を防ぎます。ユーザーは、ネイティブのselect要素と同じように、矢印キーとEnterキーを使用してドロップダウンを操作します。
-### Select with custom display
+### カスタム表示のセレクト {#select-with-custom-display}
-Options often need visual indicators like icons or badges to help users identify choices quickly. Custom templates within options allow rich formatting while maintaining accessibility.
+オプションには、ユーザーが選択肢をすばやく識別できるように、アイコンやバッジなどの視覚的なインジケーターが必要になることがよくあります。オプション内のカスタムテンプレートを使用すると、アクセシビリティを維持しながらリッチなフォーマットが可能になります。
@@ -125,11 +125,11 @@ Options often need visual indicators like icons or badges to help users identify
-Each option displays an icon alongside the label. The selected value updates to show the chosen option's icon and text, providing clear visual feedback.
+各オプションには、ラベルの横にアイコンが表示されます。選択された値は、選択されたオプションのアイコンとテキストを表示するように更新され、明確な視覚的フィードバックを提供します。
-### Disabled select
+### 無効化されたセレクト {#disabled-select}
-Selects can be disabled to prevent user interaction when certain form conditions aren't met. The disabled state provides visual feedback and prevents keyboard interaction.
+特定のフォーム条件が満たされていない場合にユーザーの操作を防ぐために、セレクトを無効にできます。無効状態は、視覚的なフィードバックを提供し、キーボード操作を防ぎます。
@@ -157,37 +157,37 @@ Selects can be disabled to prevent user interaction when certain form conditions
-When disabled, the select shows a disabled visual state and blocks all user interaction. Screen readers announce the disabled state to assistive technology users.
+無効にすると、セレクトは無効の視覚的状態を示し、すべてのユーザー操作をブロックします。スクリーンリーダーは、支援技術のユーザーに無効状態をアナウンスします。
-## APIs
+## API
-The select pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+selectパターンは、AngularのAriaライブラリから以下のディレクティブを使用します。詳細なAPIドキュメントについては、リンク先のガイドを参照してください。
-### Combobox Directives
+### コンボボックスディレクティブ {#combobox-directives}
-The select pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+selectパターンは、キーボードナビゲーションを維持しつつテキスト入力を防ぐために、`readonly`属性を持つ`ngCombobox`を使用します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ----------------------------------------- |
-| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
-| `disabled` | `boolean` | `false` | Disables the entire select |
+| `readonly` | `boolean` | `false` | `true`に設定すると、ドロップダウンの動作になります |
+| `disabled` | `boolean` | `false` | select全体を無効にします |
-See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
+利用可能なすべての入力とシグナルの詳細については、[コンボボックスAPIドキュメント](guide/aria/combobox#apis)を参照してください。
-### Listbox Directives
+### リストボックスディレクティブ {#listbox-directives}
-The select pattern uses `ngListbox` for the dropdown list and `ngOption` for each selectable item.
+selectパターンは、ドロップダウンリストに`ngListbox`を、選択可能な各項目に`ngOption`を使用します。
-#### Model
+#### モデル {#model}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| -------- | ------- | ---------------------------------------------------------------------------- |
-| `values` | `any[]` | Two-way bindable array of selected values (contains single value for select) |
+| `values` | `any[]` | 選択された値の双方向バインディング可能な配列（selectの場合は単一の値を含む） |
-See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
+リストボックスの設定、選択モード、およびオプションのプロパティに関する完全な詳細については、[リストボックスAPIドキュメント](guide/aria/listbox#apis)を参照してください。
-### Positioning
+### ポジショニング {#positioning}
-The select pattern integrates with [CDK Overlay](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
+selectパターンは、スマートなポジショニングのために[CDK Overlay](api/cdk/overlay/CdkConnectedOverlay)と統合されています。ビューポートの端やスクロールを自動的に処理するには`cdkConnectedOverlay`を使用してください。
diff --git a/adev-ja/src/content/guide/aria/tabs.en.md b/adev-ja/src/content/guide/aria/tabs.en.md
new file mode 100644
index 0000000000..29a292c37b
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/tabs.en.md
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
+
+## Overview
+
+Tabs display layered content sections where only one panel is visible at a time. Users switch between panels by clicking tab buttons or using arrow keys to navigate the tab list.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Tabs work well for organizing related content into distinct sections where users switch between different views or categories.
+
+**Use tabs when:**
+
+- Organizing related content into distinct sections
+- Creating settings panels with multiple categories
+- Building documentation with multiple topics
+- Implementing dashboards with different views
+- Showing content where users need to switch contexts
+
+**Avoid tabs when:**
+
+- Building sequential forms or wizards (use a stepper pattern)
+- Navigating between pages (use router navigation)
+- Showing single content sections (no need for tabs)
+- Having more than 7-8 tabs (consider a different layout)
+
+## Features
+
+- **Selection modes** - Tabs activate automatically on focus or require manual activation
+- **Keyboard navigation** - Arrow keys, Home, and End for efficient tab navigation
+- **Orientation** - Horizontal or vertical tab list layouts
+- **Lazy content** - Tab panels render only when first activated
+- **Disabled tabs** - Disable individual tabs with focus management
+- **Focus modes** - Roving tabindex or activedescendant focus strategies
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Selection follows focus
+
+When selection follows focus, tabs activate immediately as you navigate with arrow keys. This provides instant feedback and works well for lightweight content.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Set `[selectionMode]="'follow'"` on the tab list to enable this behavior.
+
+### Manual activation
+
+With manual activation, arrow keys move focus between tabs without changing the selected tab. Users press Space or Enter to activate the focused tab.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Use `[selectionMode]="'explicit'"` for heavy content panels to avoid unnecessary rendering.
+
+### Vertical tabs
+
+Arrange tabs vertically for interfaces like settings panels or navigation sidebars.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Set `[orientation]="'vertical'"` on the tab list. Navigation changes to Up/Down arrow keys.
+
+### Lazy content rendering
+
+Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're first shown.
+
+```angular-html
+
+
+
Tab 1
+
Tab 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+By default, content remains in the DOM after the panel is hidden. Set `[preserveContent]="false"` to remove content when the panel is deactivated.
+
+### Disabled tabs
+
+Disable specific tabs to prevent user interaction. Control whether disabled tabs can receive keyboard focus.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When `[softDisabled]="true"` on the tab list, disabled tabs can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled tabs are skipped during keyboard navigation.
+
+## APIs
+
+### Tabs
+
+The container directive that coordinates tab lists and panels.
+
+This directive has no inputs or outputs. It serves as the root container for `ngTabList`, `ngTab`, and `ngTabPanel` directives.
+
+### TabList
+
+The container for tab buttons that manages selection and keyboard navigation.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| --------------- | ---------------------------- | -------------- | ------------------------------------------------------------------ |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab list layout direction |
+| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first tab |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled tabs are focusable but not activatable |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether tabs activate on focus or require explicit activation |
+| `selectedTab` | `any` | — | The value of the currently selected tab (supports two-way binding) |
+
+### Tab
+
+An individual tab button.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | --------------------------------------- |
+| `value` | `any` | — | **Required.** Unique value for this tab |
+| `disabled` | `boolean` | `false` | Disables this tab |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------- |
+| `selected` | `Signal` | Whether the tab is currently selected |
+| `active` | `Signal` | Whether the tab currently has focus |
+
+### TabPanel
+
+The content panel associated with a tab.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ---------------------------------------------------------- |
+| `value` | `any` | — | **Required.** Must match the `value` of the associated tab |
+| `preserveContent` | `boolean` | `true` | Whether to keep panel content in DOM after deactivation |
+
+#### Signals
+
+| Property | Type | Description |
+| --------- | ----------------- | -------------------------------------- |
+| `visible` | `Signal` | Whether the panel is currently visible |
+
+### TabContent
+
+A structural directive for lazy rendering tab panel content.
+
+This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element inside a tab panel:
+
+```angular-html
+
+
+
+
+
+```
diff --git a/adev-ja/src/content/guide/aria/tabs.md b/adev-ja/src/content/guide/aria/tabs.md
index 29a292c37b..42316daaea 100644
--- a/adev-ja/src/content/guide/aria/tabs.md
+++ b/adev-ja/src/content/guide/aria/tabs.md
@@ -1,17 +1,17 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-Tabs display layered content sections where only one panel is visible at a time. Users switch between panels by clicking tab buttons or using arrow keys to navigate the tab list.
+タブは、一度に1つのパネルのみが表示される階層化されたコンテンツセクションを表示します。ユーザーは、タブボタンをクリックするか、矢印キーを使用してタブリストをナビゲートすることで、パネルを切り替えます。
-
+
@@ -27,7 +27,7 @@ Tabs display layered content sections where only one panel is visible at a time.
-
+
@@ -36,40 +36,40 @@ Tabs display layered content sections where only one panel is visible at a time.
-## Usage
+## 使い方 {#usage}
-Tabs work well for organizing related content into distinct sections where users switch between different views or categories.
+タブは、ユーザーが異なるビューやカテゴリーを切り替える際に、関連するコンテンツを個別のセクションに整理するのに適しています。
-**Use tabs when:**
+**タブを使用する場合：**
-- Organizing related content into distinct sections
-- Creating settings panels with multiple categories
-- Building documentation with multiple topics
-- Implementing dashboards with different views
-- Showing content where users need to switch contexts
+- 関連するコンテンツを個別のセクションに整理する
+- 複数のカテゴリーを持つ設定パネルを作成する
+- 複数のトピックを持つドキュメントを構築する
+- 異なるビューを持つダッシュボードを実装する
+- ユーザーがコンテキストを切り替える必要があるコンテンツを表示する
-**Avoid tabs when:**
+**タブを避ける場合：**
-- Building sequential forms or wizards (use a stepper pattern)
-- Navigating between pages (use router navigation)
-- Showing single content sections (no need for tabs)
-- Having more than 7-8 tabs (consider a different layout)
+- シーケンシャルなフォームやウィザードを構築する（ステッパーパターンを使用）
+- ページ間をナビゲートする（ルーターナビゲーションを使用）
+- 単一のコンテンツセクションを表示する（タブは不要）
+- 7〜8個以上のタブがある（異なるレイアウトを検討）
-## Features
+## 機能 {#features}
-- **Selection modes** - Tabs activate automatically on focus or require manual activation
-- **Keyboard navigation** - Arrow keys, Home, and End for efficient tab navigation
-- **Orientation** - Horizontal or vertical tab list layouts
-- **Lazy content** - Tab panels render only when first activated
-- **Disabled tabs** - Disable individual tabs with focus management
-- **Focus modes** - Roving tabindex or activedescendant focus strategies
-- **RTL support** - Right-to-left language navigation
+- **選択モード** - フォーカス時にタブを自動的にアクティブにするか、手動でのアクティベーションを要求します
+- **キーボードナビゲーション** - 矢印キー、Home、Endキーによる効率的なタブナビゲーション
+- **向き** - 水平または垂直のタブリストレイアウト
+- **遅延コンテンツ** - タブパネルは最初にアクティブになったときにのみレンダリングされます
+- **無効化されたタブ** - フォーカス管理機能付きで個々のタブを無効化します
+- **フォーカスモード** - roving tabindexまたはactivedescendantによるフォーカス戦略
+- **RTLサポート** - 右から左へ記述する言語のナビゲーション
-## Examples
+## 例 {#examples}
-### Selection follows focus
+### フォーカスに追従する選択 {#selection-follows-focus}
-When selection follows focus, tabs activate immediately as you navigate with arrow keys. This provides instant feedback and works well for lightweight content.
+フォーカスに追従する選択では、矢印キーで移動するとタブがすぐにアクティブになります。これにより、即座にフィードバックが得られ、軽量なコンテンツに適しています。
@@ -97,11 +97,11 @@ When selection follows focus, tabs activate immediately as you navigate with arr
-Set `[selectionMode]="'follow'"` on the tab list to enable this behavior.
+この動作を有効にするには、タブリストに `[selectionMode]="'follow'"` を設定します。
-### Manual activation
+### 手動でのアクティブ化 {#manual-activation}
-With manual activation, arrow keys move focus between tabs without changing the selected tab. Users press Space or Enter to activate the focused tab.
+手動でのアクティブ化では、矢印キーは選択されたタブを変更せずにタブ間でフォーカスを移動します。ユーザーはSpaceキーまたはEnterキーを押して、フォーカスされたタブをアクティブにします。
@@ -129,11 +129,11 @@ With manual activation, arrow keys move focus between tabs without changing the
-Use `[selectionMode]="'explicit'"` for heavy content panels to avoid unnecessary rendering.
+重いコンテンツパネルで不要なレンダリングを避けるには、`[selectionMode]="'explicit'"` を使用します。
-### Vertical tabs
+### 垂直タブ {#vertical-tabs}
-Arrange tabs vertically for interfaces like settings panels or navigation sidebars.
+設定パネルやナビゲーションサイドバーのようなインターフェースでは、タブを垂直に配置します。
@@ -161,11 +161,11 @@ Arrange tabs vertically for interfaces like settings panels or navigation sideba
-Set `[orientation]="'vertical'"` on the tab list. Navigation changes to Up/Down arrow keys.
+タブリストに `[orientation]="'vertical'"` を設定します。ナビゲーションは上/下矢印キーに変わります。
-### Lazy content rendering
+### コンテンツの遅延レンダリング {#lazy-content-rendering}
-Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're first shown.
+`ng-template` で `ngTabContent` ディレクティブを使用すると、タブパネルが最初に表示されるまでレンダリングを遅延させることができます。
```angular-html
@@ -176,25 +176,25 @@ Use the `ngTabContent` directive on an `ng-template` to defer rendering tab pane
-
+
-
+
```
-By default, content remains in the DOM after the panel is hidden. Set `[preserveContent]="false"` to remove content when the panel is deactivated.
+デフォルトでは、パネルが非表示になった後もコンテンツはDOMに残ります。パネルが非アクティブ化されたときにコンテンツを削除するには、`[preserveContent]="false"` を設定します。
-### Disabled tabs
+### 無効化されたタブ {#disabled-tabs}
-Disable specific tabs to prevent user interaction. Control whether disabled tabs can receive keyboard focus.
+特定のタブを無効にして、ユーザーの操作を防ぎます。無効化されたタブがキーボードフォーカスを受け取れるかどうかを制御します。
@@ -222,75 +222,75 @@ Disable specific tabs to prevent user interaction. Control whether disabled tabs
-When `[softDisabled]="true"` on the tab list, disabled tabs can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled tabs are skipped during keyboard navigation.
+タブリストで `[softDisabled]="true"` の場合、無効化されたタブはフォーカスを受け取れますが、アクティブにはできません。`[softDisabled]="false"` の場合、無効化されたタブはキーボードナビゲーション中にスキップされます。
-## APIs
+## API
-### Tabs
+### Tabs {#tabs}
-The container directive that coordinates tab lists and panels.
+タブリストとパネルを調整するコンテナディレクティブです。
-This directive has no inputs or outputs. It serves as the root container for `ngTabList`, `ngTab`, and `ngTabPanel` directives.
+このディレクティブには入力と出力がありません。`ngTabList`、`ngTab`、`ngTabPanel`ディレクティブのルートコンテナとして機能します。
-### TabList
+### TabList {#tablist}
-The container for tab buttons that manages selection and keyboard navigation.
+選択とキーボードナビゲーションを管理するタブボタンのコンテナです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| --------------- | ---------------------------- | -------------- | ------------------------------------------------------------------ |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab list layout direction |
-| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first tab |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled tabs are focusable but not activatable |
-| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether tabs activate on focus or require explicit activation |
-| `selectedTab` | `any` | — | The value of the currently selected tab (supports two-way binding) |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | タブリストのレイアウト方向 |
+| `wrap` | `boolean` | `false` | キーボードナビゲーションが最後のタブから最初のタブにラップするかどうか |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたタブはフォーカス可能ですが、アクティブにはできません |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | タブがフォーカス時にアクティブになるか、明示的なアクティベーションが必要か |
+| `selectedTab` | `any` | — | 現在選択されているタブの値（双方向バインディングをサポート） |
-### Tab
+### Tab {#tab}
-An individual tab button.
+個々のタブボタンです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
-| ---------- | --------- | ------- | --------------------------------------- |
-| `value` | `any` | — | **Required.** Unique value for this tab |
-| `disabled` | `boolean` | `false` | Disables this tab |
+| プロパティ | 型 | デフォルト | 説明 |
+| ---------- | --------- | ------- | ----------------------------------- |
+| `value` | `any` | — | **必須。** このタブの一意な値 |
+| `disabled` | `boolean` | `false` | このタブを無効化します |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
-| ---------- | ----------------- | ------------------------------------- |
-| `selected` | `Signal` | Whether the tab is currently selected |
-| `active` | `Signal` | Whether the tab currently has focus |
+| プロパティ | 型 | 説明 |
+| ---------- | ----------------- | ----------------------------------- |
+| `selected` | `Signal` | タブが現在選択されているかどうか |
+| `active` | `Signal` | タブが現在フォーカスを持っているかどうか |
-### TabPanel
+### TabPanel {#tabpanel}
-The content panel associated with a tab.
+タブに関連付けられたコンテンツパネルです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ----------------- | --------- | ------- | ---------------------------------------------------------- |
-| `value` | `any` | — | **Required.** Must match the `value` of the associated tab |
-| `preserveContent` | `boolean` | `true` | Whether to keep panel content in DOM after deactivation |
+| `value` | `any` | — | **必須。** 関連付けられたタブの`value`と一致する必要があります |
+| `preserveContent` | `boolean` | `true` | 非アクティブ化後もパネルコンテンツをDOMに保持するかどうか |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
-| --------- | ----------------- | -------------------------------------- |
-| `visible` | `Signal` | Whether the panel is currently visible |
+| プロパティ | 型 | 説明 |
+| --------- | ----------------- | ------------------------------ |
+| `visible` | `Signal` | パネルが現在表示されているかどうか |
-### TabContent
+### TabContent {#tabcontent}
-A structural directive for lazy rendering tab panel content.
+タブパネルのコンテンツを遅延レンダリングするための構造ディレクティブです。
-This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element inside a tab panel:
+このディレクティブには入力、出力、メソッドはありません。タブパネル内の`ng-template`要素に適用します:
```angular-html
-
+
```
diff --git a/adev-ja/src/content/guide/aria/toolbar.en.md b/adev-ja/src/content/guide/aria/toolbar.en.md
new file mode 100644
index 0000000000..1684759c0c
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/toolbar.en.md
@@ -0,0 +1,272 @@
+
+
+
+## Overview
+
+A container for grouping related controls and actions with keyboard navigation, commonly used for text formatting, toolbars, and command panels.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Usage
+
+Toolbar works best for grouping related controls that users access frequently. Consider using toolbar when:
+
+- **Multiple related actions** - You have several controls that perform related functions (like text formatting buttons)
+- **Keyboard efficiency matters** - Users benefit from quick keyboard navigation through arrow keys
+- **Grouped controls** - You need to organize controls into logical sections with separators
+- **Frequent access** - Controls are used repeatedly within a workflow
+
+Avoid toolbar when:
+
+- A simple button group is sufficient - For just 2-3 unrelated actions, individual buttons work better
+- Controls aren't related - Toolbar implies a logical grouping; unrelated controls confuse users
+- Complex nested navigation - Deep hierarchies are better served by menus or navigation components
+
+## Features
+
+Angular's toolbar provides a fully accessible toolbar implementation with:
+
+- **Keyboard Navigation** - Navigate widgets with arrow keys, activate with Enter or Space
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Widget Groups** - Organize related widgets like radio button groups or toggle button groups
+- **Flexible Orientation** - Horizontal or vertical layouts with automatic keyboard navigation
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+- **Configurable Focus** - Choose between wrapping navigation or hard stops at edges
+
+## Examples
+
+### Basic horizontal toolbar
+
+Horizontal toolbars organize controls from left to right, matching the common pattern in text editors and design tools. Arrow keys navigate between widgets, maintaining focus within the toolbar until users press Tab to move to the next page element.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Vertical toolbar
+
+Vertical toolbars stack controls top to bottom, useful for side panels or vertical command palettes. Up and down arrow keys navigate between widgets.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Widget groups
+
+Widget groups contain related controls that work together, like text alignment options or list formatting choices. Groups maintain their own internal state while participating in toolbar navigation.
+
+In the examples above, the alignment buttons are wrapped in `ngToolbarWidgetGroup` with `role="radiogroup"` to create a mutually exclusive selection group.
+
+The `multi` input controls whether multiple widgets within a group can be selected simultaneously:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Disabled widgets
+
+Toolbars support two disabled modes:
+
+1. **Soft-disabled** widgets remain focusable but visually indicate they're unavailable
+2. **Hard-disabled** widgets are completely removed from keyboard navigation.
+
+By default, `softDisabled` is `true`, which allows disabled widgets to still receive focus. If you want to enable hard-disabled mode, set `[softDisabled]="false"` on the toolbar.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Right-to-left (RTL) support
+
+Toolbars automatically support right-to-left languages. Wrap the toolbar in a container with `dir="rtl"` to reverse the layout and keyboard navigation direction. Arrow key navigation adjusts automatically: left arrow moves to the next widget, right arrow to the previous.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## APIs
+
+### Toolbar Directive
+
+The `ngToolbar` directive provides the container for toolbar functionality.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | ------------------------------ | -------------- | ------------------------------------------------------ |
+| `orientation` | `'vertical'` \| `'horizontal'` | `'horizontal'` | Whether toolbar is vertically or horizontally oriented |
+| `disabled` | `boolean` | `false` | Disables the entire toolbar |
+| `softDisabled` | `boolean` | `true` | Whether disabled items can receive focus |
+| `wrap` | `boolean` | `true` | Whether focus should wrap at the edges |
+
+### ToolbarWidget Directive
+
+The `ngToolbarWidget` directive marks an element as a navigable widget within the toolbar.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ----------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the widget |
+| `disabled` | `boolean` | `false` | Disables the widget |
+| `value` | `V` | - | The value associated with the widget (required) |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------------- |
+| `active` | `Signal` | Whether the widget is currently focused |
+| `selected` | `Signal` | Whether the widget is selected (in a group) |
+
+### ToolbarWidgetGroup Directive
+
+The `ngToolbarWidgetGroup` directive groups related widgets together.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ---------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables all widgets in the group |
+| `multi` | `boolean` | `false` | Whether multiple widgets can be selected |
+
+### Related components
+
+Toolbar can contain various widget types including buttons, trees, and comboboxes. See individual component documentation for specific widget implementations.
+
+
+
+
+
diff --git a/adev-ja/src/content/guide/aria/toolbar.md b/adev-ja/src/content/guide/aria/toolbar.md
index 1684759c0c..512ab11ea2 100644
--- a/adev-ja/src/content/guide/aria/toolbar.md
+++ b/adev-ja/src/content/guide/aria/toolbar.md
@@ -1,12 +1,12 @@
-
+
-## Overview
+## 概要
-A container for grouping related controls and actions with keyboard navigation, commonly used for text formatting, toolbars, and command panels.
+キーボードナビゲーションで関連するコントロールとアクションをグループ化するためのコンテナで、一般的にテキストフォーマット、ツールバー、コマンドパネルに使用されます。
-
+
@@ -22,7 +22,7 @@ A container for grouping related controls and actions with keyboard navigation,
-
+
@@ -31,38 +31,38 @@ A container for grouping related controls and actions with keyboard navigation,
-## Usage
+## 使い方 {#usage}
-Toolbar works best for grouping related controls that users access frequently. Consider using toolbar when:
+Toolbarは、ユーザーが頻繁にアクセスする関連コントロールをグループ化するのに最適です。次のような場合にToolbarの使用を検討してください:
-- **Multiple related actions** - You have several controls that perform related functions (like text formatting buttons)
-- **Keyboard efficiency matters** - Users benefit from quick keyboard navigation through arrow keys
-- **Grouped controls** - You need to organize controls into logical sections with separators
-- **Frequent access** - Controls are used repeatedly within a workflow
+- **複数の関連アクション** - 関連する機能を持つコントロールが複数ある場合（テキストフォーマットボタンなど）
+- **キーボードの効率が重要** - ユーザーが矢印キーによる素早いキーボードナビゲーションの恩恵を受ける場合
+- **グループ化されたコントロール** - コントロールをセパレーターで論理的なセクションに整理する必要がある場合
+- **頻繁なアクセス** - ワークフロー内でコントロールが繰り返し使用される場合
-Avoid toolbar when:
+次のような場合はToolbarの使用を避けてください:
-- A simple button group is sufficient - For just 2-3 unrelated actions, individual buttons work better
-- Controls aren't related - Toolbar implies a logical grouping; unrelated controls confuse users
-- Complex nested navigation - Deep hierarchies are better served by menus or navigation components
+- 単純なボタングループで十分な場合 - 関連性のない2〜3個のアクションには、個別のボタンの方が適しています
+- コントロールが関連していない場合 - Toolbarは論理的なグループ化を意味するため、関連性のないコントロールはユーザーを混乱させます
+- 複雑なネストされたナビゲーション - 深い階層には、メニューやナビゲーションコンポーネントの方が適しています
-## Features
+## 機能 {#features}
-Angular's toolbar provides a fully accessible toolbar implementation with:
+Angularのツールバーは、以下の機能を備えた完全にアクセシブルなツールバーの実装を提供します：
-- **Keyboard Navigation** - Navigate widgets with arrow keys, activate with Enter or Space
-- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
-- **Widget Groups** - Organize related widgets like radio button groups or toggle button groups
-- **Flexible Orientation** - Horizontal or vertical layouts with automatic keyboard navigation
-- **Signal-Based Reactivity** - Reactive state management using Angular signals
-- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
-- **Configurable Focus** - Choose between wrapping navigation or hard stops at edges
+- **キーボードナビゲーション** - 矢印キーでウィジェットを移動し、EnterキーまたはSpaceキーでアクティブ化します
+- **スクリーンリーダーのサポート** - 支援技術のための組み込みARIA属性
+- **ウィジェットグループ** - ラジオボタングループやトグルボタングループのような関連ウィジェットを整理します
+- **柔軟な向き** - 自動キーボードナビゲーションを備えた水平または垂直レイアウト
+- **シグナルベースのリアクティビティ** - Angularシグナルを使用したリアクティブな状態管理
+- **双方向テキストのサポート** - 右から左へ記述する言語（RTL）を自動的に処理します
+- **設定可能なフォーカス** - ラップアラウンドナビゲーションまたは端でのハードストップを選択できます
-## Examples
+## 例
-### Basic horizontal toolbar
+### 基本的な水平ツールバー {#basic-horizontal-toolbar}
-Horizontal toolbars organize controls from left to right, matching the common pattern in text editors and design tools. Arrow keys navigate between widgets, maintaining focus within the toolbar until users press Tab to move to the next page element.
+水平ツールバーは、テキストエディターやデザインツールで一般的なパターンに合わせて、コントロールを左から右に整理します。矢印キーでウィジェット間を移動し、ユーザーがTabキーを押して次のページ要素に移動するまで、ツールバー内にフォーカスを維持します。
@@ -90,9 +90,9 @@ Horizontal toolbars organize controls from left to right, matching the common pa
-### Vertical toolbar
+### 垂直ツールバー {#vertical-toolbar}
-Vertical toolbars stack controls top to bottom, useful for side panels or vertical command palettes. Up and down arrow keys navigate between widgets.
+垂直ツールバーは、コントロールを上から下に積み重ねるため、サイドパネルや垂直コマンドパレットに便利です。上下の矢印キーでウィジェット間を移動します。
@@ -120,13 +120,13 @@ Vertical toolbars stack controls top to bottom, useful for side panels or vertic
-### Widget groups
+### ウィジェットグループ {#widget-groups}
-Widget groups contain related controls that work together, like text alignment options or list formatting choices. Groups maintain their own internal state while participating in toolbar navigation.
+ウィジェットグループには、テキストの配置オプションやリストの書式設定の選択肢など、連携して動作する関連コントロールが含まれています。グループは、ツールバーのナビゲーションに参加しながら、独自の内部状態を維持します。
-In the examples above, the alignment buttons are wrapped in `ngToolbarWidgetGroup` with `role="radiogroup"` to create a mutually exclusive selection group.
+上記の例では、配置ボタンは`ngToolbarWidgetGroup`でラップされ、`role="radiogroup"`が設定されており、相互に排他的な選択グループを作成しています。
-The `multi` input controls whether multiple widgets within a group can be selected simultaneously:
+`multi`入力は、グループ内の複数のウィジェットを同時に選択できるかどうかを制御します:
@@ -152,14 +152,14 @@ The `multi` input controls whether multiple widgets within a group can be select
-### Disabled widgets
+### 無効化されたウィジェット {#disabled-widgets}
-Toolbars support two disabled modes:
+ツールバーは2つの無効化モードをサポートしています:
-1. **Soft-disabled** widgets remain focusable but visually indicate they're unavailable
-2. **Hard-disabled** widgets are completely removed from keyboard navigation.
+1. **ソフト無効化**されたウィジェットはフォーカス可能ですが、視覚的には利用不可であることを示します
+2. **ハード無効化**されたウィジェットは、キーボードナビゲーションから完全に削除されます。
-By default, `softDisabled` is `true`, which allows disabled widgets to still receive focus. If you want to enable hard-disabled mode, set `[softDisabled]="false"` on the toolbar.
+デフォルトでは、`softDisabled`は`true`であり、無効化されたウィジェットがフォーカスを受け取ることができます。ハード無効化モードを有効にしたい場合は、ツールバーで`[softDisabled]="false"`を設定します。
@@ -187,9 +187,9 @@ By default, `softDisabled` is `true`, which allows disabled widgets to still rec
-### Right-to-left (RTL) support
+### 右から左 (RTL) のサポート {#right-to-left-rtl-support}
-Toolbars automatically support right-to-left languages. Wrap the toolbar in a container with `dir="rtl"` to reverse the layout and keyboard navigation direction. Arrow key navigation adjusts automatically: left arrow moves to the next widget, right arrow to the previous.
+ツールバーは、右から左に記述する言語を自動的にサポートします。ツールバーを`dir="rtl"`を持つコンテナでラップすると、レイアウトとキーボードナビゲーションの方向が逆になります。矢印キーのナビゲーションは自動的に調整され、左矢印キーは次のウィジェットに、右矢印キーは前のウィジェットに移動します。
@@ -217,54 +217,54 @@ Toolbars automatically support right-to-left languages. Wrap the toolbar in a co
-## APIs
+## API
-### Toolbar Directive
+### Toolbarディレクティブ {#toolbar-directive}
-The `ngToolbar` directive provides the container for toolbar functionality.
+`ngToolbar`ディレクティブは、ツールバー機能のコンテナを提供します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| -------------- | ------------------------------ | -------------- | ------------------------------------------------------ |
-| `orientation` | `'vertical'` \| `'horizontal'` | `'horizontal'` | Whether toolbar is vertically or horizontally oriented |
-| `disabled` | `boolean` | `false` | Disables the entire toolbar |
-| `softDisabled` | `boolean` | `true` | Whether disabled items can receive focus |
-| `wrap` | `boolean` | `true` | Whether focus should wrap at the edges |
+| `orientation` | `'vertical'` \| `'horizontal'` | `'horizontal'` | ツールバーが垂直方向か水平方向か |
+| `disabled` | `boolean` | `false` | ツールバー全体を無効にします |
+| `softDisabled` | `boolean` | `true` | 無効化された項目がフォーカスを受け取れるかどうか |
+| `wrap` | `boolean` | `true` | フォーカスが端で折り返すかどうか |
-### ToolbarWidget Directive
+### ToolbarWidgetディレクティブ {#toolbarwidget-directive}
-The `ngToolbarWidget` directive marks an element as a navigable widget within the toolbar.
+`ngToolbarWidget`ディレクティブは、要素をツールバー内のナビゲート可能なウィジェットとしてマークします。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ----------------------------------------------- |
-| `id` | `string` | auto | Unique identifier for the widget |
-| `disabled` | `boolean` | `false` | Disables the widget |
-| `value` | `V` | - | The value associated with the widget (required) |
+| `id` | `string` | auto | ウィジェットの一意の識別子 |
+| `disabled` | `boolean` | `false` | ウィジェットを無効にします |
+| `value` | `V` | - | ウィジェットに関連付けられた値（必須） |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| ---------- | ----------------- | ------------------------------------------- |
-| `active` | `Signal` | Whether the widget is currently focused |
-| `selected` | `Signal` | Whether the widget is selected (in a group) |
+| `active` | `Signal` | ウィジェットが現在フォーカスされているかどうか |
+| `selected` | `Signal` | ウィジェットが（グループ内で）選択されているかどうか |
-### ToolbarWidgetGroup Directive
+### ToolbarWidgetGroupディレクティブ {#toolbarwidgetgroup-directive}
-The `ngToolbarWidgetGroup` directive groups related widgets together.
+`ngToolbarWidgetGroup`ディレクティブは、関連するウィジェットをグループ化します。
-#### Inputs
+#### 入力 {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ---------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables all widgets in the group |
-| `multi` | `boolean` | `false` | Whether multiple widgets can be selected |
+| `disabled` | `boolean` | `false` | グループ内のすべてのウィジェットを無効にします |
+| `multi` | `boolean` | `false` | 複数のウィジェットを選択できるかどうか |
-### Related components
+### 関連コンポーネント {#related-components}
-Toolbar can contain various widget types including buttons, trees, and comboboxes. See individual component documentation for specific widget implementations.
+ツールバーには、ボタン、ツリー、コンボボックスなど、さまざまなウィジェットタイプを含めることができます。特定のウィジェットの実装については、個々のコンポーネントのドキュメントを参照してください。
diff --git a/adev-ja/src/content/guide/aria/tree.en.md b/adev-ja/src/content/guide/aria/tree.en.md
new file mode 100644
index 0000000000..4119a887d4
--- /dev/null
+++ b/adev-ja/src/content/guide/aria/tree.en.md
@@ -0,0 +1,230 @@
+
+
+
+
+
+
+
+
+## Overview
+
+A tree displays hierarchical data where items can expand to reveal children or collapse to hide them. Users navigate with arrow keys, expand and collapse nodes, and optionally select items for navigation or data selection scenarios.
+
+
+
+
+
+
+
+## Usage
+
+Trees work well for displaying hierarchical data where users need to navigate through nested structures.
+
+**Use trees when:**
+
+- Building file system navigation
+- Showing folder and document hierarchies
+- Creating nested menu structures
+- Displaying organization charts
+- Browsing hierarchical data
+- Implementing site navigation with nested sections
+
+**Avoid trees when:**
+
+- Displaying flat lists (use [Listbox](guide/aria/listbox) instead)
+- Showing data tables (use [Grid](guide/aria/grid) instead)
+- Creating simple dropdowns (use [Select](guide/aria/select) instead)
+- Building breadcrumb navigation (use breadcrumb patterns)
+
+## Features
+
+- **Hierarchical navigation** - Nested tree structure with expand and collapse functionality
+- **Selection modes** - Single or multi-selection with explicit or follow-focus behavior
+- **Selection follows focus** - Optional automatic selection when focus changes
+- **Keyboard navigation** - Arrow keys, Home, End, and type-ahead search
+- **Expand/collapse** - Right/Left arrows or Enter to toggle parent nodes
+- **Disabled items** - Disable specific nodes with focus management
+- **Focus modes** - Roving tabindex or activedescendant focus strategies
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Navigation tree
+
+Use a tree for navigation where clicking items triggers actions rather than selecting them.
+
+
+
+
+
+
+
+
+
+
+
+Set `[nav]="true"` to enable navigation mode. This uses `aria-current` to indicate the current page instead of selection.
+
+### Single selection
+
+Enable single selection for scenarios where users choose one item from the tree.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Leave `[multi]="false"` (the default) for single selection. Users press Space to select the focused item.
+
+### Multi-selection
+
+Allow users to select multiple items from the tree.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Set `[multi]="true"` on the tree. Users select items individually with Space or select ranges with Shift+Arrow keys.
+
+### Selection follows focus
+
+When selection follows focus, the focused item is automatically selected. This simplifies interaction for navigation scenarios.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Set `[selectionMode]="'follow'"` on the tree. Selection automatically updates as users navigate with arrow keys.
+
+### Disabled tree items
+
+Disable specific tree nodes to prevent interaction. Control whether disabled items can receive focus.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+When `[softDisabled]="true"` on the tree, disabled items can receive focus but cannot be activated or selected. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## APIs
+
+### Tree
+
+The container directive that manages hierarchical navigation and selection.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables the entire tree |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+| `multi` | `boolean` | `false` | Whether multiple items can be selected |
+| `selectionMode` | `'explicit' \| 'follow'` | `'explicit'` | Whether selection requires explicit action or follows focus |
+| `nav` | `boolean` | `false` | Whether the tree is in navigation mode (uses `aria-current`) |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps from last to first item |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the tree |
+| `values` | `any[]` | `[]` | Selected item values (supports two-way binding) |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------------- | ---------- | --------------------------------------------- |
+| `expandAll` | none | Expands all tree nodes |
+| `collapseAll` | none | Collapses all tree nodes |
+| `selectAll` | none | Selects all items (only in multi-select mode) |
+| `clearSelection` | none | Clears all selection |
+
+### TreeItem
+
+An individual node in the tree that can contain child nodes.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ------------------------------------------------------- |
+| `value` | `any` | — | **Required.** Unique value for this tree item |
+| `disabled` | `boolean` | `false` | Disables this item |
+| `expanded` | `boolean` | `false` | Whether the node is expanded (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| ------------- | ----------------- | ------------------------------------ |
+| `selected` | `Signal` | Whether the item is selected |
+| `active` | `Signal` | Whether the item currently has focus |
+| `hasChildren` | `Signal` | Whether the item has child nodes |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------- |
+| `expand` | none | Expands this node |
+| `collapse` | none | Collapses this node |
+| `toggle` | none | Toggles the expansion state |
+
+### TreeGroup
+
+A container for child tree items.
+
+This directive has no inputs, outputs, or methods. It serves as a container to organize child `ngTreeItem` elements:
+
+```angular-html
+
+ Parent Item
+
+
Child 1
+
Child 2
+
+
+```
diff --git a/adev-ja/src/content/guide/aria/tree.md b/adev-ja/src/content/guide/aria/tree.md
index 4119a887d4..20aa7544bf 100644
--- a/adev-ja/src/content/guide/aria/tree.md
+++ b/adev-ja/src/content/guide/aria/tree.md
@@ -1,14 +1,14 @@
-
+
-
-
+
+
-## Overview
+## 概要 {#overview}
-A tree displays hierarchical data where items can expand to reveal children or collapse to hide them. Users navigate with arrow keys, expand and collapse nodes, and optionally select items for navigation or data selection scenarios.
+ツリーは、アイテムを展開して子を表示したり、折りたたんで非表示にしたりできる階層データを表示します。ユーザーは矢印キーで移動し、ノードを展開・折りたたみ、ナビゲーションやデータ選択のシナリオのためにアイテムを選択できます。
@@ -16,42 +16,42 @@ A tree displays hierarchical data where items can expand to reveal children or c
-## Usage
+## 使用法 {#usage}
-Trees work well for displaying hierarchical data where users need to navigate through nested structures.
+ツリーは、ユーザーがネストされた構造をナビゲートする必要がある階層データを表示するのに適しています。
-**Use trees when:**
+**ツリーを使用する場合:**
-- Building file system navigation
-- Showing folder and document hierarchies
-- Creating nested menu structures
-- Displaying organization charts
-- Browsing hierarchical data
-- Implementing site navigation with nested sections
+- ファイルシステムのナビゲーションを構築する
+- フォルダーとドキュメントの階層を表示する
+- ネストされたメニュー構造を作成する
+- 組織図を表示する
+- 階層データを閲覧する
+- ネストされたセクションを持つサイトナビゲーションを実装する
-**Avoid trees when:**
+**ツリーを避ける場合:**
-- Displaying flat lists (use [Listbox](guide/aria/listbox) instead)
-- Showing data tables (use [Grid](guide/aria/grid) instead)
-- Creating simple dropdowns (use [Select](guide/aria/select) instead)
-- Building breadcrumb navigation (use breadcrumb patterns)
+- フラットなリストを表示する場合（代わりに[Listbox](guide/aria/listbox)を使用）
+- データテーブルを表示する場合（代わりに[Grid](guide/aria/grid)を使用）
+- シンプルなドロップダウンを作成する場合（代わりに[Select](guide/aria/select)を使用）
+- パンくずナビゲーションを構築する場合（パンくずパターンを使用）
-## Features
+## 機能 {#features}
-- **Hierarchical navigation** - Nested tree structure with expand and collapse functionality
-- **Selection modes** - Single or multi-selection with explicit or follow-focus behavior
-- **Selection follows focus** - Optional automatic selection when focus changes
-- **Keyboard navigation** - Arrow keys, Home, End, and type-ahead search
-- **Expand/collapse** - Right/Left arrows or Enter to toggle parent nodes
-- **Disabled items** - Disable specific nodes with focus management
-- **Focus modes** - Roving tabindex or activedescendant focus strategies
-- **RTL support** - Right-to-left language navigation
+- **階層ナビゲーション** - 展開・折りたたみ機能付きのネストされたツリー構造
+- **選択モード** - 明示的またはフォーカス追従動作による単一選択または複数選択
+- **フォーカス追従選択** - フォーカス変更時に任意で自動選択
+- **キーボードナビゲーション** - 矢印キー、Home、End、先行入力による検索
+- **展開/折りたたみ** - 右/左矢印キーまたはEnterキーで親ノードを切り替え
+- **無効化されたアイテム** - フォーカス管理付きで特定のノードを無効化
+- **フォーカスモード** - Roving tabindexまたはactivedescendantフォーカス戦略
+- **RTLサポート** - 右から左へ記述する言語のナビゲーション
-## Examples
+## 例
-### Navigation tree
+### ナビゲーションツリー {#navigation-tree}
-Use a tree for navigation where clicking items triggers actions rather than selecting them.
+アイテムを選択するのではなく、クリックすることでアクションをトリガーするナビゲーションにはツリーを使用します。
@@ -63,11 +63,11 @@ Use a tree for navigation where clicking items triggers actions rather than sele
-Set `[nav]="true"` to enable navigation mode. This uses `aria-current` to indicate the current page instead of selection.
+`[nav]="true"`を設定してナビゲーションモードを有効にします。これにより、選択の代わりに`aria-current`を使用して現在のページを示します。
-### Single selection
+### 単一選択 {#single-selection}
-Enable single selection for scenarios where users choose one item from the tree.
+ユーザーがツリーから1つのアイテムを選択するシナリオでは、単一選択を有効にします。
@@ -86,11 +86,11 @@ Enable single selection for scenarios where users choose one item from the tree.
-Leave `[multi]="false"` (the default) for single selection. Users press Space to select the focused item.
+単一選択の場合は、`[multi]="false"`（デフォルト）のままにします。ユーザーはSpaceキーを押してフォーカスされているアイテムを選択します。
-### Multi-selection
+### 複数選択 {#multi-selection}
-Allow users to select multiple items from the tree.
+ユーザーがツリーから複数のアイテムを選択できるようにします。
@@ -109,11 +109,11 @@ Allow users to select multiple items from the tree.
-Set `[multi]="true"` on the tree. Users select items individually with Space or select ranges with Shift+Arrow keys.
+ツリーに`[multi]="true"`を設定します。ユーザーはSpaceキーで個別にアイテムを選択するか、Shift+矢印キーで範囲を選択します。
-### Selection follows focus
+### フォーカスに追従する選択 {#selection-follows-focus}
-When selection follows focus, the focused item is automatically selected. This simplifies interaction for navigation scenarios.
+選択がフォーカスに追従する場合、フォーカスされたアイテムは自動的に選択されます。これにより、ナビゲーションシナリオでのインタラクションが簡素化されます。
@@ -132,11 +132,11 @@ When selection follows focus, the focused item is automatically selected. This s
-Set `[selectionMode]="'follow'"` on the tree. Selection automatically updates as users navigate with arrow keys.
+ツリーに`[selectionMode]="'follow'"`を設定します。ユーザーが矢印キーでナビゲートすると、選択が自動的に更新されます。
-### Disabled tree items
+### 無効化されたツリーアイテム {#disabled-tree-items}
-Disable specific tree nodes to prevent interaction. Control whether disabled items can receive focus.
+特定のツリーノードを無効にして、インタラクションを防ぎます。無効化されたアイテムがフォーカスを受け取れるかどうかを制御します。
@@ -155,69 +155,69 @@ Disable specific tree nodes to prevent interaction. Control whether disabled ite
-When `[softDisabled]="true"` on the tree, disabled items can receive focus but cannot be activated or selected. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+ツリーで`[softDisabled]="true"`の場合、無効化されたアイテムはフォーカスを受け取ることができますが、アクティブ化または選択できません。`[softDisabled]="false"`の場合、無効化されたアイテムはキーボードナビゲーション中にスキップされます。
-## APIs
+## API {#apis}
-### Tree
+### Tree {#tree}
-The container directive that manages hierarchical navigation and selection.
+階層的なナビゲーションと選択を管理するコンテナディレクティブです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables the entire tree |
-| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
-| `multi` | `boolean` | `false` | Whether multiple items can be selected |
-| `selectionMode` | `'explicit' \| 'follow'` | `'explicit'` | Whether selection requires explicit action or follows focus |
-| `nav` | `boolean` | `false` | Whether the tree is in navigation mode (uses `aria-current`) |
-| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps from last to first item |
-| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the tree |
-| `values` | `any[]` | `[]` | Selected item values (supports two-way binding) |
-
-#### Methods
-
-| Method | Parameters | Description |
+| `disabled` | `boolean` | `false` | ツリー全体を無効にします |
+| `softDisabled` | `boolean` | `true` | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
+| `multi` | `boolean` | `false` | 複数アイテムの選択が可能かどうか |
+| `selectionMode` | `'explicit' \| 'follow'` | `'explicit'` | 選択に明示的なアクションが必要か、フォーカスに追従するかどうか |
+| `nav` | `boolean` | `false` | ツリーがナビゲーションモードであるかどうか（`aria-current`を使用） |
+| `wrap` | `boolean` | `true` | キーボードナビゲーションが最後のアイテムから最初のアイテムにラップするかどうか |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | ツリーで使用されるフォーカス戦略 |
+| `values` | `any[]` | `[]` | 選択されたアイテムの値（双方向バインディングをサポート） |
+
+#### メソッド {#methods}
+
+| メソッド | パラメータ | 説明 |
| ---------------- | ---------- | --------------------------------------------- |
-| `expandAll` | none | Expands all tree nodes |
-| `collapseAll` | none | Collapses all tree nodes |
-| `selectAll` | none | Selects all items (only in multi-select mode) |
-| `clearSelection` | none | Clears all selection |
+| `expandAll` | none | すべてのツリーノードを展開します |
+| `collapseAll` | none | すべてのツリーノードを折りたたみます |
+| `selectAll` | none | すべてのアイテムを選択します（複数選択モードのみ） |
+| `clearSelection` | none | すべての選択をクリアします |
-### TreeItem
+### TreeItem {#treeitem}
-An individual node in the tree that can contain child nodes.
+子ノードを含むことができるツリー内の個々のノードです。
-#### Inputs
+#### Inputs {#inputs}
-| Property | Type | Default | Description |
+| プロパティ | 型 | デフォルト | 説明 |
| ---------- | --------- | ------- | ------------------------------------------------------- |
-| `value` | `any` | — | **Required.** Unique value for this tree item |
-| `disabled` | `boolean` | `false` | Disables this item |
-| `expanded` | `boolean` | `false` | Whether the node is expanded (supports two-way binding) |
+| `value` | `any` | — | **必須。** このツリーアイテムの一意な値 |
+| `disabled` | `boolean` | `false` | このアイテムを無効にします |
+| `expanded` | `boolean` | `false` | ノードが展開されているかどうか（双方向バインディングをサポート） |
-#### Signals
+#### シグナル {#signals}
-| Property | Type | Description |
+| プロパティ | 型 | 説明 |
| ------------- | ----------------- | ------------------------------------ |
-| `selected` | `Signal` | Whether the item is selected |
-| `active` | `Signal` | Whether the item currently has focus |
-| `hasChildren` | `Signal` | Whether the item has child nodes |
+| `selected` | `Signal` | アイテムが選択されているかどうか |
+| `active` | `Signal` | アイテムが現在フォーカスを持っているかどうか |
+| `hasChildren` | `Signal` | アイテムが子ノードを持っているかどうか |
-#### Methods
+#### メソッド {#methods}
-| Method | Parameters | Description |
+| メソッド | パラメータ | 説明 |
| ---------- | ---------- | --------------------------- |
-| `expand` | none | Expands this node |
-| `collapse` | none | Collapses this node |
-| `toggle` | none | Toggles the expansion state |
+| `expand` | none | このノードを展開します |
+| `collapse` | none | このノードを折りたたみます |
+| `toggle` | none | 展開状態を切り替えます |
-### TreeGroup
+### TreeGroup {#treegroup}
-A container for child tree items.
+子ツリーアイテムのコンテナです。
-This directive has no inputs, outputs, or methods. It serves as a container to organize child `ngTreeItem` elements:
+このディレクティブには、入力、出力、メソッドはありません。子`ngTreeItem`要素を整理するためのコンテナとして機能します:
```angular-html
+