Taxonomy FilterSCSS Location: /styles/scss/partial/_taxonomy-filter.scss
- Status: Design
- Status: Development
- Status: Documentation
The Taxonomy Filter is an interface featuring expandable lists of checkboxes and a search field.
At all sizes
- The flyouts containing the lists of checkboxes are collapsed by default, and are expanded when their corresponding filter toggle buttons are clicked.
- When a flyout is expanded, the corresponding button has its
aria-expandedattribute updated to
true, and the active state is indicated by the text transitioning to primary blue and the chevron icon rotating 180 degrees.
- When a flyout is expanded, all other flyouts are collapsed.
- Each flyout's toggle button dynamically displays the number of checkboxes checked in the
taxonomy-filter__checked-countelement. If no checkboxes in the flyout are checked, this element is empty.
- The search bar is positioned above the Filters toggle button.
- The search submit button is hidden.
Between 480px and 991px
- The Filters toggle button is justified left and the search field is justified right.
- The Taxonomy Filter section should span the full width of the viewport.
- The element containing the list of filters is collapsed by default, and its expanded state is toggled when the Filters button is clicked.
- When expanded, the element containing the list of filters will appear below the fitlers toggle button and search field.
- Collapsable elements will transition with a slide effect.
992px and Above
- The filter flyout toggle buttons are justified left, and the search field is justified right.
- When expanded, the flyouts will be positioned below the corresponding toggle button and aligned with the left edge of the toggle button.
- Collapsable elements will transition with a fade effect.
- Pressing the
DOWNarrow keys will navigate through the checkboxes.
- When focused on an input in an expanded element, pressing the
ESCkey collapses the element and returns focus to the element's toggle button.
- Below 992px, when focused on the Filters button, pressing the
DOWNarrow key expands the element containing the list of filters and adds focus to the first toggle button.
- Below 992px, pressing the
DOWNarrow keys navigate through the filter toggle buttons.
- At 992px and above, pressing the
RIGHTarrow keys navigate through the filter toggle buttons.
- At all sizes, when focused on the first checkbox in a flyout, pressing
SHIFT + TABcollapses the flyout and returns focus to the flyout's toggle button.
- At 992px and above, when focused on the first checkbox in a flyout, pressing the
UParrow key collapses the flyout and returns focus to the flyout's toggle button.
In addition to the native
SPACEBARbehavior, the Taxonomy Filter is extended with the following keybaord functionality:
- Pressing the
The Taxonomy Filter is meant to be used in tandem with a Pill List, which displays the currently selected taxonomy terms, and a set of results that have been filtered by the taxonomy terms currently selected and an optional term entered via the search input.
The Taxonomy Filter can optionally be made sticky by adding a parent element with the class
.taxonomy-filter__sticky-container and the data attribute