javascript–概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.

这就是它在Chrome上的外观：

而那个图标实际上是一个锚点.

在Firefox上,它只概述了整个文档,如下所示：

在Firefox上,它概述了文档,在下一个选项卡中,它再次关注搜索栏.

在这里你可能会看到我做的Codepen：https://codepen.io/maketroli/pen/owRWag

或者代码片段：

// This function sets outline on tab and removes it on click
var elArr = Array.from ? Array.from(document.querySelectorAll("a")) : Array.prototype.slice.call(document.querySelectorAll("a")); // Fallback for IE because as usual nothing works there!
elArr.forEach(function(a) {
return a.addEventListener("click", function() {
$(a).addClass("no-outline").removeClass('custom-outline');
});
});
elArr.forEach(function(a) {
return a.addEventListener("focus", function() {
$(a).removeClass("no-outline").addClass('custom-outline');
});
});
// END

CSS

.wrapper {
margin-top: 50px;
display: flex;
}
a {
border: 1px solid red;
padding: 20px;
margin-right: 10px;
}
.no-outline {
outline: 0 !important;
}
.custom-outline:focus {
outline: 2px dotted blue !important;
}


有什么建议？

解决方法:

你在用mac吗？ OS X具有系统范围的偏好,Firefox尊重(Chrome不支持),它改变了窗口和对话框中Tab键的行为.它可能设置为仅选项卡到文本框 – 跳过锚标记.

“完全键盘访问”的搜索系统首选项,您将找到它,或参考下面的屏幕截图：

.

设置为“所有控件”以使Firefox在OSX上的行为与Chrome相同.