sergiodj/binario
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add keyboard-only focus on main menu button

Browse source
This commit is contained in:
vimux 2018-11-29 09:38:20 -05:00
parent 45f0ca00f7
commit 9c67e4c2cb
No known key found for this signature in database
GPG key ID: 5A34FDC4EE832E34
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
layouts/partials/menu.html
View file

@ -1,10 +1,12 @@
{{- if .Site.Menus.main }} {{- if .Site.Menus.main }}
<nav class="main-nav" role="navigation"> <nav class="main-nav" role="navigation">
<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false"> <button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false" tabindex="0">
<svg class="main-nav__btn-icon icon-menu" width="18" height="18" viewBox="0 0 18 18"> <div class="main-nav__btn-box" tabindex="-1">
<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/> <svg class="main-nav__icon icon-menu" width="18" height="18" viewBox="0 0 18 18" >
<path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/> <path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
</svg> <path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/>
</svg>
</div>
</button> </button>
<ul id="menu" class="main-nav__list"> <ul id="menu" class="main-nav__list">
{{- $currentNode := . }} {{- $currentNode := . }}

26
static/css/main.css
View file

@ -477,15 +477,15 @@ mark {
} }
.main-nav__btn { .main-nav__btn {
display: block;
float: right; float: right;
width: 42px;
height: 42px;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
cursor: pointer; cursor: pointer;
background-color: #2a2a2a; background-color: #2a2a2a;
border: 0; border: 0;
border-left: 1px solid #333; border-left: 1px solid #333;
outline: 0;
fill: #f8ae00; fill: #f8ae00;
} }
@ -494,6 +494,28 @@ mark {
color: #000; color: #000;
} }
.main-nav__btn-box {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
}
:focus > .main-nav__btn-box {
box-shadow: inset 0 0 1px 3px #4285f4;
}
button:not(:-moz-focusring):focus > .main-nav__btn-box {
box-shadow: none;
}
.main-nav__btn:focus,
.main-nav__btn-box:focus {
outline: none;
}
.main-nav__btn .icon-menu__burger { .main-nav__btn .icon-menu__burger {
display: inline; display: inline;
} }