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

More accessible design for Organisation switcher

Open gregtyler opened this issue 3 years ago • 0 comments

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

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.

gregtyler avatar Dec 15 '21 14:12 gregtyler