moj-frontend icon indicating copy to clipboard operation
moj-frontend copied to clipboard

Side navigation reflows to horizontal on small screens

Open gregtyler opened this issue 4 years ago • 0 comments

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"): image

Intended behaviour: image

gregtyler avatar Jun 04 '21 15:06 gregtyler