Nav bar does not have visible focus

[Tiffany Little]

When the links in the nav bar receive keyboard focus, the CSS reflects that the background color is set to "transparent" and the text decoration is set to "none." This causes the visible focus of the elements to disappear upon keyboard focus. A user who utilizes a screen magnification tool may lose track of where they are on the page if unable to clearly see where focus has landed.

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: transparent;

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;

We should ensure that all focusable elements have sufficient visible focus. See more about visible focus indicators here: https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

See: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246%2C131#focus-visible

See also: https://wiki.evergreen-ils.org/doku.php?id=accessibility:webclient_audit

[Stephanie Leary (stephanieleary)]

Fixed as a result of the work on bug 1828468. I'm going to mark this as a duplicate, but please reopen if there are any remaining focus issues in the navbar. Other focus issues will be addressed in bug 1828463.