0
208
ViewsAdding style on div on keyboard focus
I'm trying to figure out how can I add style = display:block on div.sub_menu on keyboard focus. Right now I can only access a tag but I'm not sure how to get in to div sub_menu. The examples I have seen has no before for dropdown
https://blog.hubspot.com/website/accessible-drop-down-menus
Below is my html and javascript code:
var menuItems = document.querySelectorAll('li.dir');
Array.prototype.forEach.call(menuItems, function(el, i) {
el.querySelector('a').addEventListener("focus", function(event) {
if (this.parentNode.className == "dir") {
this.parentNode.className = "dir menu_hover";
this.setAttribute('aria-expanded', "true");
} else {
this.parentNode.className = "dir";
this.setAttribute('aria-expanded', "false");
}
event.preventDefault();
return false;
});
});<ul class="primary">
<li class="dir current">
<a href="" title="Home" aria-haspopup="true"><span>Home</span></a>
<div class="sub_menu">
<ul class="sub_sub_menu ">
<li class=" ">
<a href="" title="Test"><span>Test Page</span></a>
</li>
</ul>
</div>
</li>
<li class="dir ">
<a href="" title="Our Products" aria-haspopup="true"><span>Our Products</span></a>
<div class="sub_menu">
<ul class="sub_sub_menu ">
<li class=" ">
<a href="" title="Test Products"><span>Test Products</span></a>
</li>
</ul>
</div>
</li>
<li class=" ">
<a href="" title="News"><span>News</span></a>
</li>
</ul>Thank you!
1 answers
Answer question0
There is "focusin" and "focusout" that you would need to toggle classes such as in a menu structure to open/close as you want. See below, when home is focused, the <a> item under "sub_sub_menu" is given display: block; by adding the class .expanded to it. When focus is removed the classes are toggled off in the focusout event listener.
var menuItems = document.querySelectorAll('li.dir');
Array.prototype.forEach.call(menuItems, function(el, i) {
el.querySelector('a').addEventListener('focusin', function(event) {
event.preventDefault();
this.parentNode.className = "dir menu_hover";
this.setAttribute('aria-expanded', "true");
el.querySelector('div > ul > li > a').className = "expanded";
});
el.querySelector('a').addEventListener('focusout', function(event) {
event.preventDefault();
this.parentNode.className = "dir";
this.setAttribute('aria-expanded', "false");
el.querySelector('div > ul > li > a').className = "";
});
});.expanded {
color: red;
background-color: black;
display: block;
}<ul class="primary">
<li class="dir current">
<a href="" title="Home" aria-haspopup="true"><span>Home</span></a>
<div class="sub_menu">
<ul class="sub_sub_menu ">
<li class=" ">
<a href="" title="Test Page"><span>Test Page</span></a>
</li>
</ul>
</div>
</li>
<li class="dir ">
<a href="" title="Our Products" aria-haspopup="true"><span>Our Products</span></a>
<div class="sub_menu">
<ul class="sub_sub_menu ">
<li class=" ">
<a href="" title="Test Products"><span>Test Products</span></a>
</li>
</ul>
</div>
</li>
<li class=" ">
<a href="" title="News"><span>News</span></a>
</li>
</ul>Produces the following result when Home is on focus.
If what you really want are hover events,
- replace 'focusin' with 'mouseover'
- replace 'focusout' with 'mouseout'