Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Side navigation reflows to horizontal on small screens #159

Open
gregtyler opened this issue Jun 4, 2021 · 0 comments
Open

Side navigation reflows to horizontal on small screens #159

gregtyler opened this issue Jun 4, 2021 · 0 comments
Labels
accessibility bug Something isn't working

Comments

@gregtyler
Copy link
Contributor

gregtyler commented Jun 4, 2021

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 gregtyler added bug Something isn't working accessibility labels Jun 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant