mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
6ef6140b29
* updated sort order
* Update preview.tsx
* Create avatar.mdx
Added avatar documentation based on Figma docs
* Added badge docs
* fixed typos
* added breadcrumb docs
* Added callout docs
* added color password docs
* Added dialog docs
* fixed typo
* Updated Dialogs docs
Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.
Updated the sub-docs pages
* Update simple-dialog.mdx
* Added documentation from Figma to Forms docs
* Create icon-button.mdx
* added link docs
* Added menu docs
* Added progress indicator docs
* Updated table docs
* Added tab docs
* Added toggle group docs
* Revert "Update preview.tsx"
This reverts commit 4671d9726a.
* added docs for appA11yTitle
* Fixed typos
* Update libs/components/src/link/link.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Update libs/components/src/menu/menu.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback
* Addressed feedback on callout, menu, and progress
* moved stories mdx files to proper location
* Addressed feedback on dialogs.mdx
* Update libs/components/src/tabs/tabs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback on Tabs
* ran prettier
* Fixed title formatting
* ran prettier
* Update libs/components/src/dialog/dialogs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* ran prettier
---------
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
37 lines
1.4 KiB
Plaintext
37 lines
1.4 KiB
Plaintext
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||
|
||
import * as stories from "./toggle-group.stories";
|
||
|
||
<Meta of={stories} />
|
||
|
||
# Toggle Group
|
||
|
||
Toggle groups are used for quick filters for a data set. **Example:** the Member’s page of the Admin
|
||
Console uses a toggle group to filter members by their organization status: all, invited, needs
|
||
confirmation, revoked.
|
||
|
||
Toggle groups function as radio buttons and a radio group under the hood.
|
||
|
||
A button in a toggle group can have a badge counter added to show the number of items existing
|
||
within that filter.
|
||
|
||
For focus states, use `focus-visible`.
|
||
|
||
<Primary />
|
||
<Controls />
|
||
|
||
## Accessibility
|
||
|
||
- Follow contrast rules for the main button styles.
|
||
- Focus:
|
||
- Implement as a radio group with button styling and a context label (context label can be screen
|
||
reader only depending on use case).
|
||
- Since only 1 button can be selected at a time to filter the toggle group acts similarly to a
|
||
radio group.
|
||
- When moving focus to a button group, the focus should always move to the selected button. The
|
||
screen reader should then announce the button group: example “[context label], [button content]
|
||
selected, of [# of buttons]”), the number of buttons and the currently selected button. The user
|
||
may navigate the options then via left/right arrow keys.
|
||
|
||
See WCAG for more: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
|