Toggle
Toggle
は、オンまたはオフの2つの状態を持つコンポーネントです。
Toggle
にアイコンのみを使用する場合は、Toggle
にaria-label
を設定します。
<Toggle icon={<Bold />} aria-label="Toggle bold" />
ToggleGroup
にaria-label
を設定すると、スクリーンリーダーによって読み上げられます。これにより、グループの目的や機能をユーザーに伝えることができます。
const [value, setValue] = useState<string | undefined>(undefined)return (<ToggleGroupvalue={value}onChange={setValue}aria-label="Text formatting options"><Toggle value="bold" icon={<Bold />} aria-label="Toggle bold" /><Toggle value="italic" icon={<Italic />} aria-label="Toggle italic" /><Togglevalue="underline"icon={<Underline />}aria-label="Toggle underline"/></ToggleGroup>)
キーボード操作
キー | 説明 | 状態 |
---|---|---|
Tab | 要素をフォーカスします。 | - |
Space , Enter | フォーカスされた要素を切り替えます。 | - |
ARIAロールと属性
コンポーネント | ロールと属性 | 使い方 |
---|---|---|
ToggleGroup | role="group" | グループであることを示します。 |
Toggle | aria-pressed | 要素が押されているの場合はtrue を設定し、押されていないの場合はfalse を設定します。 |
GitHubでこのページを編集する