Refactor(web-twig): Use VisuallyHidden component instead of className

lmc-eu · Sep 7, 2023 · 3cb3f69 · 3cb3f69
1 parent 86f587e
commit 3cb3f69
Show file tree

Hide file tree

Showing 12 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>