nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some more basic dropdown a11y considerations

This commit is contained in:
Jake Mason 2023-01-16 23:02:36 -05:00
parent ad904de16b
commit df253d0a33
1 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/templates/src/include/header.html
View File

@ -71,8 +71,10 @@
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a> <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
</div> </div>
<div class="root-item"> <div class="root-item">
<a>Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a> <a aria-expanded="false" aria-controls="media-submenu" class="menu-dropdown-js" href="#">
<div class="submenu b--theme-dark"> Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</a>
<div class="submenu b--theme-dark" id="media-submenu">
<a href="{{ .Header.ConferencesUrl }}">Conferences</a> <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
<a href="{{ .Header.PodcastUrl }}">Podcast</a> <a href="{{ .Header.PodcastUrl }}">Podcast</a>
<a href="{{ .Header.FishbowlUrl }}">Fishbowls</a> <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
@ -83,8 +85,10 @@
<a href="{{ .Header.ForumsUrl }}">Forums</a> <a href="{{ .Header.ForumsUrl }}">Forums</a>
</div> </div>
<div class="root-item"> <div class="root-item">
<a>Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a> <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
<div class="submenu b--theme-dark"> Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
</a>
<div class="submenu b--theme-dark" id="resource-submenu">
<a href="{{ .Header.EducationUrl }}">Education</a> <a href="{{ .Header.EducationUrl }}">Education</a>
</div> </div>
</div> </div>
@ -133,6 +137,28 @@
} }
} }
// dropdown accessiblity
{
const dropdowns = document.querySelectorAll('.menu-dropdown-js');
for(let i = 0; i < dropdowns.length; i++) {
let dropdown = dropdowns[i];
dropdown.addEventListener('click', e => {
e.preventDefault();
for(let j = 0; j < dropdowns.length; j++){
let each = dropdowns[j];
if(each != dropdown){
each.setAttribute("aria-expanded", false);
}
}
// getAttribute returns a string so we have to do it this way
var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false";
dropdown.setAttribute("aria-expanded", toSetTo);
console.log(dropdown);
});
}
}
// set up login form // set up login form
{ {
const loginPopup = document.getElementById("login-popup"); const loginPopup = document.getElementById("login-popup");