From e72c1989714af213fe13bab1422312dd400f4023 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya
 <86783201+precious-onyenaucheya-ons@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:17:59 +0000
Subject: [PATCH] Feature/image link to home page described as logo (#3075)

* update icon and header component

* fix failing tests

* Update src/components/icon/_macro.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* Update src/components/icon/_macro.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* Update src/components/icon/_macro.njk

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>

* update welsh translation

* update class name

* revert previous changes

* revert changes

* update welsh translation

---------

Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com>
Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com>
---
 __snapshots__/layout/_template.spec.js.snap | 32 ++++++++++-----------
 src/components/header/_macro.njk            |  2 +-
 src/components/header/_macro.spec.js        |  2 +-
 src/components/icon/_macro.njk              | 16 +++++------
 src/components/icon/_macro.spec.js          |  8 +++---
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap
index 412b4f40e3..c83a9e220f 100644
--- a/__snapshots__/layout/_template.spec.js.snap
+++ b/__snapshots__/layout/_template.spec.js.snap
@@ -157,8 +157,8 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
             <div class="ons-container">
                 <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto"><div class="ons-header__org-logo ons-header__org-logo--large">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
-            <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
+            <title id="ons-logo-en-alt">Office for National Statistics homepage</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
             </g>
@@ -197,7 +197,7 @@ exports[`base page template matches the favicons block override snapshot 1`] = `
         </svg>
                             </div>
                             <div class="ons-header__org-logo ons-header__org-logo--small">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
             <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"></path>
@@ -376,8 +376,8 @@ exports[`base page template matches the footer block override snapshot 1`] = `
             <div class="ons-container">
                 <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto"><div class="ons-header__org-logo ons-header__org-logo--large">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
-            <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
+            <title id="ons-logo-en-alt">Office for National Statistics homepage</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
             </g>
@@ -416,7 +416,7 @@ exports[`base page template matches the footer block override snapshot 1`] = `
         </svg>
                             </div>
                             <div class="ons-header__org-logo ons-header__org-logo--small">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
             <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"></path>
@@ -642,8 +642,8 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                     <div class="ons-grid__col ons-col-auto">
                                 <a class="ons-header__org-logo-link" href="#0">
                             <div class="ons-header__org-logo ons-header__org-logo--large">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
-            <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
+            <title id="ons-logo-en-alt">Office for National Statistics homepage</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
             </g>
@@ -682,7 +682,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
         </svg>
                             </div>
                             <div class="ons-header__org-logo ons-header__org-logo--small">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
             <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"></path>
@@ -1598,7 +1598,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             <a class="ons-footer__poweredBy-link" href="https://www.ons.gov.uk/">
                                 <div class="ons-footer__poweredby-logo ons-u-mb-m">
                                     
-        <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-footer-alt">
+        <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-footer-alt" role="img">
             <title id="ons-logo-en-footer-alt">Office for National Statistics</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
@@ -1771,8 +1771,8 @@ exports[`base page template matches the meta block override snapshot 1`] = `
             <div class="ons-container">
                 <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto"><div class="ons-header__org-logo ons-header__org-logo--large">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
-            <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
+            <title id="ons-logo-en-alt">Office for National Statistics homepage</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
             </g>
@@ -1811,7 +1811,7 @@ exports[`base page template matches the meta block override snapshot 1`] = `
         </svg>
                             </div>
                             <div class="ons-header__org-logo ons-header__org-logo--small">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
             <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"></path>
@@ -1974,8 +1974,8 @@ exports[`base page template matches the social block override snapshot 1`] = `
             <div class="ons-container">
                 <div class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless">
                     <div class="ons-grid__col ons-col-auto"><div class="ons-header__org-logo ons-header__org-logo--large">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
-            <title id="ons-logo-en-alt">Office for National Statistics logo</title>
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
+            <title id="ons-logo-en-alt">Office for National Statistics homepage</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"></path>
             </g>
@@ -2014,7 +2014,7 @@ exports[`base page template matches the social block override snapshot 1`] = `
         </svg>
                             </div>
                             <div class="ons-header__org-logo ons-header__org-logo--small">
-                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
+                                <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt" role="img">
             <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"></path>
diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
index 8f5cc350cb..ee497e62da 100644
--- a/src/components/header/_macro.njk
+++ b/src/components/header/_macro.njk
@@ -45,7 +45,7 @@
                                     {{-
                                         onsIcon({
                                             "iconType": 'ons-logo-' + currentLanguageISOCode,
-                                            "altText": 'Office for National Statistics logo'
+                                            "altText": 'Office for National Statistics homepage'
                                         })
                                     -}}
                                 {% endif %}
diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js
index 014c217c92..60a34d79a1 100644
--- a/src/components/header/_macro.spec.js
+++ b/src/components/header/_macro.spec.js
@@ -275,7 +275,7 @@ describe('macro: header', () => {
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
-      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
+      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage');
     });
 
     it('has the default masthead mobile logo icon alt text', () => {
diff --git a/src/components/icon/_macro.njk b/src/components/icon/_macro.njk
index 0004ab1c4d..6844ae5d8d 100644
--- a/src/components/icon/_macro.njk
+++ b/src/components/icon/_macro.njk
@@ -130,8 +130,8 @@
             </rect>
         </svg>
     {%- elif params.iconType == "ons-logo-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -169,8 +169,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -204,8 +204,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>
@@ -217,8 +217,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>
diff --git a/src/components/icon/_macro.spec.js b/src/components/icon/_macro.spec.js
index c76d02714c..f5e326bd25 100644
--- a/src/components/icon/_macro.spec.js
+++ b/src/components/icon/_macro.spec.js
@@ -91,10 +91,10 @@ describe('macro: icon', () => {
   });
 
   describe.each([
-    ['ons-logo-en', 'Office for National Statistics logo'],
-    ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
-    ['ons-logo-stacked-en', 'Office for National Statistics logo'],
-    ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-en', 'Office for National Statistics homepage'],
+    ['ons-logo-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-stacked-en', 'Office for National Statistics homepage'],
+    ['ons-logo-stacked-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
     ['crest', 'Royal coat of arms of the United Kingdom'],
     ['ogl', 'Open Government License logo'],
   ])('icon type: %s', (iconType, expectedAltText) => {