How to tab past closed modal links? #a11y

General accessibility question here. I'm looking for general approach, but will also note that this is in a React app so statefulness is a consideration.

Take the following code example of a list of actions, which open corresponding modals. Ideally, you would be able to tab through the list of actions in sequence - but because the modals have links inside, the tabbing experience is not ideal. Basically, you hit 'action 1' and then tab 6 more times before hitting 'action 2' due to the 5 links contained in the modal.

<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 1</a>

   <!-- modal containing links -->
   <aside class="item__modal modal" id="modal-interview-1">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>
<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 2</a>

   <!-- modal containing links -->
   <aside class="item__modal modal" id="modal-interview-2">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>

The question on approach what is the best way to handle hiding the anchor tags from the DOM, or at least from tabbing and screen reading, when a tab is disabled? I've tried adding disabled to the anchors, and adding an aria-focusable="false" to the modal when it's inactive... but it's not giving me the desired effect of skipping the links.

Thanks for your help with this issue.

I'm a big fan of the inert attribute. It's currently still in draft (I've heard that it's available in Chrome behind a flag). You can polyfill the attribute

In essence, you'd set inert as the element is hidden and all technologies would act as though the links aren't there. There's a really good demo on the polyfill page that will better illustrate the idea. I think it would solve your issue.

aria-focusable="false" is only for screen readers and not well supported, which is why you are struggling with that.

You have a couple of robust options:-

1. Use display: none on the item__modal modal and then when you add the modal--active override it to display: block (or whatever, flex etc.) - display: none on a parent element is robust and will always make it's children unfocusable. This will always work and is the best option.

2. Set a tabindex="-1" on each link (sadly you can't add it to the parent as it can still get overridden on some screen readers) and change it to tabindex="0" when the modal opens.

    <aside class="item__modal modal modal--active" id="modal-interview-1">
       <a href="#" tabindex="-1">Sample 1</a>
       <a href="#" tabindex="-1">Sample 2</a>
       <a href="#" tabindex="-1">Sample 3</a>
       <a href="#" tabindex="-1">Sample 4</a>
       <a href="#" tabindex="-1">Sample 5</a>
    </aside>
   

This will work consistently across all browsers.

##It isn't just the tab key

The reason the above are the only robust options is because screen reader users rarely navigate by the tab key.

For example a NVDA user will use 1-6 to navigate by heading levels (H1 - H6) and K to navigate by links to get a feel for the page.

##final option (not recommended)

You could intercept the tab key presses and manage focus, but you would need to then add aria-hidden="true" to each of the links for the same reason (and change it to aria-hidden="false" when the modal is active.

This last option does at least afford you the option of using opacity: 0 to hide the items etc. if you really need to.