Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add visually-hidden class #6356

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

JeffersonBledsoe
Copy link
Member

@JeffersonBledsoe JeffersonBledsoe commented Sep 30, 2024

This PR adds a visually-hidden class which is useful in situations where you want to provide additional information to Assistive Technology and an aria-label may not be appropriate.

Questions

  • Should this be 'CMS' only? Or should we provide this utility class for users of the Volto view-mode to rely on too.

Todo

  • Add to @plone/components
  • Rename to sr-only
  • Documentation!

Copy link

netlify bot commented Sep 30, 2024

Deploy Preview for plone-components canceled.

Name Link
🔨 Latest commit f9c67ee
🔍 Latest deploy log https://app.netlify.com/sites/plone-components/deploys/67208980082b3400082d9915

@JeffersonBledsoe JeffersonBledsoe added the 99 tag: UX Accessibility Accessibility issues label Sep 30, 2024
@JeffersonBledsoe JeffersonBledsoe marked this pull request as ready for review September 30, 2024 15:47
@@ -61,3 +61,16 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
}
}
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there might be something from semantic already for visually hidden

@sneridagh
Copy link
Member

@JeffersonBledsoe @ichim-david if we do this, we need that also in @plone/components (for now) to have it also in the future theming.

@sneridagh
Copy link
Member

@JeffersonBledsoe it seems you pushed more changes than the needed in this PR. Can you take a look, please? you deleted things and files, that we cannot remove.

@ichim-david
Copy link
Member

@sneridagh @JeffersonBledsoe I've taken a deeper look and it seems that bootstrap 5 renamed sr-only to visually-hidden.
barceloneta is now based on bootstrap 5 as I see
https://getbootstrap.com/docs/5.3/migration/#helpers-2
https://github.com/plone/plonetheme.barceloneta/tree/master/scss
If we stick to the visually-hidden class, we have the same class name in both systems.

This is such a standard nowadays that I doubt that it could lead to class conflicts on account of modifying such class.
As such I don't think we need to rename it to sr-only unless @sneridagh you have another opinion.

@Wagner3UB
Copy link
Contributor

@plone/volto-accessibility I'll try to run some tests within our theme to see if I can find any conflicts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
99 tag: UX Accessibility Accessibility issues
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants