嵌套级别选项卡无法使用HTML CSS？

我在这里添加了我的代码和演示链接

下面是一些列表项，每个列表都包含一些“编辑、删除”操作按钮 在鼠标上只能看到操作按钮，根据WCAG，我想通过按tab键到下一个按钮和列表来显示操作按钮

按using tab时，我无法选择操作按钮

我想先选择列表，然后选择操作按钮

每个列表都是一样的

.action{
显示：无；
}
钮扣{
保证金：5px；
}
ul li：专注。行动{
显示：块；
}
悬停。行动{
显示：块；
}

这是管理菜单列表


集合1
补充

集合2
补充

集合3
补充

集合4
补充

集合5
补充

当您点击时，焦点移动到按钮，留下

li

。CSS规则是这样的：

li

失去焦点将隐藏按钮的容器

您可以使用而不是

：focus

来解决此问题。它适用于具有焦点或包含具有焦点的元素

不幸的是，IE或Edge不支持它，但我相信它是唯一不涉及JavaScript的解决方案

.action{
显示：无；
}
钮扣{
保证金：5px；
}
ul li：关注内部。行动{
显示：块；
}
悬停。行动{
显示：块；
}

这是管理菜单列表


集合1
补充

集合2
补充

集合3
补充

集合4
补充

集合5
补充

当您点击时，焦点移动到按钮，留下

li

。CSS规则是这样的：

li

失去焦点将隐藏按钮的容器

您可以使用而不是

：focus

来解决此问题。它适用于具有焦点或包含具有焦点的元素

不幸的是，IE或Edge不支持它，但我相信它是唯一不涉及JavaScript的解决方案

.action{
显示：无；
}
钮扣{
保证金：5px；
}
ul li：关注内部。行动{
显示：块；
}
悬停。行动{
显示：块；
}

这是管理菜单列表


集合1
补充

集合2
补充

集合3
补充

集合4
补充

集合5
补充

强制性Can-I-Use:。。。。。不爱微软users@JonP似乎是这样。另外，您可能知道，但是所有MDN链接的底部都有支持表：）尽管如此，我认为caniuse更具可读性/信息性。我经常忘记MDN上的兼容性表，主要是因为它们被隐藏在页面底部！是的，事实上，我在发布了这个问题后试过了：在chrome浏览器中使用focus-in它工作得很好，我想chrome最近得到了这个选项：focus-in“any way谢谢。强制性的Can-i-Use:。。。。。不爱微软users@JonP似乎是这样。另外，您可能知道，但是所有MDN链接的底部都有支持表：）尽管如此，我认为caniuse更具可读性/信息性。我经常忘记MDN上的兼容性表，主要是因为它们被隐藏在页面底部！是的，事实上，我在chrome浏览器中发布了这样一个问题后尝试过：focus in in（聚焦在chrome浏览器中）它工作得很好，我想chrome最近被赋予了这个选项：focus in（聚焦在chrome浏览器中）谢谢。