Add missing h2 heading to gcds-footer (#145)

cds-snc · Apr 19, 2023 · dde9f87 · dde9f87
1 parent 5efa3fd
commit dde9f87
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/packages/web/src/components/gcds-footer/gcds-footer.css b/packages/web/src/components/gcds-footer/gcds-footer.css
@@ -3,7 +3,8 @@
   font: var(--gcds-footer-font);
 
   .sub__header,
-  .themenav__header {
+  .themenav__header,
+  .gcds-footer__header {
     clip: rect(1px, 1px, 1px, 1px);
     height: 1px;
     margin: 0;

diff --git a/packages/web/src/components/gcds-footer/gcds-footer.tsx b/packages/web/src/components/gcds-footer/gcds-footer.tsx
@@ -139,6 +139,7 @@ export class GcdsFooter {
 
     return (
       <Host role="contentinfo">
+        <h2 class="gcds-footer__header">{I18N[lang].about}</h2>
         {(contextualLinksObject && contextualHeading) &&
           <div class="gcds-footer__contextual">
             <div class="contextual__container">

diff --git a/packages/web/src/components/gcds-footer/i18n/i18n.js b/packages/web/src/components/gcds-footer/i18n/i18n.js
@@ -119,6 +119,7 @@ const I18N = {
                 }
             }
         },
+        about: "About this site",
         topofpage: "Top of page",
     },
     "fr": {
@@ -241,6 +242,7 @@ const I18N = {
                 }
             }
         },
+        about: "À propos de ce site",
         topofpage: "Haut de la page",
     }
 }

diff --git a/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx b/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx
@@ -10,6 +10,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer role="contentinfo" display="compact" lang="en">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">About this site</h2>
           <div class="gcds-footer__sub">
             <div class="sub__container">
               <nav aria-label="Government of Canada Corporate">
@@ -62,6 +63,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer role="contentinfo" display="full" lang="en">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">About this site</h2>
           <div class="gcds-footer__main">
             <div class="main__container">
               <nav aria-label="Government of Canada" class="main__govnav">
@@ -237,6 +239,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer role="contentinfo" display="compact" lang="fr">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">À propos de ce site</h2>
           <div class="gcds-footer__sub">
             <div class="sub__container">
               <nav aria-label="Organisation du gouvernement du Canada">
@@ -289,6 +292,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer role="contentinfo" display="full" lang="fr">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">À propos de ce site</h2>
           <div class="gcds-footer__main">
             <div class="main__container">
               <nav aria-label="Gouvernement du Canada" class="main__govnav">
@@ -469,6 +473,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer contextual-heading="Heading" contextual-links="{ &quot;Link 1&quot;: &quot;#red&quot;, &quot;Link 2&quot;: &quot;#green&quot;, &quot;Link 3&quot;: &quot;#blue&quot; }" display="full" lang="en" role="contentinfo">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">About this site</h2>
           <div class="gcds-footer__contextual">
             <div class="contextual__container">
               <nav aria-label="Heading">
@@ -674,6 +679,7 @@ describe('gcds-footer', () => {
     expect(page.root).toEqualHtml(`
       <gcds-footer role="contentinfo" display="compact" lang="en" sub-links="{ &quot;Link 1&quot;: &quot;#red&quot;, &quot;Link 2&quot;: &quot;#green&quot;, &quot;Link 3&quot;: &quot;#blue&quot; }">
         <mock:shadow-root>
+          <h2 class="gcds-footer__header">About this site</h2>
           <div class="gcds-footer__sub">
             <div class="sub__container">
               <nav aria-label="Government of Canada Corporate">
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,6 +119,7 @@ const I18N = { @@
                     }
                 }
             },
+            about: "About this site",
             topofpage: "Top of page",
         },
         "fr": {
@@ Expand Down Expand Up / @@ -241,6 +242,7 @@ const I18N = { @@
                     }
                 }
             },
+            about: "À propos de ce site",
             topofpage: "Haut de la page",
         }
     }
@@ Expand Down @@