InlineDropDownのDesignDocを追加 #1740
Conversation
|
tokimari
changed the title
|
Visit the preview URL for this PR (updated for commit a476f7c): https://ameba-spindle--pr1740-codex-create-design-tjf8d6zm.web.app (expires Sun, 25 Jan 2026 06:29:38 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435 |
|
✨✨ That's perfect, there is no visual difference! ✨✨ Check out the report here. |
| React実装の一例です。`aria-label`によるラベリングを行うシンプルなパターンのみを示します。 | ||
|
|
||
| ```tsx | ||
| <InlineDropDown aria-label="期間を選択" name="term" placeholder="期間を選択"> |
There was a problem hiding this comment.
q. 現状のStorybookベースに記載されたんですが、InlineDropDownを使う時って視覚的なラベル/何を選ぶべきかわかる明示的なとセットで使う必要があるのでは・・？？と思いまして、aria-labelで実装することを推奨するのはよくないのではと思うのですがどうなんでしょうか 💭
There was a problem hiding this comment.
実際の利用例ベースでの記載になってるけど、視覚的なラベルを推奨しつつ、実装例の一つにするのはありかもしれない・・！
| ラベルを`aria-label`で設定し、`select`要素のサイズに応じて`visualSize`を選択してください。 | ||
|
|
||
| 余白を含めてタップターゲットが44px以上になるよう配置してください。 |
There was a problem hiding this comment.
| ラベルを`aria-label`で設定し、`select`要素のサイズに応じて`visualSize`を選択してください。 | |
| 余白を含めてタップターゲットが44px以上になるよう配置してください。 | |
| 余白を含めてタップターゲットが44px以上になるよう配置してください。 | |
| ラベルを`aria-label`で設定し、`select`要素のサイズに応じて`visualSize`を選択してください。 |
| ## アクセシビリティ | ||
|
|
||
| - [情報や関係性を明確にする](https://a11y-guidelines.ameba.design/1/3/1/)[基本必須] | ||
| - [ ] `aria-label`属性を設定し、適切なラベリングを行っている |
There was a problem hiding this comment.
| ### Testing Libraryでのユニットテスト | ||
|
|
||
| - 選択肢の選択が正しく動作し、表示テキストが更新されることを確認 | ||
| - `onChange`ハンドラーが正しく呼び出されることを確認 | ||
| - `ref`が正しく転送されることを確認 | ||
| - `disabled`プロパティが正しく適用されることを確認 | ||
| - プレースホルダーのみ指定された状態から選択肢を切り替えた際に表示が更新されることを確認 | ||
|
|
||
| ### Storybookでのテスト | ||
|
|
||
| - Mediumサイズの表示 | ||
| - Smallサイズの表示 | ||
| - プレースホルダー状態の表示 | ||
| - ドロップダウン要素自体が無効化されている状態の表示 | ||
| - 並び替えなどのインライン利用シナリオでの見た目確認 |
tokimari
requested review from
a team,
herablog,
tatz012 and
yasuda-shin
and removed request for
a team
|
|
||
| InlineDropDownは試験的なコンポーネントであるため、破壊的な変更や削除等おこなわれる可能性があることに注意して利用してください。 | ||
|
|
||
| ## スクリーンショット |
InlineDropDownのDesignDocを追加しました。
Summary
#1740 (comment) についてどうすべきかわからなかったので途中経過でPRしました 🙏
Testing
Codex使いながら度々フリーズしてしまって面倒になったので一旦push・・追加修正入れます 🙇
Codex Task