fix(root): added aria-role to wrapper element in ic-footer

added role="list" to wrapper of footer-links to prevent a11y failures. Also added example to code snippets to show how to do it
mi6 · Dec 4, 2024 · 7e19b41 · 7e19b41
1 parent ce13302
commit 7e19b41
Show file tree

Hide file tree

Showing 3 changed files with 826 additions and 825 deletions.
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -273,7 +273,7 @@ const Layout: React.FC<LayoutProps> = ({
                   {footerLink.text}
                 </ic-footer-link>
               ))}
-            <div slot="logo" className="logo-wrapper">
+            <div slot="logo" className="logo-wrapper" role="list">
               <ic-footer-link href="https://sis.gov.uk">
                 <SISLogo aria-hidden="true" />
                 <span className="link-text">Go to S.I.S. website</span>

diff --git a/src/content/structured/components/footer/code.mdx b/src/content/structured/components/footer/code.mdx
@@ -226,7 +226,7 @@ export const snippetsLogoLinks = [
   <ic-footer-link slot="link" href="#">Styles</ic-footer-link>
   <ic-footer-link slot="link" href="#">Components</ic-footer-link>
   <ic-footer-link slot="link" href="#">Patterns</ic-footer-link>
-    <div slot="logo">
+    <div slot="logo" role="list">
       <ic-footer-link href="#">
         <svg xmlns="http://www.w3.org/2000/svg"
           height="48"
@@ -267,7 +267,7 @@ export const snippetsLogoLinks = [
   <IcFooterLink slot="link" href="#">Styles</IcFooterLink>
   <IcFooterLink slot="link" href="#">Components</IcFooterLink>
   <IcFooterLink slot="link" href="#">Patterns</IcFooterLink>
-  <div slot="logo">
+  <div slot="logo" role="list">
     <IcFooterLink href="#">
       <SlottedSVG
         xmlns="http://www.w3.org/2000/svg"
@@ -332,6 +332,7 @@ export const snippetsLogoLinks = [
         display: "flex",
         gap: "var(--ic-space-lg)",
       }}
+      role="list"
     >
       <IcFooterLink href="#">
         <svg