On press enter anchor tag is not working after using tabindex="0" for div wrapper around it

Question

i have an issues that safari is not focusing my anchor element,so for that i used tabindex="0" around the div, now the on press enter the link is not working in any browser, please let me know if i am doing anything wrong.

    <div class="used__button" tabindex="0">
<a href="/new/sales/lights/red-lamps">Find Used</a>
</div>

before using tabindex the the link worked on chrome on press enter, i used tabinde ="0" to give focus to the element in safari on tab for accessibility.

Answer 1

You shouldn't put two focusable elements one inside the other, as there shouldn't be two clickable elements one inside the other. This is an endless source of strange bugs like the one you are experiencing here.

When you press enter in the inner element, should the event bubble out? Should several actions happen in the same time in this case? Is the outer element still in focus when the inner element is focused? How can I know that there are two distinct zones one inside the other? This is the kind of question that isn't very clear, may not be always well controllable, and/or depends on the browser. IN brief it's unclear neither for you, nor for users who might find your website behaving weird. So you'd better avoid that pattern altogether.

Coming back to your specific case, you should most probably remove tabindex=0 from the outer div, so to let the inner link working as normal.

Alternatively, if you really think that the div must be focusable, the better solution is to remove the inner link and change the div into a link at its place. First rule of ARIA says that you shouldn't use it if you don't really need to; it's the same for tabindex. Use CSS to remove link-styling if that's not what you want.