fixup! fixup! fixup! fixup! fixup! Feat(web-react): Introduce Footer …

…component #DS-1368
lmc-eu · Sep 26, 2024 · e55d647 · e55d647
1 parent e118dc5
commit e55d647
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
@@ -12,6 +12,7 @@ import { Stack } from '../../../src/components/Stack';
 import { Text } from '../../../src/components/Text';
 import { UNSTABLE_ProductLogo } from '../../../src/components/UNSTABLE_ProductLogo';
 import { defaultSvgLogo } from '../../../src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault';
+import { VisuallyHidden } from '../../../src/components/VisuallyHidden';
 import { GridColumns } from '../../../src/types';
 
 type FooterCompositionsProps = {
@@ -286,31 +287,31 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             <Flex elementType="ul" alignmentX={showLanguageSwitch ? 'center' : 'right'} alignmentY="center">
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
-                  <span className="accessibility-hidden">Facebook</span>
+                  <VisuallyHidden>Facebook</VisuallyHidden>
                   <Icon name="logo-facebook" />
                 </ButtonLink>
               </li>
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
-                  <span className="accessibility-hidden">X</span>
+                  <VisuallyHidden>X</VisuallyHidden>
                   <Icon name="logo-x" />
                 </ButtonLink>
               </li>
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
-                  <span className="accessibility-hidden">YouTube</span>
+                  <VisuallyHidden>YouTube</VisuallyHidden>
                   <Icon name="logo-youtube" />
                 </ButtonLink>
               </li>
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
-                  <span className="accessibility-hidden">Google</span>
+                  <VisuallyHidden>Google</VisuallyHidden>
                   <Icon name="logo-google" />
                 </ButtonLink>
               </li>
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
-                  <span className="accessibility-hidden">LinkedIn</span>
+                  <VisuallyHidden>LinkedIn</VisuallyHidden>
                   <Icon name="logo-linkedin" />
                 </ButtonLink>
               </li>

diff --git a/packages/web-react/src/components/Footer/README.md b/packages/web-react/src/components/Footer/README.md
@@ -97,7 +97,7 @@ Use the secondary [ButtonLink][buttonlink] component to create social media link
   {/* Repeat the `<li>` block for each social media link. */}
   <li>
     <ButtonLink size="medium" color="secondary" isSquare>
-      <span className="accessibility-hidden">Facebook</span>
+      <VisuallyHidden>Facebook</VisuallyHidden>
       <Icon name="logo-facebook" />
     </ButtonLink>
   </li>
@@ -181,19 +181,19 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
       <Flex elementType="ul" alignmentX="center" alignmentY="center">
         <li>
           <ButtonLinkLink size="medium" color="secondary" isSquare>
-            <span className="accessibility-hidden">Facebook</span>
+            <VisuallyHidden>Facebook</VisuallyHidden>
             <Icon name="logo-facebook" />
           </ButtonLink>
         </li>
         <li>
           <ButtonLinkLink size="medium" color="secondary" isSquare>
-            <span className="accessibility-hidden">X</span>
+            <VisuallyHidden>X</VisuallyHidden>
             <Icon name="logo-x" />
           </ButtonLink>
         </li>
         <li>
           <ButtonLinkLink size="medium" color="secondary" isSquare>
-            <span className="accessibility-hidden">YouTube</span>
+            <VisuallyHidden>YouTube</VisuallyHidden>
             <Icon name="logo-youtube" />
           </ButtonLink>
         </li>

diff --git a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
@@ -11,6 +11,7 @@ import { Stack } from '../../Stack';
 import { Text } from '../../Text';
 import { UNSTABLE_ProductLogo } from '../../UNSTABLE_ProductLogo';
 import { defaultSvgLogo } from '../../UNSTABLE_ProductLogo/demo/ProductLogoDefault';
+import { VisuallyHidden } from '../../VisuallyHidden';
 import Footer from '../Footer';
 import FooterLinkFactory from './FooterLinkFactory';
 
@@ -106,31 +107,31 @@ const FooterDefault = () => {
           <Flex elementType="ul" alignmentX="center" alignmentY="center">
             <li>
               <ButtonLink size="medium" color="secondary" isSquare>
-                <span className="accessibility-hidden">Facebook</span>
+                <VisuallyHidden>Facebook</VisuallyHidden>
                 <Icon name="logo-facebook" />
               </ButtonLink>
             </li>
             <li>
               <ButtonLink size="medium" color="secondary" isSquare>
-                <span className="accessibility-hidden">X</span>
+                <VisuallyHidden>X</VisuallyHidden>
                 <Icon name="logo-x" />
               </ButtonLink>
             </li>
             <li>
               <ButtonLink size="medium" color="secondary" isSquare>
-                <span className="accessibility-hidden">YouTube</span>
+                <VisuallyHidden>YouTube</VisuallyHidden>
                 <Icon name="logo-youtube" />
               </ButtonLink>
             </li>
             <li>
               <ButtonLink size="medium" color="secondary" isSquare>
-                <span className="accessibility-hidden">Google</span>
+                <VisuallyHidden>Google</VisuallyHidden>
                 <Icon name="logo-google" />
               </ButtonLink>
             </li>
             <li>
               <ButtonLink size="medium" color="secondary" isSquare>
-                <span className="accessibility-hidden">LinkedIn</span>
+                <VisuallyHidden>LinkedIn</VisuallyHidden>
                 <Icon name="logo-linkedin" />
               </ButtonLink>
             </li>