Organisation switcher

[dombillington]

Existing component

• Organisation switcher in MoJ Pattern Library

The existing organisation switcher pattern in the MOJ library floats the change link to the right of the layout. At widescreen desktop resolutions, the relationship between these elements isn’t clear. 61% of users in DPS have a desktop resolution of 1920 x 1080.

What we've changed

In DPS, we’ve iterated on this layout to move the change link next to the location. This makes it clearer to users that the change link is associated with the location displayed.

The link text in DPS is: ‘change your location'. We’ve included the pronoun to make it clear to the user they’re changing their location, not the location of a prisoner.

Work in MoJ

Service: Digital Prison Services (DPS)

[Whersi]

Ticket number

#284

The details of the ticket is as follows:

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.