sr-only: It's missing the focus pseudo selector.

[sandrina-p]

Hi all! Why doesn't the .sr-only class includes the :focus selector? You can see it recommended in a few blogs by A11Y experts:

• A11Y project - How to hide content
• Scott O'Hara — Inclusively-hidden
• Ben Myers — The Web Needs a Native .visually-hidden

.sr-only:not(:focus):not(:active):not(:focus-within) {
  /* ... */
}

The blogposts explain why we need the extra pseudo-selectors.

Another advantage is, for example, the "Skip link" scenario (source tailwind guide about screen-readers)

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

Could be simplified to:

<a href="#content" class="sr-only">
  Skip to content
</a>

Thoughts? :)

[eloyesp]

I agree with your proposal... in the meantime I'm doing this:

module.exports = {
  # ...
  corePlugins: {
    accessibility: false,
  },
}

@layer utilities {
  /* Alternative implementation sr-only that makes focused text visible */
  .sr-only:not(:focus-within):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

The only change I've made is removing the ":focus" selector, as ":focus-within" should already do that.