Rename sr-only/sr-only-focusable to visually-hidden/visually-hidden-focusable

[patrickhlauke]

To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). So .v-hidden and .v-hidden-focusable.

Goes hand-in-hand with #31133

[patrickhlauke]

This is a breaking change, so no backporting. tried to strike a balance of brevity here with .v-hidden rather than .visually-hidden.

And yes, it's possibly silly/inconsequential, but the term sr is loaded with false assumptions, and would be good to transition away from it going forward...so doing it as a breaking change in a new version seems the most opportune time

[ffoodd]

I think this is a very good idea. Two things, though:

• I'm afraid .v-hidden could be confusing, meaning visibility for some people.
• maybe the file itself should be renamed? _screenreader.scss does not make much sense, does it?

[patrickhlauke]

@ffoodd i think even expanding this to .visually-hidden it will still be confusing/confused with visibility for some devs. Not sure there's a better way/naming around this (that is also not overly verbose). as for the second point, see #31133 (i filed that separately because even if we don't want to go through all this class renaming, the documentation should be clearer/more reflective of the reality anyway)

[patrickhlauke]

related:

• reachUI uses "VisuallyHidden" https://reacttraining.com/reach-ui/visually-hidden/
• a11yproject has .visually-hidden (so perhaps there's an argument to go for the longer/more verbose version?) https://a11yproject.com/posts/how-to-hide-content/

[mdo]

:chef_kiss: Looks great!

[patrickhlauke]

so are we happy/ok with .v-hidden (relatively short) or want to go for full-on .visually-hidden (perhaps clearer but more wordy)?

[patrickhlauke]

also, thoughts on #31133, and whether to backport that one or not?

[XhmikosR]

TBH I don't know if v-hidden is better or not. I feel like it more ambiguous, but sr was also an abbreviation.

[ffoodd]

I'd be in favor of .visually-hidden.

[voltaek]

If I saw v-hidden in some Bootstrap markup I would assume it was the utility for visibility: hidden;. I had to go reference the docs to actually check what the utility for visibility is (it's .visible and .invisible) because I rarely use it.

Using .visually-hidden seems like a good solution to that.

[patrickhlauke]

so despite the lengthier classname, it seemingly preferred to go with .visually-hidden . .visually-hidden-focusable for clarity (and at least for the former, precedent of https://a11yproject.com/posts/how-to-hide-content/). @mdo?

[mdo]

I'm good with the longer name. Honestly every time I see it I think "very hidden" more than I think "visually hidden" lol.

[MartijnCuppens]

Joining camp longer name

[patrickhlauke]

right, renamed the classes/mixins to the longer but clearer variant. and on reflection, probably little use in backporting #31133 ... just concentrating on v5 for this.

in short, i think this is ready for merging, and after that #31133 would be good to merge as well. unless this needs to wait for #31122 @XhmikosR ?

[patrickhlauke]

sorry, a bit of back and forth, but i think the migration.md is now as it should be... sanity check from @XhmikosR ?

[XhmikosR]

Just FYI that's not a rebase, not sure how you resolved the commits but in the future please rebase and squash your patches.

[patrickhlauke]

i followed the command line instructions given here by github. sorry i'm not a git expert...