Update u-off-screen utility

[steverydz]

Done

Updated the u-off-screen utility to reflect the recommend standard as recommended here: https://www.tpgi.com/the-anatomy-of-visually-hidden/

QA

• Go to https://vanilla-framework-4639.demos.haus/docs/examples/utilities/off-screen
• Check that the u-off-screen example still hides the content
• Review updated documentation:
  • https://vanilla-framework-4639.demos.haus/docs/utilities/off-screen

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-4639.demos.haus

[ClementChaumel]

Superb 👍️

[steverydz]

Can this be merged or are you waiting on a release?

[bartaz]

@steverydz Once approved, if it has the version bump, and whatever else needed it can be merged.

Thanks for that!

[bartaz]

For the record, this change seems to mess up a bit with how cypress detects if elements are visible or not visible. We found a workaround for that in React component for tooltip, but if this comes up later we may need to find a better solution.

Related fix in react components: canonical/react-components#888