Accessibility refactor

[ispykenny]

Brought over from #413

Here's a walk-through of the changes included in this PR

https://www.loom.com/share/72e0d673639f4b11bea9111d9ef6c325?sid=386bfe34-29d2-460c-a706-84c369c31cb9

This PR resolves the following:

• - the tabsets aren’t keyboard accessible, just mouse - check out the W3C’s APG for a guide.
• - search input needs a visual label (icon of magnifying glass is plenty)
• - your username dropdown should decide what it wants to be. Either a “disclosure widget” or a “menu button”. Either way you can get the markup/keyboard from the W3C’s APG.
• - can’t tab to the X in your search b/c it’s just a clickable span. Should be a button
• - use the tag for your search highlight instead of
• - same idea with directory cards, put them in an article or even a role=“group” and name them (aria-label) with the name of the user.
• - your cards are just divs. I’d give them tags and give them an aria-label to name/identify them. This way the Delete buttons are programatically associated to something. Otherwise it’s just a bunch of orphaned delete buttons not the page.
• - the toast alerts need role=“alert” added to them for screen readers