A tag with href not receiving keyboard focus on tab

Question

I'm working on a menu with links, the structure is ul > li > a tag with href, and the links are not receiving focus on tabbing through the menu. As far as I'm aware the default behaviour of an a tag with a valid href is to receive keyboard focus on tab. Is this an OS/browser issue? I'm on Mac running Catalina and browsing in Chrome.

<ul class="collapse" id="footerLinksHelp">
        <li class="footer-links__item">
            <a href="https://help.com" class="footer-links__link" title="Go to Delivery" rel="noopener" target="_blank">Delivery</a>
        </li>
        <li class="footer-links__item">
            <a href="https://help.com" class="footer-links__link" title="Go to Returns" rel="noopener" target="_blank">Returns</a>
        </li>
        <li class="footer-links__item">
            <a href="https://orders.com" class="footer-links__link" title="Check my Order">Check my Order</a>
        </li>
        <li class="footer-links__item">
            <a href="https://terms.com" class="footer-links__link" title="Go to Terms" rel="noopener" target="_blank">Terms &amp; Conditions</a>
        </li>
        <li class="footer-links__item">
            <a href="https://customer-support.com" rel="noopener" target="_blank">Customer
                Support</a>
        </li>
    </ul>

I've googled this and read through accessibility docs but can't figure out why the a tags are not receiving any keyboard focus. This is an accessibility requirement identified by testing.

Answer 1

Try adding tabindex=0 attribute to your link (anchor tag). Your browser can cause issues like this sometimes but that can't be determined from the above snippet.