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

---
 .../components/Button/stories/ButtonColorsSizes.twig          | 2 +-
 .../Resources/components/Button/stories/ButtonDisabled.twig   | 2 +-
 .../components/ButtonLink/stories/ButtonLinkColorsSizes.twig  | 2 +-
 .../components/ButtonLink/stories/ButtonLinkDisabled.twig     | 2 +-
 .../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 +-
 12 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
index 1a35473464..4a11c7c007 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -11,7 +11,7 @@
           Menu
         </Button>
         <Button color={color} size={size} isSquare>
-          <span class="accessibility-hidden">Menu</span>
+          <VisuallyHidden>Menu</VisuallyHidden>
           <Icon name="hamburger" />
         </Button>
       </div>
diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
index 7702cd0245..472c421ba5 100644
--- a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
+++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -11,7 +11,7 @@
           Menu
         </Button>
         <Button color={color} size={size} isSquare isDisabled>
-          <span class="accessibility-hidden">Menu</span>
+          <VisuallyHidden>Menu</VisuallyHidden>
           <Icon name="hamburger" />
         </Button>
       </div>
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
index acd8e6e5f5..31b4049280 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -10,7 +10,7 @@
             <div>
             <ButtonLink color={color} size={size} href="#">Button {{ color }}</ButtonLink>
             <ButtonLink color={color} size={size} href="#" isSquare>
-                <span class="accessibility-hidden">Menu</span>
+                <VisuallyHidden>Menu</VisuallyHidden>
                 <Icon name="link" />
             </ButtonLink>
             </div>
diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
index 457964abe4..08f039f092 100644
--- a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
+++ b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -10,7 +10,7 @@
             <div>
             <ButtonLink color={color} size={size} isDisabled href="#">Disabled {{ color }}</ButtonLink>
             <ButtonLink color={color} size={size} href="#" isSquare isDisabled>
-                <span class="accessibility-hidden">Menu</span>
+                <VisuallyHidden>Menu</VisuallyHidden>
                 <Icon name="link" />
             </ButtonLink>
             </div>
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>