Outline does not work properly in Firefox

Question

I am trying to put some custom outlines to get some recommendations on web page accessibility. But I can not do with Firefox.

Here's what it looks like in Chrome:

And this icon is actually an anchor.

In Firefox, this is just a description of the entire document:

In Firefox, it describes a document, and on the next tab, it focuses again on the search bar.

Here you can see Codepen, I did: https://codepen.io/maketroli/pen/owRWag

Or a piece of code :

// 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

Run code

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>

Any suggestions?

Answer 1

mac? OS X , Firefox (Chrome ), . , - .

" ", , :

.

" ", Firefox Chrome OSX.