アクセシビリティ（a11y）

// Mantine のアクセシビリティ対応
import { Modal, Button, TextInput, ActionIcon, VisuallyHidden } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconX } from '@tabler/icons-react';

// モーダルのフォーカストラップ（デフォルトで有効）
function AccessibleModal() {
  const [opened, { open, close }] = useDisclosure(false);
  return (
    <>
      <Button onClick={open}>ダイアログを開く</Button>
      <Modal
        opened={opened}
        onClose={close}
        title="確認"
        trapFocus     // デフォルト true：フォーカスをモーダル内に閉じ込める
        closeOnEscape // デフォルト true：Esc で閉じる
      >
        <p>本当に削除しますか？</p>
        <Button onClick={close} variant="subtle">キャンセル</Button>
      </Modal>
    </>
  );
}

// スクリーンリーダー向けテキスト（VisuallyHidden）
<ActionIcon aria-label="閉じる">
  <IconX size={16} />
  <VisuallyHidden>パネルを閉じる</VisuallyHidden>
</ActionIcon>

// TextInput：label・error が aria-* に自動変換される
<TextInput
  label="メールアドレス"
  description="登録済みのアドレスを入力してください"
  error="このアドレスは登録されていません"
  // aria-describedby は Mantine が自動設定
/>

// Ant Design のアクセシビリティ対応
import { Modal, Form, Input, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';

// Modal：キーボード操作・フォーカス管理（デフォルトで対応）
<Modal
  open={open}
  onCancel={() => setOpen(false)}
  keyboard        // Esc で閉じる（デフォルト: true）
  focusTriggerAfterClose  // 閉じた後にトリガー要素にフォーカスを戻す
  title="確認ダイアログ"
  aria-label="確認ダイアログ"
>
  <p>本当に削除しますか？</p>
</Modal>

// Form.Item：htmlFor が自動で input に紐付けられる
<Form layout="vertical">
  <Form.Item
    label="メールアドレス"
    name="email"
    tooltip="登録済みのメールアドレスを入力してください"
    rules={[{ required: true, message: '必須項目です' }]}
  >
    <Input aria-required="true" />
  </Form.Item>
</Form>

// アイコンボタンの aria-label
<Button
  icon={<DeleteOutlined />}
  danger
  aria-label="アイテムを削除"
/>

// Screen reader 向けのライブリージョン
import { message } from 'antd';
message.success('保存しました');  // aria-live="polite" で読み上げ

// shadcn/ui は Radix UI ベースで WAI-ARIA パターンを自動実装
import {
  Dialog, DialogContent, DialogTitle, DialogDescription,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

// Dialog：フォーカストラップ・Esc クローズは Radix UI が自動処理
// aria-labelledby・aria-describedby も自動設定
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogTitle>確認</DialogTitle>
    <DialogDescription>
      本当に削除しますか？この操作は取り消せません。
    </DialogDescription>
    <div className="flex gap-2 justify-end">
      <Button variant="outline" onClick={() => setOpen(false)}>キャンセル</Button>
      <Button variant="destructive">削除</Button>
    </div>
  </DialogContent>
</Dialog>

// Label と Input の紐付け（htmlFor / id）
<div className="space-y-2">
  <Label htmlFor="email">メールアドレス</Label>
  <Input
    id="email"
    type="email"
    aria-required="true"
    aria-describedby="email-hint"
  />
  <p id="email-hint" className="text-sm text-muted-foreground">
    登録済みのアドレスを入力してください
  </p>
</div>

// スクリーンリーダー向けテキスト（Tailwind sr-only）
<Button variant="ghost" size="icon" aria-label="閉じる">
  <X className="h-4 w-4" aria-hidden="true" />
  <span className="sr-only">パネルを閉じる</span>
</Button>

// MUI のアクセシビリティ対応
import {
  Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions,
  Button, TextField, IconButton,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
import CloseIcon from '@mui/icons-material/Close';

// Dialog：aria-labelledby / aria-describedby で紐付け
<Dialog
  open={open}
  onClose={() => setOpen(false)}
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
>
  <DialogTitle id="dialog-title">
    確認
    <IconButton
      aria-label="閉じる"
      onClick={() => setOpen(false)}
      sx={{ position: 'absolute', right: 8, top: 8 }}
    >
      <CloseIcon />
    </IconButton>
  </DialogTitle>
  <DialogContent>
    <DialogContentText id="dialog-description">
      本当に削除しますか？この操作は取り消せません。
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpen(false)}>キャンセル</Button>
    <Button color="error" variant="contained">削除</Button>
  </DialogActions>
</Dialog>

// TextField：label は input と自動紐付け（htmlFor 相当）
<TextField
  label="メールアドレス"
  error={!!error}
  helperText={error || 'ヒントテキスト'}  // aria-describedby 相当
  inputProps={{ 'aria-required': true }}
/>

// スクリーンリーダー向けテキスト（visuallyHidden ユーティリティ）
<span style={visuallyHidden}>スクリーンリーダーのみ読み上げられるテキスト</span>