086a53ba93
* updates * updating doc * Fixed broken documentation in Storybook stories. * bring back a element * md --> mdx * c-* doc update Co-authored-by: Nick Taylor <nick@dev.to>
54 lines
2.3 KiB
Text
54 lines
2.3 KiB
Text
## Dropdowns
|
||
|
||
Dropdowns should have position relative to it’s trigger. They can be used for
|
||
some 2nd level navigations, contextual configurations, etc...
|
||
|
||
Dropdowns should not be bigger than 320px. Dropdown default padding should be
|
||
dependent on width:
|
||
|
||
- < 250px: 16px 251 - 320px: 24px
|
||
|
||
FYI: Dropdowns use “Box” component as background, with Level 3 elevation.
|
||
|
||
### Dropdown accessibility
|
||
|
||
#### Preact implementation
|
||
|
||
The Preact Dropdown component has the below accessibility features baked-in. To
|
||
make sure this works correctly, you need only pass the appropriate
|
||
`triggerButtonId` and `dropdownContentId` to identify the button which controls
|
||
the dropdown, and the dropdown content div itself. All required aria attributes
|
||
and click handlers will be initialized by the Preact component.
|
||
|
||
#### HTML implementation
|
||
|
||
When creating a dropdown outside of the Preact code, use the utility method
|
||
`initializeDropdown` in `@utilities/dropdownUtils`. This will attach all the
|
||
necessary aria attributes and click handlers.
|
||
|
||
#### Expected interaction pattern
|
||
|
||
When either the Preact component is used with appropriate props, or the HTML
|
||
variant is initialized, all Crayons dropdowns should conform to the following
|
||
behaviors:
|
||
|
||
- The dropdown opens and closes with a mouse click on the trigger button
|
||
- The trigger button can be focused by keyboard, and pressing Enter opens and
|
||
closes the dropdown
|
||
- Pressing Escape closes the dropdown when it's open
|
||
- Clicking anywhere outside of the dropdown closes it if it is open
|
||
- If activated by keyboard, visible focus is transferred to the first
|
||
interactive item (e.g. link) in the dropdown when it opens
|
||
- If a user closes the dropdown by pressing Escape, focus is returned back to
|
||
the button that opened it
|
||
- If a user closes the dropdown by clicking outside, focus is returned back to
|
||
the button that opened it _unless_ they clicked on some other interactive item
|
||
(e.g. they clicked a button that exists elsewhere on the page)
|
||
- When the dropdown is open, if you use the Tab key or Shift + Tab (moves
|
||
backwards) and tab past the first or last interactive item in the dropdown,
|
||
the dropdown should close
|
||
- The button which activates the dropdown should have the attributes:
|
||
`aria-expanded`, `aria-haspopup="true"`,
|
||
`aria-controls="<dropdown content id>"`
|
||
- `aria-expanded` should be "true" when the dropdown is visible, and "false"
|
||
otherwise
|