Accessibility Improvements

[jacbn]

See related card for more; happy to discuss the reasons behind any of these changes if you are interested, but will do in a talk in a week or two.

---

Reworks the bulk of the :focus styling on the site to use one consistent mixin, @mixin focus-outline, which uses a box shadow and an invisible outline (for compatibility with Windows' high contrast mode). Switches much of the old-style :focus styling, which activates on any element which has any focus (including when clicked), to :focus-visible, which activates when the browser determines that styling is necessary (usually just when tabbed to), removing the styling when it is not needed. This means the styling can be made more obvious and assistive for those who need it, without impacting those who do not. Also makes use of landmark elements on pages with more complicated layouts (e.g. those with sidebars), so that SR users can more easily move between distinct sections.

[codecov]

Codecov Report

Attention: Patch coverage is 23.63636% with 84 lines in your changes missing coverage. Please review.

Project coverage is 40.78%. Comparing base (4e5a99c) to head (768c49a).
Report is 15 commits behind head on redesign-2024.

Files with missing lines	Patch %	Lines
...c/app/components/elements/layout/SidebarLayout.tsx	20.87%	72 Missing ⚠️
...ents/elements/list-groups/AbstractListViewItem.tsx	28.57%	5 Missing ⚠️
src/app/components/pages/Groups.tsx	0.00%	3 Missing and 1 partial ⚠️
src/app/components/elements/NavigationLinks.tsx	0.00%	1 Missing ⚠️
src/app/components/elements/StudentDashboard.tsx	0.00%	1 Missing ⚠️
src/app/components/elements/TeacherDashboard.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff               @@
##           redesign-2024    #1406    +/-   ##
===============================================
  Coverage          40.77%   40.78%            
===============================================
  Files                493      493            
  Lines              21955    21960     +5     
  Branches            6486     7266   +780     
===============================================
+ Hits                8953     8956     +3     
+ Misses             12964    12385   -579     
- Partials              38      619   +581     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[axlewin]

This is a big improvement, especially for physics. Just a few places where the focus-visible styling doesn't quite look right:

Physics:

• Quick questions: show/hide answer button has no tabbed styling

Ada:

• Focus on "Create new group" button (/groups) behaves strangely. On Firefox, I get stuck on this element and can't tab away from it.
• Tabbed styling looks strange on some elements: "Published" indicator, assignment names (/assignments), footer links on concepts/questions within assignments
• Share/delete buttons have no tabbed styling (see e.g. /quizzes/set)
• Print/report button icons become illegible when in focus (white on a pale background - this is already the case on the live site, but it looks stranger now that the share button is styled differently).
• /students//teachers have sections where the background colour is very similar to the buttons' focus outline colour

[jacbn]

I've fixed what I easily can, the share/print/report/bin icons aren't regular <Button/>s but instead some @extend monstrosity which is badly messing up the specificity rules. I'd like to fix them properly (i.e. <Button/>ify them) and reduce a bunch of code duplication we have surrounding them but that's spiralling into a much bigger change than I'd like so I'm going to do it separately to this.