Accessibility audit - text layout fixes

[helenb]

Link to Ticket

Description of Changes Made

Various changes as a result of finding text layout issues both with the font-size settings adjusted, and when testing the default font-size at tablet size.

• Reduce spacing between secondary nav columns at smaller font sizes to prevent issues with longer words being obscured when font size is increased
• Tweak grid layout at tablet size for the key points block, to prevent issues with overlapping content when font-size is large
• Tweak the image listing layout when the overall width is smaller, to prevent the case where the image is large and the text is really tall and thin.

How to Test

See https://docs.google.com/spreadsheets/d/1jEfzMuoz_gv5aA9sEraNkJL3Wzis41tHnuCKrWvE_H0/edit?gid=1992549741#gid=1992549741 for example pages to test (wherever it says 'Fix in progress'). Note the URLs on the sheet are on the production site, but if you pull the staging data you'll have a lot of them). It's useful to also pull the staging images to test the listing changes.

Screenshots

Expand to see more

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Performance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[chris-lawton]

Thanks @helenb, left a couple of comments for review : )

[chris-lawton]

Good to go!