moj-frontend
moj-frontend copied to clipboard
More accessible design for Organisation switcher
Summary
The Organisation switcher currently floats the link to the right, which can be an issue for accessibility: the link can be hard to see and click, and isn't clearly associated with the organisation name.
A more appropriate design (and one already adopted in some services) would be to button the link alongside the text:

Since this may be a visually-breaking-change for some services, we should make this new design opt-in as a minor release, and then change the default behaviour in a future release. Therefore I propose adding a new option to the Nunjucks macro: link.position can be "inline" or "right" (currently defaulting to "right").
The "inline" option could use standard GOV.UK Design System classes rather than needing bespoke MOJ Frontend classes. For example:
<div class="moj-organisation-nav" aria-label="Organisation switcher">
<strong class="govuk-body govuk-!-font-weight-bold">Bristol (HMP)</strong>
<a href="#" class="govuk-link">Change your location</a>
</div>
Describe alternatives you've considered
Due to the simplicity of this component, I'm not sure there are any other suitable options that don't amount to a full redesign.
Additional context
Raised in the accessibility audit and later via Slack.