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 <[email protected]> * Update src/components/icon/_macro.njk Co-authored-by: rmccar <[email protected]> * Update src/components/icon/_macro.njk Co-authored-by: rmccar <[email protected]> * update welsh translation * update class name * revert previous changes * revert changes * update welsh translation --------- Co-authored-by: rmccar <[email protected]> Co-authored-by: Alessio Venturini <[email protected]>
ONSdigital · Mar 13, 2024 · e72c198 · e72c198
1 parent a358c0a
commit e72c198
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) => {