概述在Firefox上无法正常工作

Question

我正在尝试添加一些自定义大纲，以便获得一些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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#">one</a>
  <a href="#">two</a>
  <a href="#">three</a>
</div>

有什么建议吗？

Answer 1

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

搜索系统偏好设置＆＃34;全键盘访问＆＃34;你会发现它，或参考下面的截图：

。

设置为＆＃34;所有控件＆＃34;使Firefox在OSX上表现得像Chrome。