Skip to content

Commit

Permalink
fix: 具体例を補足
Browse files Browse the repository at this point in the history
  • Loading branch information
tokimari committed Oct 11, 2023
1 parent 88e84ed commit 13f2862
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/4/1/2.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ roleとは、ユーザーインターフェイスの機能を表すものであ

### SegmentedControl

Amebaでは[SegmentedControl](https://ameba-spindle.web.app/?path=/docs/segmentedcontrol)というカスタムコントロールのコンポーネントを利用している。これはページ内で機能やモードを切り替える際に用いる。基本的にはブラウザ標準のラジオボタンと同様の機能をもっており、単一の項目のみを選択できる。ブラウザ標準のラジオボタンとの違いはキー操作体系にある。上下左右キーでの**移動だけで**選択されるラジオボタンと違い、上下左右キーでの**移動に加え**Enter, Spaceキーを押下しないと選択されない。そのため、「キーボードフォーカス中ではあってもActiveではない」という、ラジオボタンとは異なる状態が存在する。
Amebaでは[SegmentedControl](https://ameba-spindle.web.app/?path=/docs/segmentedcontrol)というカスタムコントロールのコンポーネントを利用している。これはページ内で機能やモードを切り替える際に用いる。基本的にはブラウザ標準のラジオボタンと同様の機能をもっており、単一の項目のみを選択できる。ブラウザ標準のラジオボタンとの違いはキー操作体系にある。上下左右キーでの**移動だけで**選択されるラジオボタンと違い、上下左右キーでの**移動に加え**Enter, Spaceキーを押下しないと選択されない。そのため、「キーボードフォーカス中ではあってもActiveではない」という、ラジオボタンとは異なる状態が存在する。以上の仕様を満たすため、カスタムコントロールとしての実装を選択しており、Acceessible Nameとroleの適切な設定が必要となる。

デモページ:[SegmentedControl ⋅ Storybook](https://ameba-spindle.web.app/?path=/docs/segmentedcontrol)

Expand Down

0 comments on commit 13f2862

Please sign in to comment.