QA review accessibility improvements

[SuaYoo]

• [ ] Keyboard navigation between page list @emma-sg
• [ ] Consistent :focus-visible styling @emma-sg
• [x] Screenreader checks @Shrinks99

[SuaYoo]

Anything I can help with here @emma-sg @Shrinks99 ?

[Shrinks99]

Reviewed with voice over... Not sure I got everything but this is a start! Screenshot analysis is not going to be very helpful... I'm sure text analysis could be improved in a few ways that would help everyone regardless of ability such as doing what GitHub does an only surfacing the actual different sections!

The resource comparison table is by far the most usable for anyone who is completely unsighted. It works quite well! Good labels for all the rows and columns and gives context to each value!

QA Tab

• [ ] Total Analysis Time has a span with a title, the content is read twice (might be harder to fix than I thought if we want to keep the title on hover which is helpful for using the executionTimeFormatter elsewhere.
• [ ] The hover info description text seems unreachable?
• The chart does not deliver any helpful information for users using screen readers. It is currently entirely inaccessible. This also isn't a trivial problem to solve and is unfortunately quite common... Data Navigator offers one interesting solution, though is likely outside of the scope of these fixes
• [x] In the "Delete Analysis Run" popup, the Cancel button is highlighted initially which means it's the first content read aloud. Users have to know that there is more text "above" and request it with keyboard navigation controls. Should be title of the dialog.
• [ ] The pages table pagination selector doesn't seem to be grouped with the table contents in any way? There's no auditory indication that it is related. Perhaps btrix-pagination should have an aria-role attribute that we define with a label attribute when creating the component?

Review Tab

• Current page title is read as Heading level 3, pagename, should probably be Current page: Pagename
• Date is read as [DATE] collapsed menu button group, should probably start with Analysis run date:...
• Page comments tab:
  • [ ] Max character count is read aloud twice, I think because voiceover handles this by default though unsure if all do... Can probably leave as is
• [x] Heuristic navigation tab should be titled, currently only referred to as "Navigation"
• Current page url is just read aloud as the URL, should probably start with Current URL:
• Current page capture date is just read aloud as the date, should probably start with Capture date:
• [ ] The pages list items are all read aloud by the screen reader even though the page isn't expanded. Likely needs aria tags for what is and isn't selected.
• The match percentage for the page list should likely be read aloud as Match %: [percentage]
• [x] Text comparison widget should use <ins> and <del> to represent text that has is present VS missing.

[Shrinks99]

Have started a branch for this: https://github.com/webrecorder/browsertrix/commits/frontend-qa-a11y-fixes

Probably won't get to all of these points, some are harder to fix than others (dates and dropdowns are a hard one I think?) Will have a go and try to pick off all the low hanging fruit.

[Shrinks99]

Alright, I think I'm done with the issues I can address confidently... The others deserve a little more thought as to how they'll fit in with our other components? Would prefer these be addressed by @SuaYoo or @emma-sg. :)

I've checked off the ones I've gotten to in the list above. The ones without checkmarks are maybe worth addressing with some larger strategy app-wide? The ones still unchecked should be addressed and are the more pressing issues IMO. Lets merge #1863 and do the above separately to keep things manageable? Nothing in there should be super related to anything else on the list.

Of all of these, the review tab not surfacing information for the current item only is probably the biggest issue??