use:focus as a:hover替换键盘导航

Question

WCAG 2.0建议还使用:focus何时:hover在链接元素上使用以支持键盘导航.这适用于链接元素,但两者之间存在一些差异.

• 任何元素都可以拥有:hover状态,而只有极少数可以聚焦
• 当鼠标悬停在元素上时,您也将鼠标悬停在其所有父元素上.焦点不是这种情况

这个问题严格关于css.有没有办法模拟:hover键盘导航的行为(如上所述)？或者有什么强烈的理由让人不想要那个？

为了使它更清楚这里是一个例子:

HTML:

<div id="box">
    foo bar
    <a href="#">click me</a>
</div>

CSS:

#box {
    opacity: 0.3;
}
#box:hover {
    opacity: 1;
}
#box a:focus {
    opacity: 1;
}

使用鼠标时,我会在使用之前将鼠标悬停在link元素上.由于:hover向上传播的状态#box将完全不透明.

使用键盘时,我会在使用前关注链接元素.由于:focus国家并没有向上传播#box将不会是完全不透明.

Answer 1

这可以在 JavaScript 中通过focusin / focusout事件来完成（它们就像冒泡focus一样blur）。这是一把小提琴。

归结为这个函数：

var deepFocus = function(element, cls) {
    cls = cls || 'deep-focus';

    element
        .on('focusin', function() {
            element.addClass(cls);
        })
        .on('focusout', function() {
            var value = !!element.find(':focus').length;
            element.toggleClass(cls, value);
        });
};

更新：有一个规范草案，其中包含:focus-within选择器，该选择器将完全执行此处所需的操作。