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

fix #28: accessibility concerns

Browse Source
This commit is contained in:
atomiks
2018-03-02 09:35:38 +10:00
parent f45ccf4795
commit e3cb9fdd3b
2 changed files with 8 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>

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

@ -5,7 +5,13 @@ 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 = () => {
[menu, links].forEach(el => el.classList.toggle(ACTIVE_CLASS))
menu.setAttribute(
'aria-expanded',
menu.classList.contains(ACTIVE_CLASS) ? 'true' : 'false'
)
}
menu.addEventListener('click', toggle)