add aria-expanded and tabindex values to parent based on current URL
I'm creating a jQuery-powered, WAI-ARIA tree menu for a site that doesn't have any server-side capabilities. Because of this, my only way of changing the menu dynamically is to check the current URL and compare it against the current file. For a match, I need to do all of these things:
- Add a class of "current" to the
<li>
element that holds the<a>
element that matches the current page's URL - Add a class of "current" to the
<li>
element that holds the<ul>
element that holds the<li>
element that holds the<a>
element that matches the current page's URL - Set the
aria-expanded
attribute totrue
on the<li>
element targeted in number 2 above - Set the
tabindex
attribute to0
on the child<a>
element of the<li>
element targeted in number 2 above (NOT the<a>
that is actually the current page)
Here's what the resulting HTML should look like (if "owls.html" is the current page):
<nav id="nav-sub">
<ul role="tree">
<li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
开发者_StackOverflow <ul role="group">
<li role="treeitem"><a href="ducks.html">Ducks</a></li>
<li role="treeitem"><a href="geese.html">Geese</a></li>
<li role="treeitem" class="current"><a href="owls.html">Owls</a></li>
</ul>
</li>
<li role="treeitem" class="tree-parent" aria-expanded="false"><a href="" tabindex="-1">Cats</a>
<ul role="group">
<li role="treeitem"><a href="lions.html">Lions</a></li>
<li role="treeitem"><a href="tigers.html">Tigers</a></li>
</ul>
</li>
</ul>
</nav>
I've gotten this bit of jQuery to do the trick for items 1 through 3:
$(document).ready( function () {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$("#nav-sub li a[href='" + pathname + "']").parents(".tree-parent").attr('aria-expanded', 'true');
$("#nav-sub li a[href='" + pathname + "']").parents("li").addClass("current");
});
However, I'm a JavaScript/jQuery newbie, so I'm not sure if this is the best or most efficient way to do what I want. If anyone can suggest a better way to approach it, I'd appreciate it!
But I don't know how to achieve item 4, adding the tabindex value to the first-level <a>
element, because it's not actually a parent/ancestor of the current page's <a>
element. What can I add to my script to target this <a>
element and change its tabindex value from -1 to 0?
var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);
I'd probably use
$("#nav-sub li a[href='" + pathname + "']").closest('.tree-parent').next('a').attr('tabindex','0');
Also, I'd probably set a variable to $("#nav-sub li a[href='" + pathname + "']")
so I don't have to keep traversing the tree to get it. Possibly the same with the tree-parent if I'm using it more than once.
I haven't really tested that - but something like that should get what you want.
精彩评论