Merge pull request #44 from DTS-STN/a11y-review-2

A11y review 2
DTS-STN · Feb 1, 2024 · 86ee197 · 86ee197
2 parents a790220 + e9f0c82
commit 86ee197
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/astro-frontend/src/components/Footer.astro b/astro-frontend/src/components/Footer.astro
@@ -5,7 +5,7 @@ const { lang } = Astro.props;
 const t = useTranslations(lang);
 ---
 
-<footer>
+<footer id="pageFooter">
   <div class="bg-primary text-white px-2 py-5">
     <div class="max-w-7xl mx-auto">
       <nav>
@@ -94,7 +94,7 @@ const t = useTranslations(lang);
       <img
         class="h-8 sm:h-10"
         src="/wmms-blk.svg"
-        alt="Symbol of the Government of Canada"
+        alt={t("header.headerlogo.altText")}
       />
     </div>
   </div>

diff --git a/astro-frontend/src/components/Header.astro b/astro-frontend/src/components/Header.astro
@@ -23,6 +23,34 @@ function toggleUrl() {
 </div>
 
 <header class="mt-5">
+  <div class="flex justify-around">
+    <nav aria-label={t("header.skipToMainContentLink")}>
+      <ul>
+        <li>
+          <a
+            id="skipToMainContent"
+            class="sr-only focus:not-sr-only text-xl underline focus:outline-blue bg-yellow-400 text-black"
+            href="#pageMainTitle"
+            data-cy-button={"skip-content"}
+            draggable="false"
+            aria-label={t("header.skipToMainContentLink")}
+            >{t("header.skipToMainContentLink")}</a
+          >
+        </li>
+        <li>
+          <a
+            id="skipToFooter"
+            class="sr-only focus:not-sr-only text-xl underline focus:outline-blue bg-yellow-400 text-black"
+            href="#pageFooter"
+            data-cy-button={"skip-footer"}
+            draggable="false"
+            aria-label={t("header.skipToFooterLink")}
+            >{t("header.skipToFooterLink")}</a
+          >
+        </li>
+      </ul>
+    </nav>
+  </div>
   <div class="max-w-7xl mx-auto px-2 py-5">
     <div class="flex justify-between items-center mb-5">
       <img
@@ -40,8 +68,7 @@ function toggleUrl() {
       <a
         href=`${toggleUrl()}`
         class="sm:hidden underline text-primary visited:text-violet-700"
-        lang={lang === "en" ? "fr" : "en"}
-        >{lang === "en" ? "FR" : "EN"}</a
+        lang={lang === "en" ? "fr" : "en"}>{lang === "en" ? "FR" : "EN"}</a
       >
     </div>
     <div class="flex flex-wrap items-center gap-2 mt-10">
@@ -70,7 +97,9 @@ function toggleUrl() {
           d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"
         ></path></svg
       >
-      <a href={t('header.navigator.link')} class="text-primary underline visited:text-violet-700"
+      <a
+        href={t("header.navigator.link")}
+        class="text-primary underline visited:text-violet-700"
         >{t("header.navigator")}</a
       >
     </div>

diff --git a/astro-frontend/src/i18n/ui.ts b/astro-frontend/src/i18n/ui.ts
@@ -8,6 +8,8 @@ export const ui = {
     "header.navigator": "Benefits Navigator",
     "header.navigator.link": "https://alpha.service.canada.ca/en/projects/benefits-navigator",
     "header.headerlogo.altText": "Government of Canada",
+    "header.skipToMainContentLink": "Skip to main content",
+    "header.skipToFooterLink": "Skip to footer",
 
     title: "Benefits newsfeed",
     submit: "Filter",
@@ -99,6 +101,8 @@ export const ui = {
     "header.navigator": "Navigateur de prestations",
     "header.navigator.link": "https://alpha.service.canada.ca/fr/projets/navigateur-prestations",
     "header.headerlogo.altText": "Gouvernement du Canada",
+    "header.skipToMainContentLink": "Passer au contenu principal",
+    "header.skipToFooterLink": "Passer au pied de page",
 
     title: "Fil d'actualité des prestations",
     submit: "Filtrer",

diff --git a/astro-frontend/src/pages/[lang]/index.astro b/astro-frontend/src/pages/[lang]/index.astro
@@ -57,14 +57,14 @@ function isChecked(program: string) {
   <main class="grow px-2 py-10">
     <div class="max-w-7xl mx-auto">
       <div class="mb-10">
-        <h1 class="text-4xl font-bold pb-2">{t("title")}</h1>
+        <h1 id="pageMainTitle" class="text-4xl font-bold pb-2">{t("title")}</h1>
         <div class="border-b-4 border-b-[#AF3C43] w-14"></div>
       </div>
 
       <h2 class="hidden md:block">{t("filter.by")}</h2>
       <div
         id="list"
-        class="flex flex-col-reverse md:flex-row md:justify-between gap-5 mb-10 h-full"
+        class="flex flex-col md:flex-row md:justify-between gap-5 mb-10 h-full"
       >
         <div class="relative md:min-w-[400px]">
           <h2 class="md:hidden">{t("filter.by")}</h2>
@@ -160,7 +160,7 @@ function isChecked(program: string) {
                         : "bg-[#DCDEE1] text-[#335075]"
                     } font-bold inline-block text-[20px] py-[10px] px-[16px] hover:bg-[#335075] hover:text-[#DCDEE1] no-underline border`}
                     aria-label={page === i ? `page ${page + 1}` : ""}
-                    aria-current={page === i ? "page" : ""}
+                    aria-current={page === i ? "page" : null}
                   >
                     {i + 1}
                     {page !== i ? <span class="sr-only">page</span> : ""}