Skip to content
This repository has been archived by the owner on Mar 5, 2018. It is now read-only.

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

Open
TrebBrennan opened this issue Feb 21, 2017 · 0 comments
Open

Comments

@TrebBrennan
Copy link
Contributor

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;
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant