gov-au-ui-kit icon indicating copy to clipboard operation
gov-au-ui-kit copied to clipboard

Bug - .site-nav last-child in mobile view is missing active visuals

Open TrebBrennan opened this issue 8 years ago • 0 comments

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

screen-shot-2017-02-21-at-3 00 33-pm

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;
}

TrebBrennan avatar Feb 21 '17 04:02 TrebBrennan