Skip to content

Commit

Permalink
fix tc39#147, make element focus more obvious
Browse files Browse the repository at this point in the history
Prior to this commit, depending on the browser being used, it may
have been quite difficult to see which element was in focus when
navigating the page using the tab key. This has been corrected by
adjusting the `:focus` pseudo-class styles for selectable elements
so that it no longer depends on inconsistent user-agent styles.

Notes:
    https://user-images.githubusercontent.com/17770407/87440188-b38cdc80-c5bf-11ea-86e3-8b1c8652e25b.png
    https://user-images.githubusercontent.com/17770407/87440518-141c1980-c5c0-11ea-964f-70ff56523438.png

Fixes: tc39#147
  • Loading branch information
DerekNonGeneric committed Jul 14, 2020
1 parent 324e2d5 commit 6b34153
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions _sass/_a11y.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,20 @@
white-space: nowrap;
width: 1px;
}

:focus {
outline-offset: .125rem;
outline-style: solid;
outline-width: .125rem;
}

.logo-box a:focus {
outline-color: $color-nav;
}

.featurelist__item__tag,
.submenu {
:focus {
outline: 0;
}
}

0 comments on commit 6b34153

Please sign in to comment.