交互元素的「:focus-visible」
发布网友
发布时间：2024-10-19 23:13
我来回答
共1个回答
热心网友
时间：2024-11-29 23:53
在VEUI这个基于Vue.js的百度商业系统组件库中，我们已经开发了一段时间，期间遇到了一些挑战，其中包括对`:focus-visible`的关注。`:focus-visible`是CSS Selectors Level 4草案中的一个特性，同时也是WICG项目的一部分。它旨在帮助开发者更好地控制元素在聚焦时的视觉呈现。
以Ant Design的按钮为例，当点击一个按钮时，它会匹配`:focus`状态，显示组件的聚焦样式。然而，在按钮组中，这可能导致用户产生误以为按钮被选中的感觉。Ant Design的例子突显了注重细节的项目在处理键盘访问时的考虑。相比之下，很多组件库未充分考虑此类交互，从而引发问题。
然而，Chrome的原生按钮在点击后通常不会显示可视聚焦样式，只有在使用键盘时才会显现。这促使开发者提出一个新伪类的需求，以控制聚焦状态的视觉样式。`:focus-visible`这个名字来源于Chrome对键盘焦点的“环”样式的逻辑，但后来改名以明确其视觉效果。WICG/focus-visible提供了polyfill，但不同浏览器对此处理方式各异，比如Firefox/Safari不会给点击事件后的元素添加焦点。
在决定何时需要视觉焦点提示时，关键在于非随机访问的情况。我的观点是，当元素在非随机访问时获取焦点，`:focus-visible`就足够了。VEUI的默认样式包veui-theme-one已经依赖了这个polyfill，目标是提供最佳的用户体验。尽管VEUI尚在alpha内测阶段，我们期待未来的正式发布能得到大家的支持与认可。
