根据当前URL向父级添加aria扩展值和tabindex值

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

本文关键字：aria 添加 扩展 tabindex URL      更新时间：2023-09-26

我正在为一个没有任何服务器端功能的网站创建一个jQuery支持的WAI-ARIA树菜单。因此，我动态更改菜单的唯一方法是检查当前URL并将其与当前文件进行比较。对于一场比赛，我需要做所有这些事情：

  1. 向包含与当前页面URL匹配的<a>元素的<li>元素添加一个类"current">
  2. 将一个类"current"添加到包含<ul>元素的<li>元素中，<li>元素包含与当前页面URL匹配的<a>元素
  3. 将上面编号2中目标的<li>元素上的aria-expanded属性设置为true
  4. 将上面编号2中目标<li>元素的子<a>元素上的tabindex属性设置为0(而不是实际为当前页面的<a>(

以下是生成的HTML应该是什么样子(如果"owls.HTML"是当前页面(：

<nav id="nav-sub">
 <ul role="tree">
  <li role="treeitem" class="tree-parent current" aria-expanded="true"><a href="" tabindex="0">Birds</a>
    <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>

我已经用jQuery完成了项目1到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");
});

然而，我是JavaScript/jQuery的新手，所以我不确定这是做我想做的事情的最好还是最有效的方法。如果有人能提出更好的方法，我将不胜感激！

但我不知道如何实现第4项，将tabindex值添加到第一级<a>元素，因为它实际上不是当前页面的<a>元素的父/祖先。我可以向脚本中添加什么来针对这个<a>元素并将其tabindex值从-1更改为0？

var $treeParent = [current <a> element].closest('.tree-parent');
$('> a', $treeParent).attr('tabindex', 0);

我可能会使用

$("#nav-sub li a[href='" + pathname  + "']").closest('.tree-parent').next('a').attr('tabindex','0');

此外，我可能会将一个变量设置为$("#nav-sub li a[href='" + pathname + "']")，这样我就不必一直遍历树来获取它。如果我不止一次使用它，树父级可能也是如此。

我还没有真正测试过，但这样的东西应该会得到你想要的。

相关文章：