我有一个组件，悬停时会显示一个按钮和一个您可以单击的链接。这不是菜单...只是页面中间的一个框。
对于可访问性，我希望用户能够切换到容器(现在发生，并在 .HiddenUntilHover 类中显示内容)并且还可以继续切换到按钮和链接显示在悬停/聚焦状态。
现在您可以关注容器并查看悬停状态；但是，当您使用 tab 键时，它只会转到下一个元素，不允许您在悬停状态下使用 tab 键转到按钮或链接。
伪代码示例:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
<a href="...">I am also clickable</a>
</div>
</div>
</div>
还有我的 SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
最佳答案
几天前我遇到了这个问题，我使用 css 类解决了这个问题，使悬停的内容可以通过键盘导航访问。
我得到这个工作的方法是使用 css 伪类来确保当 div 元素处于事件状态并获得焦点时，内部的按钮也会显示。具体来说，额外使用 :focus-within 和 :focus-visible 应该确保当您在列表项上切换时，它们的内容也会显示并且可以通过键盘访问。
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
<a href="...">I am also clickable</a>
</div>
</div>
</div>
</body>
这是Codesandbox demo 的链接这个工作的
关于css - 悬停状态下的选项卡可访问性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50575083/