CODEWITHSUNDEEP
javascriptjquerycssaccessibility
linnse
linnse

Reputation: 461

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).

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>

Upvotes: 0

Views: 66

Answers (1)

slugolicious
slugolicious

Reputation: 17593

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 so that the screen reader will know it's a collapsed section that can be opened.

Upvotes: 2

Related Questions