チェックボックス<Checkbox>, <PrefectureCheckbox>を実装した

[ReoHakase]

• close チェックボックス<Checkbox>を実装する #11

• build: 📦️ (web) @storybook/addon-actionを導入した。 (チェックボックス<Checkbox>を実装する #11)

• feat: ✨ (<Checkbox>) チェックボックスを実装した。 (チェックボックス<Checkbox>を実装する #11)

• test: 🧪 (<Checkbox>) チェックボックスのストーリーを追加した。 (チェックボックス<Checkbox>を実装する #11)

• feat: ✨ (<PrefectureCheckbox>) 都道府県のチェックボックスを実装した。 (チェックボックス<Checkbox>を実装する #11)

• test: 🧪 (<PrefectureCheckbox>) 都道府県のチェックボックスのストーリーを追加した。 (チェックボックス<Checkbox>を実装する #11)

概要

<Checkbox>

独自の見た目を持つa11y対応のチェックボックスです。
スクリーンリーダーにのみ見える<input type="checkbox">と、<label for="...">で実装しています。
キーボードでフォーカスされても、正しくフォーカスリングを表示できます。

export type CheckboxProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
  id: string; // <label>で擬似的なチェックボックスを作るために必要
  'aria-labelledby': string; // 実際にラベルテキストを含む<label>のidを必ず指定する
};

<PrefectureCheckbox>

都道府県のチェックボックスコンポーネント。
値が変更されると、それに合わせてsearchParamsを更新します。

export type PrefectureCheckboxProps = Omit<CheckboxProps, 'id' | 'aria-labelledby' | 'checked'> & {
  prefCode: PrefCode;
  prefLocale: string;
};

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
simple-resas-app-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 25, 2024 3:44am