Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Visible focus indicator #145

@terrill

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions