Fix/3004/icon in footer not clickable (#3036)

ONSdigital · Mar 6, 2024 · 316b964 · 316b964
1 parent 03516e9
commit 316b964
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap
@@ -1595,8 +1595,9 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                             </div>
 
 
-                            <div class="ons-footer__poweredby ons-u-mb-m">
-
+                            <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">
             <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">
@@ -1636,7 +1637,8 @@ exports[`base page template matches the full configuration snapshot 1`] = `
             </g>
         </svg>
 
-                            </div>
+                                </div>
+                            </a>
 
                     </div>
 

diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
@@ -30,6 +30,14 @@
     vertical-align: middle;
   }
 
+  &__poweredBy-link {
+    &:focus {
+      .ons-icon--logo {
+        @extend %a-focus;
+      }
+    }
+  }
+
   .ons-icon--logo,
   .ons-icon--logo__group {
     fill: var(--ons-color-black) !important;

diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk
@@ -158,9 +158,11 @@
                             </div>
                         {% endif %}
                         {% if not params.poweredBy %}
-                            <div class="ons-footer__poweredby ons-u-mb-m">
-                                {{ onsLogo | safe }}
-                            </div>
+                            <a class="ons-footer__poweredBy-link" {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %}>
+                                <div class="ons-footer__poweredby-logo ons-u-mb-m">
+                                    {{ onsLogo | safe }}
+                                </div>
+                            </a>
                         {% endif %}
                     </div>
                     {% if params.crest %}

diff --git a/src/components/footer/_macro.spec.js b/src/components/footer/_macro.spec.js
@@ -411,6 +411,18 @@ describe('macro: footer', () => {
         });
       });
     });
+    describe('correct link for language', () => {
+      it('has the Welsh lang link when the default Welsh lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'cy' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://cy.ons.gov.uk/');
+      });
+      it('has the English lang link when the default English lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'en' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://www.ons.gov.uk/');
+      });
+    });
     describe('provided poweredBy logo', () => {
       describe.each([
         [