This project is not covered by Drupal’s security advisory policy.
ACCESSIBILTY
Drawers should have aria attributes, and it's a pain in the ass. But it would
be a much bigger pain to have poor vision. Use the baby framework provided
by this module to create easy accessible drawers.
REQUIREMENTS
Begin by adding wcag_drawer/wcag-drawer as a dependency to your custom theme
or by attaching that library on desired pages.
Every drawer handle must have...
- class="wcag-drawer-handle"
- aria-controls="my-drawer-id"> //replace my-drawer-id with appropriate value
Every drawer must have...
- id="my-drawer-id" //this must correspond to the aria-controls attribute of the handle
- class="wcag-drawer"
It is recommended that your drawer handle be a button, but it could be a link
with role="button". After all, we're trying to be accessible. There are styles
in the library that remove most default button styles from a button given the
wcag-drawer-handle class.
BONUS CLASSES:
There are some bonus classes that do things. They are optional.
- chevron: Add this class to the handle to give it a chevron
- desktop-open: Add this to a wcag-drawer so force it open on desktop. It only really acts like a drawer on mobile. Put this on the handle too to hide the chevron.
- load-open: Add this to a wcag-drawer to have the drawer load open. It canstill open and close like normal, which is different from th desktop-open class which only acts like a drawer on mobile.
BONUS ATTRIBUTES:
These are optional.
- data-wcag-focus : Set to true on drawer if the drawer contains a form and you want to auto focus to the first form element. Make sure it's actually a string value of "true".
- data-slide-time : This number gets passed to jquery slide() functions. The default is 400. It's a time in ms. If you want the drawer to open/close instantly add data-slide-time="0".
EXAMPLES:
<button class='wcag-drawer-handle chevron' aria-controls="my-drawer">Open!</button>
<div id="my-drawer" class='wcag-drawer' data-slide-time="0"> <!-- instant open/close -->
<!-- STUFF IN DRAWER -->
</div>
or maybe...
<a role='button' class='wcag-drawer-handle desktop-open' aria-controls="my-drawer">Open!</button>
<div id="my-drawer" class='wcag-drawer desktop-open' data-wcag-focus="true">
<!-- FORM IN DRAWER -->
</div>
Project information
- Seeking co-maintainer(s)
Maintainers are looking for help reviewing issues. - Module categories: Developer Tools
- 6 sites report using this module
- Created by danflanagan8 on , updated
- Drupal 10 is here!
All done! This is a small module with no php. The D10 compatibility issue focussed on replacing core/jquery.once with core/once: #3296251: wcag_drawer D10 readiness
- This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
Releases
D10 Readiness
Development version: 8.x-1.x-dev updated 15 Jul 2022 at 18:34 UTC