メインコンテンツへスキップ

アクセシビリティ

@lh-ui/react はファミリーの他のライブラリと同じアクセシビリティ契約を共有します：セマンティックなタグ、ARIA 属性、キーボード操作はすべて @lh-ui/share/core 内で定義され、各端で一致した実装になります。本ライブラリはさらに、React エコシステムでよくある a11y の落とし穴が起きないことを保証します。

セマンティクスと ARIA​

  • LhSwitch は視覚的に偽装した checkbox ではなく、<div role="switch" aria-checked> を描画します
  • LhSelect のトリガーは role="combobox"、展開パネルは role="listbox"、選択肢は role="option" で、aria-activedescendant でキーボードのハイライトを同期します
  • LhDialog は role="dialog" aria-modal" で、タイトルは aria-label のフォールバックと aria-labelledby の正確な関連付けの両方を提供します
  • LhTooltip は aria-describedby で通知をトリガーに関連付けます
  • LhTag はクリック可能な場合 role="button" に昇格し、Enter / Space に応答します
  • LhFormItem はバリデーション失敗時に role="alert" のエラー通知を描画し、aria-invalid を設定します

キーボード操作​

コンポーネントキー
LhButton / LhTagEnter / Space でクリックを発火
LhSwitchEnter / Space で切り替え
LhSelectArrowUp / ArrowDown で選択肢をハイライト、Enter で選択、Escape で閉じる
LhDialogEscape で閉じる（スタック最上位のオーバーレイのみ応答）
LhTooltipEscape で閉じる

複数のオーバーレイが重なっている場合は useLhOverlayStack が開いた順のスタックを管理し、Escape はスタック最上位だけを閉じます。一度のキー操作で全オーバーレイが消えるのを防ぎます。

フォーカス管理​

  • LhDialog は開いている間 useLhFocusTrap でフォーカスをダイアログ内に制限し（Tab / Shift+Tab が外に逃げない）、閉じた後にフォーカスをトリガーに返します
  • LhFormItem は label のクリック時に内容領域の最初のフォーカス可能要素にフォーカスします（focusControl）。ネイティブの label ラップは複合コントロールでは信頼できないためです

装飾的なアイコン​

LhIcon はデフォルトで decorative：aria-hidden="true" を出力し、スクリーンリーダーからは見えません。セマンティクスを持たせたい場合は decorative={false} + ariaLabel を渡してください：

<LhIcon name="search" decorative={false} ariaLabel="検索" />

この時 <svg role="img" aria-label="検索"> として描画されます。

StrictMode の安全性​

すべてのコンポーネントは React StrictMode 下で安全です：effect の cleanup と重複マウントはすべて冪等に処理されます（オーバーレイスタックの登録 / 削除、スクロールロックの保持者検証、focus trap の解放）。

ファミリーの一致性​

アクセシビリティの挙動は『设计语言基线』に登録され、双血脈（web / ネイティブ）の統一契約です。各端は同一の @lh-ui/share/core ロジックで実装され、aria 属性とキーのセマンティクスが一致します。