a11y reading options bar

[StephDriver]

closes #5337

[StephDriver]

This is effectively a 'focused reading' styling

• basic functionality
  • article pages
  • news items
  • cms pages
  • preprints
  • accessibility information page
• make persistent (as per a11y-mode as a model)
• theme by theme visual styling tweaks
• screen reader testing and updates

Extras:

• preprint OLH theme bug that didn't display preprint html (but material version did) - one line fix included.

[StephDriver]

Limitations / Future Development.

• Initially I introduced options for custom colours, but making the colour pickers accessible to both keyboard and screen-reader users across all three themes became a major piece of work which is out of scope for this issue. So I have left the code side of the customisation for use in future, but it is just not wired up to the templates. Note - the custom colour pickers work fine by mouse. see 3f070e9

• This has been created as a generic feature, which could be added to any page, however the targets on each page need to be set individually. So for this first version I have focused on areas of high text content (article, preprint, CMS, news item).

• Material reading bar is not fully screen-reader accessible. But it is as accessible as the Material Nav - the limitation is Material itself. The state of items in the reading bar is announced, but the drop-downs do not have a menu popup collapsed or menu popup expanded state announced to user. This is the same as with the Material Nav.

[StephDriver]

Screenshots

Non-article pages

Article pages

Also include the draw-attention animation toggle, cite, email and print options, depending on settings. And material doesn't have the cite modals.

Pre-set colours and fonts

I've created a doc to describe how to amend the fonts and colours, they are kept in src/core/text_formats.py for easy editing. Also see note about custom colours above.

Toggles

I've copied the Italics toggle from the previous dyslexia mode, and added one for dark mode which swaps the foreground and background of the current text colours, and one for the draw attention highlighting which is a way to suppress the animation on using an internal page link that briefly draws attention by highlighting the landing element.