Sections

Taxonomy Filter

SCSS Location: /styles/scss/partial/_taxonomy-filter.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

The Taxonomy Filter is an interface featuring expandable lists of checkboxes and a search field.

Guidelines

  • 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-expanded attribute 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-count element. If no checkboxes in the flyout are checked, this element is empty.

  • Below 480px

    • The search bar is positioned above the Filters toggle button.

  • Below 768px

    • The search submit button is hidden.

  • Between 480px and 991px

    • The Filters toggle button is justified left and the search field is justified right.

  • Below 992px

    • 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.

  • Keyboard Navigation

      In addition to the native TAB, ENTER, and SPACEBAR behavior, the Taxonomy Filter is extended with the following keybaord functionality:

      • Pressing the UP and DOWN arrow keys will navigate through the checkboxes.
      • When focused on an input in an expanded element, pressing the ESC key collapses the element and returns focus to the element's toggle button.
      • Below 992px, when focused on the Filters button, pressing the DOWN arrow key expands the element containing the list of filters and adds focus to the first toggle button.
      • Below 992px, pressing the UP and DOWN arrow keys navigate through the filter toggle buttons.
      • At 992px and above, pressing the LEFT and RIGHT arrow keys navigate through the filter toggle buttons.
      • At all sizes, when focused on the first checkbox in a flyout, pressing SHIFT + TAB collapses 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 UP arrow key collapses the flyout and returns focus to the flyout's toggle button.

Usage

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 data-taxonomy-filter-sticky-container.

  • Filter By Topic

  • Filter By Type

  • Filter By Location

Style Guide Version 1.0.0

Last Updated:
© 2017 Vertex Inc All Rights Reserved