How to reverse .visually-hidden on :focus

[stowball]

We have a .visually-hidden class to accessibly hide content from sighted users, but to keep it available to screen reader users which works well, and can be conditionally used with media queries etc as necessary.

However, in the case of "Skip To Content" links, we want to easily provide a way to undo the group of properties. See TurretCSS for prior art: https://github.com/turretcss/turretcss/blob/master/turret/accessibility/screen-reader.css#L23

My only worry is that depending on the design, undoing Skip To Content could need to be achieved in very different ways: slide in from off-screen, just appear at the top and push all content down etc, so there's no 1 way of supporting this.

[joeldbirch]

"Skip to content" links seem like an edge case that isn't suited to a .visually-hidden helper class. I think a class that reverses .visually-hidden is worthwhile even without it working for such cases.

[stowball]

@joeldbirch What would you use the reversal class for? And is it something that would work constrained to media queries? For example:

@mq-upto-768--visually-hidden
@mq-1024--visually-hidden

The above is already possible and how I've "quarantined" the visually hiding to certain design states only.

[joeldbirch]

Off the top of my head, I can only imagine reversing it by basic media queries, as shown in your example here. So I take it back. Probably don’t need the reverse helper.

…

On 5 Oct 2019, at 8:27 pm, Matt Stow ***@***.***> wrote:  @joeldbirch What would you use the reversal class for? And is it something that would work constrained to media queries? For example: @mq-upto-768--visually-hidden @mq-1024--visually-hidden The above is already possible and how I've "quarantined" the visually hiding to certain design states only. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[stowball]

Closing for now. Like you say, Skip to content is an edge case and is highky dependent on the design.

If we think of any real use case for reversing visually-hidden, we can re-open.

[stowball]

It seems Tailwind added a not-sr-only class tailwindlabs/tailwindcss#964

[stowball]

I've now enabled another solution with the following commit: d622bbb

We can use pseudos:

$hu-visually-hidden-modules: (
  core: $hu-visually-hidden-modules,
  pseudos: (":not(:focus):not(:active)"),
);

to generate:

.\&\:not\(\:focus\)\:not\(\:active\)--visually-hidden:not(:focus):not(:active) {
  border: none ;
  clip: rect(0 0 0 0) ;
  height: 1px ;
  margin: -1px ;
  overflow: hidden ;
  padding: 0 ;
  position: absolute ;
  white-space: nowrap ;
  width: 1px ;
}

which could be used like so:

<a
  class="&:not(:focus):not(:active)--visually-hidden"
  href="#main"
>
  Skip to content
</a>

This allows it to only be visually-hidden when not focused or active 💪