Child Element Not Accessible With Tab Key

Question

I need to make the child elements of a div container accessible with the tab / (shift + tab) keys.

The container has a tabindex="0" and the child divs and hyperlinks also have a tabindex="0":

<div style="border: 1px solid black; width: 350px; height: 150px;" tabindex="0">
this is a link: <a href="#" tabindex="0">Link</a>
<br>
this is a div: <div style="border: 1px solid black; width: 100px; height: 100px;" tabindex="0"></div>
</div>

If you paste this anywhere in a SharePoint library or a SharePoint list using the browser's inspect element mode, there is no issue.

However, anywhere else (e.g. landing page of the SharePoint site), the problem is that you need to press 'Enter' to access the child elements, and then 'Escape' to 'get out of' the div container.

I would like a solution to make the child elements accessible by using the tab and shift+tab keys.

Answer 1

Hi anonymous user,

In my test, using Script Editor WebPart in SharePoint Wiki page and writing the code you provided in it, it has no issue.

To help you better ,can you provide detailed information or screenshots?

Thanks for your understanding and support.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

Hi anonymous user,

According to my research and testing, you can change the outermost div container to tabindex="-1", the tabindex value of the child element unchanged, so that the tab key is used to access the child elements.

Full code:

<div style="border: 1px solid black; width: 350px; height: 150px;" tabindex="-1">  
this is a link: <a href="#" tabindex="0">Link</a>  
<br>  
this is a div: <div style="border: 1px solid black; width: 100px; height: 100px;" tabindex="0"></div>  
</div>  

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---