Merge pull request #287 from reuters-graphics/jon-header-footer-a11y

Header footer a11y

.changeset/rude-beers-drive.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+a11y fixes for SiteHeader and SiteFooter

src/components/SiteFooter/CompanyLinks.svelte

@@ -25,6 +25,11 @@
   }
 
   let { links = {} }: Props = $props();
+
+  const normaliseSocialName = (name: string) => {
+    if (name === 'twitter') return 'X';
+    return name;
+  };
 </script>
 
 {#if links.social_links}
@@ -42,7 +47,10 @@
               {@const SvelteComponent =
                 symbols[link.type as keyof typeof symbols]}
               <li class="social-links symbol">
-                <a href={normalizeUrl(link.url)}>
+                <a
+                  href={normalizeUrl(link.url)}
+                  aria-label="Visit Reuters on {normaliseSocialName(link.type)}"
+                >
                   <div class="button">
                     <div class="social">
                       <SvelteComponent />

src/components/SiteHeader/MobileMenu/index.svelte

@@ -37,7 +37,11 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick={releaseMobileMenu}>
+      <button
+        class="button close-button"
+        aria-label="Close menu"
+        onclick={releaseMobileMenu}
+      >
         <div class="button-container">
           <CloseIcon />
         </div>

src/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -69,7 +69,7 @@
   };
 </script>
 
-<div class="dropdown">
+<div class="dropdown" data-chromatic="ignore">
   <div class="dropdown-container">
     <div class="inner">
       <div class="submenu">
@@ -78,7 +78,7 @@
         </div>
       </div>
       <div class="stories-container">
-        <div class="inner" data-chromatic="ignore">
+        <div class="inner">
           {#if stories.length > 0}
             <span class="latest">{headingText}</span>
             <ul class="story-list">

src/components/SiteHeader/NavBar/index.svelte

@@ -66,7 +66,7 @@
               <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
-              <button class="button">
+              <button class="button" aria-label="{section.name} menu">
                 <DownArrow rotate={section.id === $activeSection} />
               </button>
             </div>