CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
Non
Non

Reputation: 8589

Outline not working properly on Firefox

I am trying to put some custom outline in order to reach some web accessibility suggestions. But I can't make with Firefox.

This is how it looks on Chrome:

enter image description here

And that icon is actually an anchor.

On Firefox, it is only outlining the whole document, like this:

enter image description here

On Firefox it is outlining the document and in the next tab it focuses on the search bar again.

Here you may see a Codepen I did: https://codepen.io/maketroli/pen/owRWag

Or a code Snippet:

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

Any suggestions?

Upvotes: 4

Views: 1484

Answers (1)

hoosteeno
hoosteeno

Reputation: 704

Are you using a mac? OS X has a system-wide preference which Firefox honors (Chrome does not) that changes the behavior of the tab key in windows and dialogs. It is probably set to tab only to text boxes -- skipping anchor tags.

Search System Preferences for "full keyboard access" and you'll find it, or refer to the screenshot below:

Keyboard Shortcuts Preferences.

Set to "All Controls" to make Firefox behave like Chrome on OSX.

Upvotes: 1

Related Questions