Add visually-hidden class

docs/source/contributing/accessibility-guidelines.md

@@ -39,3 +39,8 @@ The reasoning is that the `<a></a>` HTML tag has specific behavior that screenre
 ## Make sure form elements have a label
 
 This is true for one-element forms as well, such as the "Search" form on the folder-contents component. Putting an icon on it does not convey any meaning to screenreader-users, you should clarify it with an aria-label.
+
+## Additional information for non-visual users
+
+Sometimes extra information needs to be provided to users who are not able to see the screen.
+The `.visually-hidden` class can be used to wrap elements which need to be exposed to assistive technologies, such as screen readers, without them being visible.

docs/source/upgrade-guide/index.md

@@ -50,6 +50,23 @@ If you can't upgrade immediately, you may continue to run Volto 19 on Node.js 20
 
 (19-removed-support-for-loading-configuration-from-project-label)=
 
+### New utility class `visually-hidden`
+
+```{versionadded} Volto 19.0.0-alpha.8
+```
+
+A new global CSS utility class called `visually-hidden` [`@packages/components/src/styles/basic/utility.css`] has been introduced to Volto's SCSS base.
+
+This class allows developers to visually hide elements while keeping them accessible to screen readers, improving accessibility for assistive technologies.
+
+If your project, add-on, or custom theme already defines a `visually-hidden` class, or uses similar accessibility helpers, the new global definition may override or conflict with existing custom styles.
+In which case, you should rename your custom implementation, or override Volto's default, as needed.
+Also review any components that depend on hidden accessibility elements to ensure visual and functional consistency.
+
+```{seealso}
+[Add visually-hidden class #6356](https://github.com/plone/volto/pull/6356)
+```
+
 ### Removed support for loading configuration from project
 ```{versionremoved} Volto 19
 ```

packages/components/src/styles/basic/main.css

@@ -2,6 +2,8 @@
 
 @import './icons.css';
 
+@import './utility.css';
+
 @import './Link.css';
 @import './Button.css';
 @import './ToggleButton.css';

packages/components/src/styles/basic/utility.css

@@ -0,0 +1,12 @@
+.visually-hidden {
+  position: 'absolute';
+  overflow: 'hidden';
+  width: '1px';
+  height: '1px';
+  padding: 0;
+  border: 0;
+  margin: '-1px';
+  clip: 'rect(1px 1px 1px 1px)'; /* IE-style CSS for compatibility */
+  white-space: 'nowrap';
+  word-wrap: 'normal';
+}

packages/volto/news/6356.feature

@@ -0,0 +1 @@
+Added `visually-hidden` utility CSS class that integrators and core developers can use. @JeffersonBledsoe

packages/volto/theme/themes/pastanaga/extras/utils.less

@@ -61,3 +61,16 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
   }
 }
+
+.visually-hidden {
+  position: 'absolute';
+  overflow: 'hidden';
+  width: '1px';
+  height: '1px';
+  padding: 0;
+  border: 0;
+  margin: '-1px';
+  clip: 'rect(1px 1px 1px 1px)'; // IE-style CSS for compatibility
+  white-space: 'nowrap';
+  word-wrap: 'normal';
+}