ガイド
Webで意図的に異なる点
この実装がプラットフォームAPIから逸脱する箇所と、その理由を説明します。
このライブラリはMaterial 3 Expressiveのジオメトリーと視覚状態に従いながら、Composeの動作をWebに直接対応づけられない場合はネイティブHTML、WCAG 2.2、WAI-ARIA Authoring Practicesを優先します。
| 領域 | Webでの実装 | 理由 |
|---|---|---|
| アクションとフォームコントロール | ネイティブのbutton、input、textareaとフォーム動作で、アクティベーションと値を管理します。 | ブラウザーのセマンティクス、フォーム、自動入力、リセット、キーボード操作は、移植したジェスチャーノードより信頼できます。 |
| インタラクションターゲット | 小さなExpressiveの表示でも、最小48×48 CSSピクセルのターゲットを別に確保します。 | Materialのジオメトリーとアクセシブルなポインターターゲットを両立します。 |
| アイコン | IconはSVGコンポーネントまたはMaterial Symbolsのテキストに対応します。ペインター、レジストリ、フォントは同梱しません。 | Webアセットの配信とローカライズは利用側で管理できます。 |
| カード | インタラクティブなカードにはネイティブボタンを使い、リッチな内容や入れ子のインタラクティブ要素を含む場合は受動的なカードを使います。 | HTMLではボタン内にインタラクティブ要素を入れられません。 |
| Switch | 固定のrole="switch"を持つチェックボックスがフォームとセマンティクスを管理します。 | ネイティブのチェックボックス機構がWebフォームに最も適したプリミティブです。 |
| テキストフィールド | ネイティブの:focus／:placeholder-shown状態でラベル位置を決め、textareaのサイズ変更は可能なままにします。 | 値とフォーカスをブラウザーに任せながら、Webで便利な操作性を保ちます。 |
| Dialog | ネイティブの<dialog>がモーダル状態とフォーカスのライフサイクルを管理し、入場モーションで段階的に強化します。 | Webのトップレイヤーとネイティブのフォーカス復帰を利用します。 |
| MenuとSelect | Menuではロービングフォーカスを使い、Selectではaria-activedescendantを持つコンボボックストリガーにフォーカスを維持します。 | これらは別々のAPGパターンであり、Composeの単一の選択面ではありません。 |
| Tooltip | Tooltipの内容はインタラクティブではなく、アンカーから説明として参照されます。 | Webのrole="tooltip"は、操作可能なホバーカードではありません。 |
| Snackbar | ホストキューを公開する代わりに、一時停止可能なタイムアウトを持つ制御式Snackbarを1つ使います。 | ホバーやフォーカス中の一時停止は時間制限に関するアクセシビリティを満たし、キューの方針はアプリケーション側で管理できます。 |
| Tabs | ナビゲーション項目は実際のアンカーとしてレンダリングでき、パネルは任意で、指定された場合だけ出力されます。 | タブボタンの中にリンクを入れず、ネイティブのナビゲーションを保ちます。 |
| アプリのナビゲーション | Bar、Rail、Drawerではタブロールや矢印キー移動ではなく、<nav>／aria-currentを使います。 | アプリ内で持続するナビゲーションは、ページ内のタブリストではありません。 |
| アダプティブナビゲーション | NavigationSuiteはブラウザー幅に基づくcompact、medium、expandedの段階を使い、サーバーではcompactのマークアップをレンダリングします。 | SSRではWebのビューポートを取得できません。利用可能なプリミティブで3つのレイアウトを実現します。 |
| Progress | ネイティブの<progress>が値のセマンティクスを担い、カスタムDOM／SVGでMaterialのジオメトリーを描画します。 | ネイティブのブラウザー表示を露出せずに、確定／不確定状態をアクセシブルに保ちます。 |
| Expressiveのモーション | テーマのスプリングを決定的にCSSの時間とサンプリング済みのlinear()イージングに変換し、連続インジケーターにはCSSキーフレームを使います。 | CSSには汎用的なスプリングプリミティブが直接なく、SSRを実行時の測定に依存させられません。 |
| モーションの軽減 | 空間的な遷移は即時に切り替え、状態は見えるまま無限の装飾的モーションを停止します。 | アニメーションを必要とせず内容を理解できます。 |
| 強制カラー | 作成したステートレイヤーが消える場合は、システムカラーと明示的なフォーカスアウトラインを使います。 | ユーザーエージェントのハイコントラストパレットを優先できます。 |
コンポーネント固有の詳細とソースリビジョンは、tests/components/内の準拠記録にあります。コンポーネントをまたぐ設計理由は公開ADRに記録されています。