Refactor/use visually hidden component

packages/web-react/src/components/FieldGroup/FieldGroup.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
-import { useFieldGroupStyleProps } from './useFieldGroupStyleProps';
-import { SpiritFieldGroupProps } from '../../types';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
+import { SpiritFieldGroupProps } from '../../types';
 import { useValidationText } from '../Field/useValidationText';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useFieldGroupStyleProps } from './useFieldGroupStyleProps';
 
 const FieldGroup = (props: SpiritFieldGroupProps) => {
   const {
@@ -35,7 +36,7 @@ const FieldGroup = (props: SpiritFieldGroupProps) => {
       className={classNames(classProps.root, styleProps.className)}
       disabled={isDisabled}
     >
-      <legend className="accessibility-hidden">{label}</legend>
+      <VisuallyHidden elementType="legend">{label}</VisuallyHidden>
       {!isLabelHidden && (
         <div className={classProps.label} aria-hidden="true">
           {label}

packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
 import { SpiritAttachmentActionButtonProps } from '../../types';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
-import { useStyleProps } from '../../hooks';
 
 const AttachmentActionButton = (props: SpiritAttachmentActionButtonProps) => {
   const { name = 'edit', children, ...restProps } = props;
@@ -18,7 +19,7 @@ const AttachmentActionButton = (props: SpiritAttachmentActionButtonProps) => {
       {...styleProps}
       className={classNames(classProps.attachment.button, styleProps.className)}
     >
-      <span className="accessibility-hidden">{children}</span>
+      <VisuallyHidden>{children}</VisuallyHidden>
       <Icon name={name} aria-hidden="true" />
     </button>
   );

packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+import { useStyleProps } from '../../hooks';
 import { SpiritAttachmentDismissButtonProps } from '../../types';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
-import { useStyleProps } from '../../hooks';
 
 const AttachmentDismissButton = (props: SpiritAttachmentDismissButtonProps) => {
   const { children, ...restProps } = props;
@@ -18,7 +19,7 @@ const AttachmentDismissButton = (props: SpiritAttachmentDismissButtonProps) => {
       {...styleProps}
       className={classNames(classProps.attachment.button, styleProps.className)}
     >
-      <span className="accessibility-hidden">{children}</span>
+      <VisuallyHidden>{children}</VisuallyHidden>
       <Icon name="close" aria-hidden="true" />
     </button>
   );

packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { ClickEvent, HeaderDialogCloseButtonProps } from '../../types';
+import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useHeaderDialogContext } from './HeaderDialogContext';
 import { HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT } from './constants';
 import { useHeaderStyleProps } from './useHeaderStyleProps';
-import { useHeaderDialogContext } from './HeaderDialogContext';
-import { Icon } from '../Icon';
 
 const HeaderDialogCloseButton = (props: HeaderDialogCloseButtonProps) => {
   const { label = HEADER_DIALOG_CLOSE_BUTTON_LABEL_DEFAULT, onClick, ...restProps } = props;
@@ -30,7 +31,7 @@ const HeaderDialogCloseButton = (props: HeaderDialogCloseButtonProps) => {
       style={styleProps.style}
     >
       <Icon name="close" />
-      <span className="accessibility-hidden">{label}</span>
+      <VisuallyHidden>{label}</VisuallyHidden>
     </button>
   );
 };

packages/web-react/src/components/Header/HeaderMobileActions.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { HeaderMobileActionsProps } from '../../types';
-import { HEADER_MENU_TOGGLE_LABEL_DEFAULT } from './constants';
-import { useHeaderStyleProps } from './useHeaderStyleProps';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { HEADER_MENU_TOGGLE_LABEL_DEFAULT } from './constants';
+import { useHeaderStyleProps } from './useHeaderStyleProps';
 
 const HeaderMobileActions = (props: HeaderMobileActionsProps) => {
   const {
@@ -29,7 +30,7 @@ const HeaderMobileActions = (props: HeaderMobileActionsProps) => {
       {children}
       <Button aria-controls={dialogId} aria-expanded={isOpen} color="inverted" onClick={onOpen} isSquare>
         <Icon name="hamburger" />
-        <span className="accessibility-hidden">{menuToggleLabel}</span>
+        <VisuallyHidden>{menuToggleLabel}</VisuallyHidden>
       </Button>
     </div>
   );

packages/web-react/src/components/Modal/ModalHeader.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { ClickEvent, ModalHeaderProps } from '../../types';
-import { useModalStyleProps } from './useModalStyleProps';
-import { useModalContext } from './ModalContext';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useModalContext } from './ModalContext';
+import { useModalStyleProps } from './useModalStyleProps';
 
 const ModalHeader = (props: ModalHeaderProps) => {
   const { children, closeLabel = 'Close', ...restProps } = props;
@@ -31,7 +32,7 @@ const ModalHeader = (props: ModalHeaderProps) => {
         aria-controls={id}
       >
         <Icon name="close" />
-        <span className="accessibility-hidden">{closeLabel}</span>
+        <VisuallyHidden>{closeLabel}</VisuallyHidden>
       </Button>
     </header>
   );

packages/web-react/src/components/Pagination/PaginationButtonLink.tsx

@@ -2,6 +2,7 @@ import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SpiritPaginationButtonLinkProps } from '../../types';
 import { ButtonLink } from '../Button';
 import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 
 /* We need an exception for components exported with forwardRef */
 /* eslint no-underscore-dangle: ['error', { allow: ['_PaginationButtonLink'] }] */
@@ -19,7 +20,7 @@ const _PaginationButtonLink = <E extends ElementType = 'a'>(
   return (
     <ButtonLink color="secondary" isSquare {...restProps} ref={ref}>
       <Icon name={iconType[direction]} />
-      <span className="accessibility-hidden">{accessibilityLabel}</span>
+      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
     </ButtonLink>
   );
 };

packages/web-react/src/components/Pagination/PaginationLink.tsx

@@ -1,7 +1,8 @@
-import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import classNames from 'classnames';
-import { SpiritPaginationLinkProps } from '../../types';
+import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
+import { SpiritPaginationLinkProps } from '../../types';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { usePaginationStyleProps } from './usePaginationStyleProps';
 
 /* We need an exception for components exported with forwardRef */
@@ -22,7 +23,7 @@ const _PaginationLink = <E extends ElementType = 'a'>(
       {...styleProps}
       className={classNames(classProps.link, styleProps.className)}
     >
-      <span className="accessibility-hidden">{accessibilityLabel}</span>
+      <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
       <span aria-hidden="true">{pageNumber}</span>
     </ElementTag>
   );

packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { useStyleProps } from '../../hooks';
-import { Icon } from '../Icon';
 import { TooltipCloseButtonProps } from '../../types';
+import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { useTooltipStyleProps } from './useTooltipStyleProps';
 
 const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipCloseButtonProps) => {
@@ -18,7 +19,7 @@ const TooltipCloseButton = ({ label = 'Close', onClick, ...restProps }: TooltipC
       aria-expanded="true"
     >
       <Icon name="close" aria-hidden="true" />
-      <span className="accessibility-hidden">{label}</span>
+      <VisuallyHidden>{label}</VisuallyHidden>
     </button>
   );
 };

packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig

@@ -55,9 +55,9 @@
     {{ _disabledAttr }}
 >
     {% if _labelRendered %}
-        <legend class="accessibility-hidden">
+        <VisuallyHidden elementType="legend">
             {{- _labelRendered -}}
-        </legend>
+        </VisuallyHidden>
         {% if not _isLabelHidden %}
             <div {{ classProp(_labelClassNames) }} aria-hidden="true">
                 {{- _labelRendered -}}

packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig

@@ -45,7 +45,7 @@
     {% if _onEdit %}
         <span class="FileUploaderAttachment__slot">
             <button type="button" class="FileUploaderAttachment__action" onclick="{{ _onEdit }}">
-                <span class="accessibility-hidden">{{ _editText }}</span>
+                <VisuallyHidden>{{ _editText }}</VisuallyHidden>
                 <Icon name="edit" isReusable={ false } />
             </button>
         </span>
@@ -55,7 +55,7 @@
         class="{{ _removeClassName }}"
         data-spirit-populate-field="button"
     >
-        <span class="accessibility-hidden">{{ _removeText }}</span>
+        <VisuallyHidden>{{ _removeText }}</VisuallyHidden>
         <Icon name="close" isReusable={ false } />
     </button>
 </li>

packages/web-twig/src/Resources/components/Header/HeaderDialogCloseButton.twig

@@ -22,5 +22,5 @@
     aria-expanded="false"
 >
     <Icon name="close" />
-    <span class="accessibility-hidden">{{ _label }}</span>
+    <VisuallyHidden>{{ _label }}</VisuallyHidden>
 </button>

packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig

@@ -21,6 +21,6 @@
         isSquare
     >
         <Icon name="hamburger" />
-        <span class="accessibility-hidden">{{ _menuToggleLabel }}</span>
+        <VisuallyHidden>{{ _menuToggleLabel }}</VisuallyHidden>
     </Button>
 </div>

packages/web-twig/src/Resources/components/Modal/ModalHeader.twig

@@ -38,6 +38,6 @@
         isSquare
     >
         <Icon name="close" />
-        <span class="accessibility-hidden">{{ _closeLabel }}</span>
+        <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
     </Button>
 </header>

packages/web-twig/src/Resources/components/Pagination/PaginationLink.twig

@@ -30,6 +30,6 @@
     {{ _targetAttr }}
     {{ _typeAttr | raw }}
 >
-    <span class="accessibility-hidden">{{ _accessibilityLabel }}</span>
+    <VisuallyHidden>{{ _accessibilityLabel }}</VisuallyHidden>
     <span aria-hidden="true">{{ _pageNumber }}</span>
 </{{ _elementType }}>

packages/web-twig/src/Resources/components/Pagination/PaginationLinkNext.twig

@@ -18,6 +18,6 @@
 }) } %}
     {% block content %}
         <Icon name="chevron-right" />
-        <span class="accessibility-hidden">{{ _accessibilityLabel }}</span>
+        <VisuallyHidden>{{ _accessibilityLabel }}</VisuallyHidden>
     {% endblock %}
 {% endembed %}

packages/web-twig/src/Resources/components/Pagination/PaginationLinkPrevious.twig

@@ -18,6 +18,6 @@
 }) } %}
     {% block content %}
         <Icon name="chevron-left" />
-        <span class="accessibility-hidden">{{ _accessibilityLabel }}</span>
+        <VisuallyHidden>{{ _accessibilityLabel }}</VisuallyHidden>
     {% endblock %}
 {% endembed %}

packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig

@@ -39,7 +39,7 @@
             aria-expanded="true"
         >
             <Icon name="close" aria-hidden="true" />
-            <span class="accessibility-hidden">{{ _closeLabel }}</span>
+            <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
         </button>
     {% endif %}
     <span class="{{ _arrowClassName }}"></span>