英文:
Finding last focusable link in subnav modal
问题
We have four main menu items (Shirts, Pants, Footwear, Headgear) and each of them has a subnavigation menu when you click on it. For example, when clicking on Shirts, a menu opens up with more options (ABC Brand to Z Brand).
主菜单类别包括（衬衫、裤子、鞋类、帽子），每个类别点击后都有一个子导航菜单。例如，点击衬衫，会打开一个包含更多选项（从ABC品牌到Z品牌）的菜单。
Main nav class is .mainNav
主导航类别是 .mainNav
Sub nav class is .subNav
子导航类别是 .subNav
When the user tabs through the subNav and reaches the end, we want the user to be taken to the next mainNav item. For example, when the user lands on Shirts > Z Brand, and then hits tab again, we want the subNav for shirts to close and the user to be taken to Pants.
当用户通过子导航并达到末尾时，我们希望用户被带到下一个主导航项目。例如，当用户落在衬衫 > Z品牌上，然后再次按Tab键，我们希望衬衫的子导航关闭，并将用户带到裤子。
How can I find the last focusable item in the subNav so when the tab is clicked, this functionality happens?
我如何找到子导航中的最后一个可聚焦项目，以便在点击Tab键时执行此功能？
<div class="mainNav">
<a="#">Shirts</a>
<a="#">Pants</a>
<a="#">Footwear</a>
<a="#">Headgear</a>
</div>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-2">
<h1>Headgear</h1>
<a="#">Big Caps</a>
<a="#">Levis</a>
<a="#">Pacific Hatwear</a>
<a="#">Polo</a>
<a="#">Stetson</a>
</div>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
<a="#">Converse</a>
<a="#">New Balance</a>
<a="#">Nike</a>
<a="#">Puma</a>
<a="#">Saucony</a>
</div>
英文:
We have four main menu items (Shirts, Pants, Footwear, Headgear) and each of them has a subnavigation menu when you click on it. For example, when clicking on Shirts, a menu opens up with more options (ABC Brand to Z Brand).
Main nav class is .mainNav
Sub nav class is .subNav
When the user tabs through the subNav and reaches the end, we want the user to be taken to the next mainNav item. For example, when the user lands on Shirts > Z Brand, and then hits tab again, we want the subNav for shirts to close and the user to be taken to Pants.
How can I find the last focusable item in the subNav so when the tab is clicked, this functionality happens?
<div class="mainNav">
<a="#">Shirts</a>
<a="#">Pants</a>
<a="#">Footwear</a>
<a="#">Headgear</a>
</div>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-2">
<h1>Headgear</h1>
<a="#">Big Caps</a>
<a="#">Levis</a>
<a="#">Pacific Hatwear</a>
<a="#">Polo</a>
<a="#">Stetson</a>
</div>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
<a="#">Converse</a>
<a="#">New Balance</a>
<a="#">Nike</a>
<a="#">Puma</a>
<a="#">Saucony</a>
</div>
</details>
# 答案1
**得分**: 2
评论部分已经很满，所以我想在这里发布一些代码。OP中发布的示例代码并没有在每个主导航元素之后直接放置每个子导航，因此浏览器无法正确处理选项卡顺序。
如果将代码更改为以下内容，将会有所帮助：
```
<div class="mainNav">
<a="#">Shirts</a>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<a="#">Pants</a>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<a="#">Footwear</a>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
</div>
</div>
```
每个子导航在主导航被选择打开之前都应该具有`display:none`。当它具有`display:none`时，它不会出现在选项卡顺序中。当它具有`display:block`时，浏览器会自动将其插入选项卡顺序，而无需进行任何操作。
在OP中未提及的其他可访问性考虑因素包括，每个主导航元素应该具有[`aria-expanded`][1]，以便屏幕阅读器知道它是一个可以展开的折叠部分。
[1]: https://www.w3.org/TR/wai-aria/#aria-expanded
<details>
<summary>英文:</summary>
The comments section was getting full so I wanted to post some code here. The sample code posted in the OP does not have each subnav directly after each main nav element so the tabbing order won't be handled properly by the browser.
If the code were changed to this, it would help:
```
<div class="mainNav">
<a="#">Shirts</a>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<a="#">Pants</a>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<a="#">Footwear</a>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
</div>
</div>
```
Each subnav should have `display:none` until the main nav is selected to open it. When it has `display:none`, it's not in the tab order. When it has `display:block`, it'll be inserted into the tab order by the browser without you having to do anything.
There are other accessibility considerations that weren't mentioned in the OP, such as each main nav element should have [`aria-expanded`][1] so that the screen reader will know it's a collapsed section that can be opened.
[1]: https://www.w3.org/TR/wai-aria/#aria-expanded
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论