From e95a5f2b3901a09eeb255171e577f7722b8acc98 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 23 Apr 2025 16:51:38 +0100
Subject: [PATCH] handles some a11y arias in sitefooter and siteheader we
 always get dinged on

---
 src/components/SiteFooter/CompanyLinks.svelte          | 10 +++++++++-
 src/components/SiteHeader/MobileMenu/index.svelte      |  6 +++++-
 .../SiteHeader/NavBar/NavDropdown/index.svelte         |  4 ++--
 src/components/SiteHeader/NavBar/index.svelte          |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index 443dc930..be3c6f29 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/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 />
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index e2dc2dd0..bb02b67d 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/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>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
index b9335654..f5cc466f 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
+++ b/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">
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index 0bb66c5b..692e89b0 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/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>