开发者

add aria-expanded and tabindex values to parent based on current URL

开发者 https://www.devze.com 2023-04-11 05:20 出处:网络
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

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:

  1. Add a class of "current" to the <li> element that holds the <a> element that matches the current page's URL
  2. 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
  3. Set the aria-expanded attribute to true on the <li> element targeted in number 2 above
  4. Set the tabindex attribute to 0 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.

0

精彩评论

暂无评论...
验证码 换一张
取 消