Closed CharlotteDowns closed 2 weeks ago
Technically, there is a matrix of different parameters.
aria-current
attribute and change its value accordingly ("page" vs "true").aria-current
accordingly.The core question is: Does any combination need to look different from the other?
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.)
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.
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
We have had to go forward and revert back on this one.
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.
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.
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:
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
oractive
Nunjucks parameters.Done when