Laurence L Laurence L - 1 month ago 21
Less Question

Visible focus using font awsome icon

I am trying to set the visible focus when tabbing to a fontawesome icon wrapped in an a href.

<a href="#" class="expand_collapse" aria-hidden="true">
<i class="fa fa-chevron-down"></i>
</a>


If I add a word into the mix. the word gets focus when tabbed to.

<a href="#" class="expand_collapse" aria-hidden="true">
<i class="fa fa-chevron-down"></i>
Hello Bob!
</a>


What is the best way to add a visible focus to the icon area?

Answer

I am able to get focus when tabbing with your exact code. However have you tried adding a tabindex to your a tag?

<a href="#" class="expand_collapse" aria-hidden="true" tabindex="1">
    <i class="fa fa-chevron-down"></i>
</a>