Improve queue card accessibility

[nwalters512]

Implements some improvements to queue card accessibility based on #244. Draws some inspiration from this article.

• Puts queue cards in a <ul> list so that screen readers can identify it as a list, announce how many elements it has, etc.
• Add custom styles for :focus to improve appearance for sighted keyboard users.
• Mark entire card as a link with a label like "Queue for CS 225 Office Hours".
• Change "Settings" button to an <a> so that it's identified as a link; also gives the link an appropriate label like "CS 225 Office Hours settings".

Tested this with Voiceover on Safari and Chrome; tabbing through the list of queues is now a significantly better experience. I'm not sure how to get Voiceover to read other content from the card (e.g. location or number of questions), so I didn't change the markup of those yet since I'm not sure a) if they're ever read or b) how to test them if they are.

cc @bhuvy2

[vercel[bot]]

This pull request is automatically deployed with Now. To access deployments, click Details below or on the icon next to each push.

[nwalters512]

Good catch re: clicking on the settings button! Event bubbling will never not bite me...

[bhuvy2]

Looks good! The aria-label and navigation with lists is the traditional way to support accessibility which is more recognized by browsers than the HTML5 versioning. Could you please put it in the CONTRIBUTING.md or wiki, so successive PRs follow the same style? Accessibility is a moving target in terms of screen readers, so it'll have to be in the back of maintainer's minds while reviewing.