Inaccessible content warning: Phase 1

[jacbn]

Adds support for two accessibility warning tags, access:visual and access:motor, to appear around the site.

When the new relevant account setting is set, icons with explanations should appear on all relevant ALVIs (QF, site search, builder). Question/concept pages will also show an alert that should be read out by a screenreader with high priority, and metadata on questions should also include this information.

This feature exists under a new accessibility panel under My Account; a new property for SHOW_INACCESSIBLE_WARNING now exists. If the user has not specified a preference for this, it should default to true for teachers and false for students.

This does not yet add support for filtering in the question finder by these tags, as this requires additional API work. I have started on the FE side of this, however.

[codecov]

Codecov Report

❌ Patch coverage is 57.89474% with 48 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main@15fbadf). Learn more about missing BASE report.
⚠️ Report is 37 commits behind head on main.

Files with missing lines	Patch %	Lines
src/app/components/elements/QuestionMetadata.tsx	21.87%	25 Missing ⚠️
...ents/elements/panels/UserAccessibilitySettings.tsx	66.66%	6 Missing ⚠️
src/app/components/pages/MyAccount.tsx	37.50%	5 Missing ⚠️
...rc/app/components/elements/ContentPropertyTags.tsx	82.35%	3 Missing ⚠️
...rc/app/components/elements/GameboardBuilderRow.tsx	0.00%	2 Missing ⚠️
src/app/components/pages/Concept.tsx	50.00%	2 Missing ⚠️
src/app/components/pages/Question.tsx	66.66%	2 Missing ⚠️
...ents/elements/list-groups/AbstractListViewItem.tsx	66.66%	1 Missing ⚠️
...ts/navigation/InaccessibleContentWarningBanner.tsx	80.00%	1 Missing ⚠️
src/app/services/accessibility.ts	92.85%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1765   +/-   ##
=======================================
  Coverage        ?   41.59%           
=======================================
  Files           ?      541           
  Lines           ?    23675           
  Branches        ?     6981           
=======================================
  Hits            ?     9848           
  Misses          ?    13786           
  Partials        ?       41           

☔ 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.

[sjd210]

Several small things, some of them just questions from me, but mostly this looks good :)

I'm a fan of using the @container structure to style the question-metadata according to its own width rather than breakpoints, to adjust to e.g. both the presence or not of a sidebar. It's neat!

[sjd210]

When question-metadata gets narrow enough that "Stage and Difficulty" is pushed onto its own line, it still keeps this border-left. Unfortunately, this doesn't happen at a specific screenwidth and instead depends on the widths of the status and stage/difficulty.

It looks a little odd, so maybe we should add a breakpoint to enforce this stacked view at a certain full-page width instead (and remove all borders at this size)?

[jacbn]

I tried to choose a width (690px) that would always fit all 4, but clearly it needs to be bigger. Do you remember which page this happened on? I think just increasing that (and the 689.98px below) should fix this.

[sjd210]

The issue is not so much with a specific page, but when the status is All attempted (some errors), since that's a much wider status than all the alternatives. e.g.

(on Phosphorus: A Nutrient Cycle in Crisis)

[sjd210]

While I have it, an example of another weird layout this causes at a different width:

This width of this status just kinda breaks the system you've created :/

[sjd210]

Looking even further into this, we also have similar issues on live already with All attempted (some errors). Tricky!

I know this status wording was decided with content, but the (some errors) part doesn't seem necessary and removing it would certainly be an easy fix. Otherwise I suppose we could set a maximum width of 150px or so to the status section in order to have the text wrap instead? Or that but only at certain container widths, since it would look a little strange when there's space to spare?

[jacbn]

aha, okay. I gave the status section 200px maximum width, but when displaying All attempted (some errors) it uses just under 227px. This was messing with the width of the subjects div, which broke everything. I've bumped the max status width to 227px and it seems better now.

[sjd210]

I think this now all looks good aside from the All attempted (some errors) incongruity. I've tested various questions at different configurations and it does seem like the only time there are errors are when that status exists.

A pre-existing problem to some extent, but these changes really do highlight it.

[sjd210]

The most glaring issue with strange alignment has been solved, although there can still be some unwanted wrapping when dealing with particularly long topic names (looking at you Chemistry | Analytical | Electronic Spectro­scopy :/).

I did some searching to find if there was any way to deal with this using container min-height to detect wrapping, but as soon as a container is determined by size rather than inline-size the automatic height breaks down. I think this is something that we ought to still look to fix at some point (using JS and probably ResizeObservers rather than pure CSS), but at this point the problem was pre-existing so I don't see any harm in merging this in now and leaving that for later. It's niche enough to not be important.