Visible focus indicator

[terrill]

The visible focus indicator in the Boundless theme is inconsistent overall, and often the changes are subtle or indecipherable. For example, if the user tabs through the UW home page:

• The block W changes from white to gold
• The links in the audience menu are underlined
• The outer circle of the search button changes from white to gold
• Main nav menu links are underlined
• The icon representing each of the popular links (ArtsUW, Maps, MyUW, etc.) changes color.
• The stylized links within News & Events are extremely subtle (the background color of the arrow changes its shade of purple).

Can we provide users with a more obvious visible focus indicator, that is consistent across all focusable elements? The following CSS is a close approximation to the default focus indicator in Chrome (a prominent blue border):

*:focus {
  border: 3px solid #94BFF9 !important;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 
     0 0 3px rgba(102, 175, 233, 0.6);
  outline: 0 none;
}
button::-moz-focus-inner {
  border: 0;
}
 

[terrill]

It would be actually be really cool I think (and on brand) to provide a variation on the default Chrome indicator that uses Husky purple instead of blue.

[terrill]

When I originally reported this issue, I neglected to mention the lack of a visible focus indicator on links in the main body (or maybe this is a newly introduced problem). In the main body, links that receive focus change to gold. This is a violation of WCAG 2.1 Success Criterion 1.4.1 Use of Color ("Color is not the only visual means of conveying information"). Using color alone to communicate when a link has focus is inaccessible to people with eyesight who are unable perceive color differences. Here's the rule in style.css that changes the style of links within the body when they have focus:

.uw-body a:focus, .uw-body a:hover {
	color: #85754d;
}

Meanwhile, the following rule, also in style.css, removes the browser's default focus indicator on every link. So even Chrome users, accustomed to the prominent blue border around links, get nothing but the color change on focus:

a:focus {
	outline: none;
}

[terrill]

Commenting here to resurface this issue. It's actually two issues. Let me know if you'd like me to post the second one in a separate ticket:

1. We need a standard visible focus indicator that follows keyboard users as they tab through focusable elements on the page.
2. We need hyperlinks in the main content to be underlined.