组-焦点不在我的代码上使用尾风code

Question

我的小组焦点不起作用，但是组悬停和组活动是有效的，我用laravel 9编写这个代码。有解决方案吗？

<nav id="nav-menu" class="lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none  hidden absolute py-5 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full">
                <ul class="block lg:flex">
                    <li class="group">
                        <a href="/" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500 group-active:text-slate-700">Home</a>
                    </li>
                    <li class="group">
                        <a href="/about" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500 group-focus:text-purple-400 group-active:text-pink-700">About</a>
                    </li>
                    <li class="group">
                        <a href="/blog" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500">Blog</a>
                    </li>
                    <li class="group">
                        <a href="/login" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500">Login</a>
                    </li>
                </ul>
            </nav>

Answer 1

链接的父元素(<li>标记)是而不是可聚焦的元素。根据HTML标准

HTML用户界面通常由多个交互式小部件组成，如表单控件、可滚动区域、链接、对话框、浏览器选项卡等。这些小部件形成层次结构，其中一些部件(例如浏览器选项卡、对话框)包含其他部件(例如链接、表单控件)。

<li>不是交互式的，因此不能集中精力，这就是为什么group-focus什么也不做--这个组没有重点(但是链接本身是集中的)。你可以

1. 将链接的group-focus状态更改为focus

// I removed all non-related classes

<li class="group">  
  <a href="/about" class="focus:text-purple-400">About</a>
</li>

1. 使用<li>属性使tabindex焦点可用

<li class="group" tabindex="0">  
  <a href="/about" class="group-focus:text-purple-400">About</a>
</li>

但是我不推荐第二种方式，因为有WCAG (没有必要使这个元素具有可聚焦性)

Answer 2

试试focus-within:text-purple-400 (如果我对这个问题的理解是正确的)

https://tailwindcss.com/docs/hover-focus-and-other-states#focus