gov-au-ui-kit
gov-au-ui-kit copied to clipboard
Bug - .site-nav last-child in mobile view is missing active visuals
What I did
Unable to determine the active page on a small screen width (eg mobile) when the last item in the list is active.
What browser and device I was using
Chrome inspector / Emulated iPhone6:Chrome (browserstack
What I expected to see
An indication of the page I'm on. Items other than last-child have a different coloured border which was the expectation, BUT even that isn't likely to pass WCAG:
WCAG 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
What I saw
Additional information (optional)
Suggest changing active state to something other than colour, for example font-weight or a new border left for active?
CSS overriding the .is-active
class:
@media screen and (max-width: 767px)
main.css:1
.site-nav__wrapper li:last-child a {
border-bottom: none;
}