td要素の代替としてテーブルのデータセルを表すコンポーネントです。
他のコンポーネントと組み合わせることが多いため、具体的な使用方法はよくあるテーブル（https://smarthr.design/products/design-patterns/smarthr-table/）を参照してください。
import
import { Td } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| align | "left" | "right" | - | - | - |
| vAlign | "middle" | "baseline" | - | - | - |
| nullable | boolean | - | - | - |
| fixed | "left" | "right" | - | - | 横スクロール時、カラムを左右いずれかに固定 |
| contentWidth | CellContentWidth | { base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth; } | - | - | - |
実装ルール
a11y-prohibit-checkbox-or-radio-in-table-cell
テーブルセル（Th, Td）内に直接 Checkbox, RadioButton を配置することを禁止するルールです。
SmartHR UI には、デフォルトでアクセシブルネームを設定する TdCheckbox, ThCheckbox, TdRadioButton といったより適切なコンポーネントが用意されています。
❌ NG:
// Td, Th内にCheckbox, RadioButtonを配置しているためNG
<Td>
<Checkbox />
</Td>
<Td>
<RadioButton />
</Td>
<Th>
<Checkbox />
</Th>
// Td, Thに適切にaria-labelledby, aria-label属性を設定していても置き換え推奨のためNG
<Td>
<Checkbox aria-labelledby="id1" />
</Td>
<Td>
<RadioButton aria-labelledby="id2" />
</Td>
<Th>
<Checkbox aria-label="any text" />
</Th>
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
使い方チェックリスト
アクセシビリティ > セル内にチェックボックスやラジオボタンをそのまま配置しない
- [avoid] セルの内部に Checkbox や RadioButton をそのまま配置せず、TdCheckbox / ThCheckbox / TdRadioButton を利用する
アクセシビリティ > TdCheckboxおよびTdRadioButtonでは行を特定できる要素をIDで参照する
- [must] TdCheckbox および TdRadioButton を利用する場合は
aria-labelledby属性を必ず指定し、それだけで行を一意に判別できる要素への ID 参照を指定する - [must] オブジェクト名だけで一意に判別できないオブジェクトでは、複数の要素の ID 参照をスペース区切りで指定する