Filter

Use the Filter component to offer search filters so that users can focus in on what they are looking for. The outer element takes class="ds-filter".

Markup

<aside class="ds-filter" aria-labelledby="filter-label">
  <div class="ds-filter-cluster">
    <ul>
      <li id="filter-label" class="ds-filter-label" aria-hidden="true">Filter:</li>
      <li><a href="?all" aria-current="true">All</a></li>
      <li><a href="?ready">Ready for data entry</a></li>
    </ul>
  </div>
  <details>
    <summary>Advanced filters</summary>
    <div class="ds-advanced-filters">
      <div class="ds-filter-cluster">
        <ul aria-labelledby="adv-filter-label-1">
          <li id="adv-filter-label-1" class="ds-filter-label" aria-hidden="true">Advanced filter label:</li>
          <!-- filter option <li>s -->
        </ul>
      </div>
      <div class="ds-filter-cluster">
        <ul aria-labelledby="adv-filter-label-1">
          <li id="adv-filter-label-2" class="ds-filter-label" aria-hidden="true">Advanced filter label:</li>
          <!-- filter option <li>s -->
        </ul>
      </div>
      <div class="ds-filter-cluster">
        <ul aria-labelledby="adv-filter-label-1">
          <li id="adv-filter-label-3" class="ds-filter-label" aria-hidden="true">Advanced filter label:</li>
          <!-- filter option <li>s -->
        </ul>
      </div>
    </div>
  </details>
</aside>

• The element is an <aside> so it is discoverable using screen readers and is labeled using the first list item of the top-level filters list (aria-labelledby and the id match).
• This element is hidden to assistive technologies with aria-hidden so is it is not enumerated as part of the list (this does not negate the aria-labelledby labeling mechanism).
• Advanced filters can be accessed using a Details component.
• Advanced filters are grouped inside the class="ds-advanced-filters" element.
• Each advanced filter <ul> is labeled by the first <li> element using aria-labelledby
• The aria-current="true" attribution is used on the currently selected filter (as defined by the query parameter).