sort out accessibility of the `FilterableFacet` component

[alicewriteswrongs]

This one needs a lot of work. This is, I think, what we need:

• [x] the user needs to be able to tab between filters w/ one keystroke (i.e. they should not have to tab through every single filter option, as they do now)
• [x] each filter component needs to be clearly labeled, and it needs to be clear how to interact with it and what it does
• [x] the type-to-filter functionality needs to be accessible:
  • [x] the search box should be labelled correctly
  • [ ] there should be an aria-live region which announces that the filtering action has happened
• [ ] the user should be able to select and get information about filter options
  • [ ] up and down on the arrow keys should be used for navigating the list
  • [ ] entries should be selectable with space or enter
  • [ ] labels should include both the term and the count

I think we can do something like the following:

<div id="topic" role="application" aria-roledescription="select multiple" aria-label="Topic Filter">
<ul id="" data-type="multiple" data-label="Topic">
  <li data-value="math">
    <label>
      math
      <input type="checkbox" data-value="math" tabindex="-1">
    </label>
  </li>
  <li data-value="art">
    <label>
      art
      <input type="checkbox" data-value="art" tabindex="-1">
    </label>
  </li>
  <li data-value="food">
    <label>
      food
      <input type="checkbox" data-value="food" tabindex="-1">
    </label>
  </li>
</ul>
</div>

This provides a listbox that the user can tab into, but once they're in there it's up and down arrow keys to navigate. We should investigate how to package together the filter searchbox with this sort of list UI. If each filter set requires two tab pushes to get through that might be acceptable (i.e. one to get to the filter, and then another to get to this list).

[alicewriteswrongs]

I'm un-assigning myself, but I did start some exploratory work on this on this branch: https://github.com/mitodl/ocw-hugo-themes/compare/ap/topic-widget so that could form the basis for resolving these issues. The main concerns are:

• tab navigation between large elements on the page and then arrow keys + spacebar to interact with them
• sorting out proper screenreader announce tags
• make sure that we use semantic HTML tags everywhere we should, i.e. <button> and no <div onclick= fake buttons

there are also probably some visual design accessibility things we should be concerned with here too, contrast and so on.