@@ -44,7 +44,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.
4444
4545</PlatformBlock >
4646
47- ## アナトミー
47+ ## 構造
4848
4949{ Platform } ボタン グループは、関連するトグル ボタンを共有コンテナーと個々のボタン アイテムを持つ単一グループに整理します。
5050
@@ -53,7 +53,7 @@ import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.
5353 name = " Button Group"
5454 description = " ボタン グループ コンポーネントは、関連するトグル ボタンを共有コンテナー内に整理し、ユーザーが単一または複数の選択を行えるようにします。"
5555 src = { buttonGroupAnatomy .src }
56- alt = " 共有コンテナー、ボタン アイコン、ラベルを示すボタン グループのアナトミー "
56+ alt = " 共有コンテナー、ボタン アイコン、ラベルを示すボタン グループの構造 "
5757/>
5858
5959<style >{ `
@@ -79,17 +79,17 @@ Button Group
7979 └── Label
8080```
8181
82- ## はじめに
82+ ## 作業の開始
8383
8484<PlatformBlock for = " Angular"
8585
86- { Platform } ボタン グループを使用するには、基本的なプロジェクト設定について [ { ProductName } はじめに ] ( /general/getting-started ) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
86+ { Platform } ボタン グループを使用するには、基本的なプロジェクト設定について [ { ProductName } の作業の開始 ] ( /general/getting-started ) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
8787
8888</PlatformBlock >
8989
9090<PlatformBlock for = " React,WebComponents,Blazor"
9191
92- { Platform } ボタン グループを使用するには、基本的なプロジェクト設定について [ { ProductName } はじめに ] ( ../general-getting-started.mdx ) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
92+ { Platform } ボタン グループを使用するには、基本的なプロジェクト設定について [ { ProductName } の作業の開始 ] ( ../general-getting-started.mdx ) トピックを参照してから、ターゲット プラットフォームのコンポーネントを登録してください。
9393
9494</PlatformBlock >
9595
@@ -166,7 +166,7 @@ import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
166166import { IgxIconComponent } from ' igniteui-angular/icon'
167167```
168168
169- Ignite UI for Angular の完全な紹介については、[ ** はじめに ** ] ( /general/getting-started ) トピックをお読みください。
169+ Ignite UI for Angular の完全な紹介については、[ ** 作業の開始 ** ] ( /general/getting-started ) トピックをお読みください。
170170
171171</PlatformBlock >
172172
@@ -668,7 +668,7 @@ igx-buttongroup {
668668
669669</PlatformBlock >
670670
671- ### Do/Don't
671+ ### 使用すべき場合と使用すべきでない場合
672672
673673** 使用する場合:** ユーザーが 1 つまたは複数のオプションを選択できる関連するトグル アクションを整理するためにボタン グループを使用します。
674674
@@ -701,7 +701,9 @@ igx-buttongroup {
701701
702702## プロパティ
703703
704- ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。
704+ ボタン グループのプロパティはコンポーネント API リファレンスから生成されます。
705+
706+ プロパティの行は、ドキュメントのビルド時に型付き API ソースから注入されます。
705707
706708| 名前 | タイプ | デフォルト | 説明 |
707709| --- | --- | --- | --- |
@@ -950,24 +952,55 @@ igc-toggle-button::part(toggle) {
950952
951953## アクセシビリティ
952954
953- ボタン グループは、各ボタンのインタラクションとアクセシブルな状態を保持しながら、 関連するトグル ボタンをグループ化します。すべてのボタンに意味のあるコンテンツを提供し、意図するインタラクションに合った選択モードを選択してください 。
955+ { Platform } Button Group は、 関連するトグル ボタンを整理しながら、各ボタンの選択状態と無効状態を公開します 。
954956
955957### キーボード インタラクション
956958
957- { Platform } ボタン グループは、含まれるトグル ボタンのキーボード動作に従います。含まれるボタンが提供するキーボード インタラクションを使用し、設定された選択モードのフォーカス順序と選択動作を確認してください 。
959+ ボタン グループは、内包するトグル ボタンにキーボード インタラクションを委譲します。各トグル ボタンはネイティブ ボタンをレンダリングするため、標準のボタン キーボード動作によってフォーカスされたアイテムがアクティブ化され、設定された選択モードに従って選択状態が更新されます 。
958960
959- | インタラクション | 期待される動作 |
961+ | キー | アクション |
960962| --- | --- |
961- | キーボード フォーカス | 含まれるトグル ボタンには、それぞれのフォーカス動作に従ってアクセスできます。 |
962- | トグル ボタン インタラクション | フォーカスされたボタンは、設定された選択モードに従って選択状態を変更します。 |
963+ | Tab / Shift+Tab | グループ内の次または前の有効なトグル ボタンにフォーカスを移動します。 |
964+ | Enter / Space | フォーカスされたトグル ボタンをアクティブ化し、設定された選択モードに従って選択または選択解除します。 |
965+
966+ ボタン グループが無効の場合、内包するトグル ボタンも無効になり、キーボードによるインタラクティブ操作に対応しなくなります。
963967
964968### スクリーン リーダー / ARIA
965969
966- 支援技術のユーザーが各オプションとその選択状態を識別できるよう、すべての { Platform } トグル ボタンに明確なラベルを使用してください。アイコンがアクセシブルな名前を提供しない場合は、ボタンに適切なテキスト ラベルまたはアクセシブルな名前を提供してください。
970+ ボタン グループはグループの関係を公開し、各トグル ボタンはネイティブ ボタン セマンティクスを通じてその状態を公開します。
971+
972+ <PlatformBlock for = " WebComponents, React, Blazor"
973+
974+ - グループ コンテナーは ` role="group" ` を使用し、` aria-disabled ` を通じてグループの無効状態を反映します。
975+ - 各トグル ボタンは、選択状態に ` aria-pressed ` 、無効状態に ` aria-disabled ` を持つネイティブ ` button ` をレンダリングします。
976+ - グループはユーザーの操作によりトグル ボタンの選択状態が変化した後、` igcSelect ` および ` igcDeselect ` を発行します。イベントの詳細はトグル ボタンの ` value ` です。
977+ - すべてのトグル ボタンに表示テキストまたは ` aria-label ` を提供してください。特にアイコンのみのコントロールでは重要です。
978+
979+ </PlatformBlock >
980+
981+ <PlatformBlock for = " Angular"
982+
983+ - グループ コンテナーは ` role="group" ` を使用します。
984+ - Angular は選択状態が変化すると各内包ボタンの ` aria-pressed ` 値を更新し、グループが無効の場合は子ボタンを無効にします。
985+ - グループはユーザーが選択を変更すると ` selected ` および ` deselected ` を発行します。各イベントには選択されたトグル ボタンとそのインデックスが含まれます。
986+ - すべてのアイコンのみのボタンに表示テキスト、` igxLabel ` 、または他のアクセシブルな名前を提供してください。
987+
988+ </PlatformBlock >
989+
990+ ### アクセシビリティ準拠
991+
992+ インフラジスティックスは、[ アクセシビリティ準拠] ( ../interactivity/accessibility-compliance.mdx ) トピックで、Section 508 および WCAG 2.1 ガイドライン領域における { ProductName } のアクセシビリティ サポートを文書化しています。
993+
994+ | 基準 | コンポーネントの準拠方法 |
995+ | -- | -- |
996+ | [ 2.1.1 キーボード] ( https://www.w3.org/WAI/WCAG21/Understanding/keyboard ) | 各トグル ボタンはネイティブ ボタンを使用するため、グループの選択動作は標準のボタン キーボード アクティベーションを通じて利用できます。 |
997+ | [ 4.1.2 名前、役割、値] ( https://www.w3.org/WAI/WCAG21/Understanding/name-role-value ) | グループは ` role="group" ` を公開します。トグル ボタンはネイティブ ボタン セマンティクスを公開し、選択状態が変化すると ` aria-pressed ` を更新します。xplat トグル ボタンは ` aria-disabled ` も公開します。 |
967998
968- ### アクセシビリティ コンプライアンス
999+ ユーザー側の責任:
9691000
970- レンダリングされた { Platform } ボタン グループをアプリケーションのアクセシビリティ要件と照らし合わせて確認してください。ターゲット フレームワークで設定された選択モードのボタン名、フォーカス順序、選択状態のアナウンス、動作を確認してください。
1001+ - 各トグル ボタンに明確な表示ラベルまたはアクセシブルな名前を付けてください。特にアイコンのみのボタンでは重要です。
1002+ - グループの選択モードをコントロールの目的に合わせて設定し、ユーザーが 1 つまたは複数のオプションを選択できるかどうかを理解できるようにしてください。
1003+ - グループまたはその選択状態をカスタマイズする際は、論理的なボタンの順序と十分な色のコントラストを維持してください。
9711004
9721005## トラブルシューティング
9731006
@@ -1011,7 +1044,7 @@ API の詳細とプロジェクト サポートについては、次の {Platfor
10111044
10121045- <ApiLink pkg = " core" type = " ToggleButton"
10131046
1014- ## よくある質問
1047+ ## FAQ
10151048
10161049これらのよくある質問は、{ Platform } ボタン グループの選択、コンテンツ、設定に関する一般的なシナリオをカバーします。
10171050
0 commit comments