search

mdn / developer-portal

The code that generates the MDN Web Docs Developer Portal.
Mozilla Public License 2.0
61 stars 38 forks source link

Posts - Filter Form a11y improvements #1721

Open schalkneethling opened 3 years ago

schalkneethling commented 3 years ago

A couple of items that need to be addressed with regards to the filter form.

  1. [ ] While minor, it might be worth giving the form a name attribute such as name="filter-form"
  2. [ ] While the group of checkboxes are inside a fieldset element, there is no legend. As such the group label is not associated with its fields.
  3. [ ] The "Clear" function should be a button element or even an input of type="reset" as opposed to an anchor element
  4. [ ] The heading for the overall form could be a bit more descriptive. Something like "Filter posts by Products & Technologies". If this is a bit to much copy, we can use this string as the value for an aria-label
  5. [ ] Labels should be marked up as a list

Something like:

<form name="filter-form" class="filter-form js-filter-form" data-controls="article_or_video-cards" action="/posts/#results-list">
  <input type="reset" class="icon icon-clear filter-form-clear js-filter-clear" value="Clear" />
  <fieldset class="filter-form-section">
    <legend class="filter-form-section-header" aria-label="Filter posts by Products &amp; Technologies">Products &amp; Technologies</legend>
    <ul>
      <li>
        <label>
          <input type="checkbox" name="topic" value="browser-extensions"> Add-ons
        </label>
      </li>
    </ul>
    ...
  </fieldset>
  <div class="filter-form-section filter-form-footer">
    <button class="js-filter-form-submit mzp-c-button mzp-t-small" type="submit">Refine results</button>
  </div>
</form>