From ed302bc2750cd4f8cb49b07f745a55f345164cd2 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Thu, 7 Sep 2023 13:21:36 +0200
Subject: [PATCH 1/2] Refactor(web-react): Use `VisuallyHidden` component
 instead of className

refs #DS-926
---
 .../web-react/src/components/FieldGroup/FieldGroup.tsx   | 9 +++++----
 .../components/FileUploader/AttachmentActionButton.tsx   | 7 ++++---
 .../components/FileUploader/AttachmentDismissButton.tsx  | 7 ++++---
 .../src/components/Header/HeaderDialogCloseButton.tsx    | 9 +++++----
 .../src/components/Header/HeaderMobileActions.tsx        | 9 +++++----
 packages/web-react/src/components/Modal/ModalHeader.tsx  | 9 +++++----
 .../src/components/Pagination/PaginationButtonLink.tsx   | 3 ++-
 .../src/components/Pagination/PaginationLink.tsx         | 7 ++++---
 .../src/components/Tooltip/TooltipCloseButton.tsx        | 7 ++++---
 9 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/web-react/src/components/FieldGroup/FieldGroup.tsx b/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
index 49bc7e34e4..3a70e4918d 100644
--- a/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
+++ b/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}
diff --git a/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
index 7f03440b67..756d98959e 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
+++ b/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>
   );
diff --git a/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
index bc4de0439a..88048e2bdc 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
+++ b/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>
   );
diff --git a/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx b/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
index 808347bb00..05c6bfc511 100644
--- a/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
+++ b/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>
   );
 };
diff --git a/packages/web-react/src/components/Header/HeaderMobileActions.tsx b/packages/web-react/src/components/Header/HeaderMobileActions.tsx
index 0052e17cbc..cc0920ef3d 100644
--- a/packages/web-react/src/components/Header/HeaderMobileActions.tsx
+++ b/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>
   );
diff --git a/packages/web-react/src/components/Modal/ModalHeader.tsx b/packages/web-react/src/components/Modal/ModalHeader.tsx
index bcb1519bb7..b994c47593 100644
--- a/packages/web-react/src/components/Modal/ModalHeader.tsx
+++ b/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>
   );
diff --git a/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx b/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
index ee3efedacd..066b14540f 100644
--- a/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
+++ b/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>
   );
 };
diff --git a/packages/web-react/src/components/Pagination/PaginationLink.tsx b/packages/web-react/src/components/Pagination/PaginationLink.tsx
index 7e07daa0a2..84147a3c3a 100644
--- a/packages/web-react/src/components/Pagination/PaginationLink.tsx
+++ b/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>
   );
diff --git a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
index 9768ab3c18..60f739ed59 100644
--- a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
+++ b/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>
   );
 };

From d19b59e0b1f9cc6131da037813e1d04ac1e198e8 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Thu, 7 Sep 2023 13:38:21 +0200
Subject: [PATCH 2/2] Refactor(web-twig): Use `VisuallyHidden` component
 instead of className

refs #DS-926
---
 .../src/Resources/components/FieldGroup/FieldGroup.twig       | 4 ++--
 .../components/FileUploader/FileUploaderAttachment.twig       | 4 ++--
 .../Resources/components/Header/HeaderDialogCloseButton.twig  | 2 +-
 .../src/Resources/components/Header/HeaderMobileActions.twig  | 2 +-
 .../web-twig/src/Resources/components/Modal/ModalHeader.twig  | 2 +-
 .../src/Resources/components/Pagination/PaginationLink.twig   | 2 +-
 .../Resources/components/Pagination/PaginationLinkNext.twig   | 2 +-
 .../components/Pagination/PaginationLinkPrevious.twig         | 2 +-
 .../web-twig/src/Resources/components/Tooltip/Tooltip.twig    | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
index ea1f1b3131..19e08b0880 100644
--- a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
+++ b/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 -}}
diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
index d2a4199dbf..875c2309ec 100644
--- a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
+++ b/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>
diff --git a/packages/web-twig/src/Resources/components/Header/HeaderDialogCloseButton.twig b/packages/web-twig/src/Resources/components/Header/HeaderDialogCloseButton.twig
index ece011037d..0518c12010 100644
--- a/packages/web-twig/src/Resources/components/Header/HeaderDialogCloseButton.twig
+++ b/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>
diff --git a/packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig b/packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig
index 1076bacd40..35cc17a2fd 100644
--- a/packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig
+++ b/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>
diff --git a/packages/web-twig/src/Resources/components/Modal/ModalHeader.twig b/packages/web-twig/src/Resources/components/Modal/ModalHeader.twig
index e86bd8cd9f..f549ff838c 100644
--- a/packages/web-twig/src/Resources/components/Modal/ModalHeader.twig
+++ b/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>
diff --git a/packages/web-twig/src/Resources/components/Pagination/PaginationLink.twig b/packages/web-twig/src/Resources/components/Pagination/PaginationLink.twig
index 63f142a3df..878246c509 100644
--- a/packages/web-twig/src/Resources/components/Pagination/PaginationLink.twig
+++ b/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 }}>
diff --git a/packages/web-twig/src/Resources/components/Pagination/PaginationLinkNext.twig b/packages/web-twig/src/Resources/components/Pagination/PaginationLinkNext.twig
index 8f4469b41d..cf5c4e62af 100644
--- a/packages/web-twig/src/Resources/components/Pagination/PaginationLinkNext.twig
+++ b/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 %}
diff --git a/packages/web-twig/src/Resources/components/Pagination/PaginationLinkPrevious.twig b/packages/web-twig/src/Resources/components/Pagination/PaginationLinkPrevious.twig
index 68671528fa..0f1e4ff819 100644
--- a/packages/web-twig/src/Resources/components/Pagination/PaginationLinkPrevious.twig
+++ b/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 %}
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig
index c8493e3e1d..ef3a805935 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig
+++ b/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>