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

refs #DS-926
lmc-eu · Sep 8, 2023 · 46a120a · 46a120a
1 parent f795b81
commit 46a120a
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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>