使用字体真棒图标的可见焦点

Question

我试图在使用 tab 键切换到包含在 a href 中的 fontawesome 图标时设置可见焦点。

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

如果我在组合中添加一个词。选中时，该词会获得焦点。

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

向图标区域添加可见焦点的最佳方法是什么？

Answer 1

我可以在使用您的确切代码进行 Tab 键时获得焦点。但是，您是否尝试过将 tabindex 添加到您的 a 标签？

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

Visible focus using font awsome icon