// ✅ アイコンボタンには必ずaria-label
<Button variant="ghost" size="icon" aria-label="設定を開く">
  <SettingsIcon aria-hidden="true" />
</Button>

// ✅ 装飾アイコンはaria-hidden
<span aria-hidden="true">🎉</span>

// ✅ ローディング状態
<Button disabled aria-busy={isLoading}>
  {isLoading ? <Spinner /> : '保存'}
</Button>

// ✅ Label と Input の紐付け
<Label htmlFor="email">メールアドレス</Label>
<Input id="email" type="email" aria-describedby="email-hint" />
<p id="email-hint" className="text-sm text-muted-foreground">
  確認メールを送信します
</p>

// ✅ エラー状態
<Input
  id="email"
  aria-invalid={!!error}
  aria-describedby={error ? "email-error" : undefined}
/>
{error && <p id="email-error" role="alert">{error}</p>}

// ✅ shadcn/ui の Dialog はRadix UIベースで基本対応済み
// 以下を確認：
<DialogContent>
  <DialogHeader>
    <DialogTitle>タイトル</DialogTitle>        {/* aria-labelledby 自動 */}
    <DialogDescription>説明文</DialogDescription> {/* aria-describedby 自動 */}
  </DialogHeader>
  {/* コンテンツ */}
</DialogContent>

// ⚠️ DialogTitle/DialogDescription を省略しない
// 省略するとスクリーンリーダーで内容が伝わらない

// ✅ Dayoptのカレンダーキーボード操作（参考）
// src/features/calendar/hooks/useCalendarPlanKeyboard.ts

// Escape: Inspectorを閉じる
// Delete/Backspace: 選択中プラン削除
// C: 新規プラン作成
// Cmd/Ctrl+C/V: コピー/ペースト

// ⚠️ 入力中はショートカット無効化
const isTyping = ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName || '');
if (isTyping) return;

// ✅ フォーカスリング（globals.cssで定義済み）
className =
  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring';

// ✅ タップターゲット最小サイズ（Apple HIG: 44x44px）
// shadcn/ui Button size="icon" で対応済み

// ⚠️ カスタム要素の場合は明示的に設定
className = 'min-h-11 min-w-11'; // 44px = 2.75rem = 11 * 4px

// ❌ 禁止（div + onClick のみ）
<div onClick={handleClick}>クリック</div>

// ✅ 正しい（button または role + tabIndex + onKeyDown）
<button onClick={handleClick}>クリック</button>

// または
<div
  role="button"
  tabIndex={0}
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  クリック
</div>

// ❌ 禁止（テキストがあるのにaria-label）
<Button aria-label="保存する">保存</Button>

// ✅ 正しい（テキストがない場合のみ）
<Button aria-label="保存する">
  <SaveIcon aria-hidden="true" />
</Button>

// ❌ 禁止（赤色だけでエラーを示す）
<span className="text-red-500">必須</span>

// ✅ 正しい（アイコンやテキストも併用）
<span className="text-destructive">
  <AlertIcon aria-hidden="true" /> 必須
</span>

// src/components/debug/AxeAccessibilityChecker.tsx が存在
// 開発環境で自動的にa11y違反を検出

// ✅ Dayoptは対応済み
// src/hooks/useReducedMotion.ts

// アニメーションを減らしたい設定を尊重
const prefersReducedMotion = useReducedMotion();