moj-frontend
moj-frontend copied to clipboard
Side navigation reflows to horizontal on small screens
NB: This is a breaking change
On small screens, the Sub navigation component changes from a horizontal list into a vertical one. The side navigation component does the opposite, changing from a vertical list into a horizontal one.
A recent accessibility audit highlighted that this hid some of the options by default, effectively making them unavailable for users using magnifiers or larger font sizes.
The small screen view for this component should instead stack the navigation elements as inline blocks, so that they are all visible. This approach is consistent with the Primary navigation and Header components.
Slightly contrived current example (you would need to scroll the component right to see "Nav item 3"):

Intended behaviour:
