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.

To fix the issue, we will remove the unused LinkProps import from the react-router-dom package. This will clean up the code and eliminate the unnecessary import. No other changes are required since the removal of this import does not affect the functionality of the code.

[codecov]

Codecov Report

Attention: Patch coverage is 23.52941% with 78 lines in your changes missing coverage. Please review.

Project coverage is 40.91%. Comparing base (06a24f0) to head (eb71981).
Report is 8 commits behind head on redesign-2024.

Files with missing lines	Patch %	Lines
...c/app/components/elements/layout/SidebarLayout.tsx	21.11%	71 Missing ⚠️
...ents/elements/list-groups/AbstractListViewItem.tsx	37.50%	5 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.93%   40.91%   -0.02%     
=================================================
  Files                493      493              
  Lines              21845    21855      +10     
  Branches            7206     7212       +6     
=================================================
+ Hits                8942     8943       +1     
- Misses             12291    12300       +9     
  Partials             612      612              

☔ 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