swup/a11y-plugin

CSS docs

hirasso opened this issue · 1 comments

Describe the problem

Intuitively, I would have thought that this CSS should hide any outline on the <main> element:

main:focus {
  outline: none;
}

But in the docs it recommends this approach:

main[tabindex="-1"] {
  outline: none;
}

In my tests, it works well with the simple :focus selector. Is there a reason for the [tabindex] form being chosen in the docs?

daun commented

That's sort of the result of the research I've done before creating the plugin. I can't remember, though, why this was necessary. Maybe to remind people that they need to add the tabindex attribute manually to have it work in all browser? I'll see if I find a clue in my notes.