Add conditional styles for different active states of the navigation items

[CharlotteDowns]

What

Add conditional styles for different active states of the navigation items. We have the option for users to remove the link from an individual navigation item when it is active.

There are two active states that we need to consider:

• An active state of a navigation item with sub navigation, where the page displayed to the user is determined by the sub navigation selection.
• An active state of a navigation item without sub navigation or on a homepage before a sub navigation is selected (For example, https://design-system.service.gov.uk/components/ in the GOV.UK Design System).

Setting aria-current specifically doesn't change the visuals of anything.

Setting the current or active Nunjucks parameters adds a class that adds the blue bottom border. We could make those look different by making each one add a different class.

Why

The working group raised that they would like to see more visual distinction between the 'active' nav item and the other nav items.

They also mentioned that the nav item shouldn't be a link if active, we have already addressed this with current or active Nunjucks parameters.

Done when

• [x] Existing styles for the parameters are observed
• [x] Alternate styles are suggested and tested
• [x] A decision is made on whether we introduce new styles
• [ ] Content on how the component when 'active' can be reconfigured to remove the link (add additional styles) is added to the component guidance

[selfthinker]

Technically, there is a matrix of different parameters.

• When an item is highlighted, is it highlighted because that is the page your are on ("current") or under ("active")?
  • This is where we add the aria-current attribute and change its value accordingly ("page" vs "true").
  • There doesn't need to be a sub navigation for the item to be under the page, but could be.
• Is it a link or not?
  • It's considered best practice to not add links when you are on the page. Although in practice very few websites actually do that, including bbc.co.uk and w3.org.
  • This is currently a separate option in our code. Our breadcrumbs component combines those two parameters, i.e. when the item is not a link then it is also assumed to be the item for the current page you are on and sets the aria-current accordingly.

The core question is: Does any combination need to look different from the other?

1. Current page which is a link
2. Active page which is a link
3. Current page which is not a link
4. Active page which is not a link

Number 1 and 2 currently look the same. If I understood the working group's comment correctly, this is what they suggested should look different.

Number 3 already does look different (I think).

Number 4 probably doesn't make any sense and could maybe be actively made impossible? (Not sure if it is currently possible.)

[CharlotteDowns]

A design suggestion has been made to make the bottom border of an active navigation item black when the href is removed.

However, this It isn't necessarily an easy change, as the active class is added to the containing element of the nav item, rather than the contents of it—so the element with the active class doesn't know if it contains a link or not.

Further considerations and suggestions

The 'simple' change would be to have two different active classes, but that makes the component more complex for not much benefit.

The 'proper' change would probably be to refactor the things so that the border is tied to the anchor/span rather than the container, but that would take more time and probably require browser retesting. (Accessibility probably wouldn't be affected, outside of that border now appearing in different colours in High Contrast Mode).

Whether this is necessary in the first place depends on a still-pending line in the Navigation decision log

We should make the nav item indicate that the user is on that specific page different to how we indicate that the user is on a child page of that section

[CharlotteDowns]

We have had to go forward and revert back on this one.

Initial decision

We made an initial decision to refactor the Navigation component so the active styles and text colour change could happen at the same code item level. Although we would not introduce new styles this change would make it easier to provide new styling to the active and link elements.

However, this had an impact on the focus states of the Navigation items and caused visual disruption on the page. This could make Navigation items harder to be understood as focused in different colour modes as well as being very overwhelming visually in default.

Example of a focused navigation item after refactoring

Example of a focused and active navigation item after refactoring

Reverted decision

We reverted the decision based on what we learned about the change in focus state.

There is a method for our users to still customise the styles by using :has(). Although it's relatively new and is not supported by older browsers.

Example of a focused navigation item before refactoring