af517bc5aa
* use the dropdown initializer in post editor options * use dropdown initializer in comment subs dropdown * use Dropdown component in listings * show the dropdown button when it's focused * update storybook notes and components * add cypress tests for post options dropdown * add comment subscription tests * make sure page is properly initialized before setting button functionality * add jsdoc comments, props types, rely on optional chaining * Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md Co-authored-by: rhymes <github@rhymes.dev> * Update app/javascript/crayons/Dropdown/__stories__/dropdowns.md Co-authored-by: rhymes <github@rhymes.dev> Co-authored-by: rhymes <github@rhymes.dev>
2.3 KiB
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-expandedshould be "true" when the dropdown is visible, and "false" otherwise