andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #47 from atomiks/fix-28

Browse Source 
[FIX #28]: Accessibility concerns
This commit is contained in:
atomiks
2018-03-02 10:36:18 +10:00
committed by GitHub
parent f45ccf4795 efbd790816
commit 65587fa376
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -12,7 +12,7 @@
<body>
<button class="back-to-top-button" aria-label="back to top">↑</button>
<nav class="sidebar" aria-label="Table of Contents">
<button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu">
<button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu" aria-expanded="false">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>

6
src/js/components/Menu.js
View File

@ -5,7 +5,11 @@ const menu = select('.hamburger')
const links = select('.sidebar__links')
const ACTIVE_CLASS = 'is-active'
const toggle = () => [menu, links].forEach(el => el.classList.toggle(ACTIVE_CLASS))
const toggle = () => {
const els = [menu, links]
els.forEach(el => el.classList.toggle(ACTIVE_CLASS))
menu.setAttribute('aria-expanded', menu.classList.contains(ACTIVE_CLASS) ? 'true' : 'false')
}
menu.addEventListener('click', toggle)