Merge pull request #43 from DTS-STN/a11y-review

Address a11y issues
DTS-STN · Jan 29, 2024 · a790220 · a790220
2 parents c349180 + f42bc5c
commit a790220
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 35 deletions.
diff --git a/astro-frontend/src/components/Footer.astro b/astro-frontend/src/components/Footer.astro
@@ -9,7 +9,7 @@ const t = useTranslations(lang);
   <div class="bg-primary text-white px-2 py-5">
     <div class="max-w-7xl mx-auto">
       <nav>
-        <h3 class="text-[20px] mb-4">{t("footer.goc")}</h3>
+        <h2 class="text-[20px] mb-4">{t("footer.goc")}</h2>
         <ul
           class="grid md:grid-cols-3 gap-2 md:gap-4 md:place-content-center mb-10 text-sm"
         >
@@ -20,7 +20,9 @@ const t = useTranslations(lang);
           <li><a href={t("footer.about.href")}>{t("footer.about")}</a></li>
         </ul>
 
-        <h4 class="relative"><span class="sr-only">{t('footer.themes')}</span></h4>
+        <h3 class="relative">
+          <span class="sr-only">{t("footer.themes")}</span>
+        </h3>
 
         <ul
           class="grid md:grid-cols-3 gap-2 md:gap-4 md:place-content-center text-sm"
@@ -51,7 +53,7 @@ const t = useTranslations(lang);
             <a href={t("footer.policing.href")}>{t("footer.policing")}</a>
           </li>
           <li>
-            <a href={t("footer.transport.href")}>{t("footer.infra")}</a>
+            <a href={t("footer.infra.href")}>{t("footer.infra")}</a>
           </li>
           <li>
             <a href={t("footer.world.href")}>{t("footer.world")}</a>
@@ -83,7 +85,7 @@ const t = useTranslations(lang);
           <a href={t("footer.mobile.href")}>{t("footer.mobile")}</a>
         </li>
         <li>
-          <a href={t("footer.terms-and-confitions.href")}
+          <a href={t("footer.terms-and-conditions.href")}
             >{t("footer.terms-and-conditions")}</a
           >
         </li>
@@ -99,7 +101,7 @@ const t = useTranslations(lang);
 </footer>
 
 <style>
-  h4::before {
+  h3::before {
     border-bottom: 4px solid #fff;
     content: "";
     display: block;

diff --git a/astro-frontend/src/components/Header.astro b/astro-frontend/src/components/Header.astro
@@ -28,17 +28,19 @@ function toggleUrl() {
       <img
         src=`/goc-${lang}.svg`
         class="h-5 sm:h-8"
-        alt="Government of Canada"
+        alt={t("header.headerlogo.altText")}
         property="logo"
       />
       <a
         href=`${toggleUrl()}`
         class="hidden sm:block underline text-primary visited:text-violet-700"
+        lang={lang === "en" ? "fr" : "en"}
         >{lang === "en" ? "Français" : "English"}</a
       >
       <a
         href=`${toggleUrl()}`
         class="sm:hidden underline text-primary visited:text-violet-700"
+        lang={lang === "en" ? "fr" : "en"}
         >{lang === "en" ? "FR" : "EN"}</a
       >
     </div>

diff --git a/astro-frontend/src/i18n/ui.ts b/astro-frontend/src/i18n/ui.ts
@@ -7,17 +7,19 @@ export const ui = {
     "header.SCL": "Service Canada Labs",
     "header.navigator": "Benefits Navigator",
     "header.navigator.link": "https://alpha.service.canada.ca/en/projects/benefits-navigator",
+    "header.headerlogo.altText": "Government of Canada",
 
     title: "Benefits newsfeed",
     submit: "Filter",
     reset: "Reset",
 
-    "filter.by": "Filter by benefit",
-    "filter.summary": "Select benefit",
+    "filter.by": "Filter",
+    "filter.summary": "Filter by benefit type",
 
     "search.heading": "search news articles",
     "search.placeholder": "Search by benefit name",
     "search.button": "Search",
+    "search.noresults": "No results found",
 
     "wip.title": "Help improve this tool",
     "wip.p":
@@ -96,17 +98,19 @@ export const ui = {
     "header.SCL": "Laboratoires de Service Canada",
     "header.navigator": "Navigateur de prestations",
     "header.navigator.link": "https://alpha.service.canada.ca/fr/projets/navigateur-prestations",
+    "header.headerlogo.altText": "Gouvernement du Canada",
 
     title: "Fil d'actualité des prestations",
     submit: "Filtrer",
     reset: "Réinitialiser les filtres",
 
-    "filter.by": "Filtrer par prestation",
-    "filter.summary": "Sélectionner des prestations",
+    "filter.by": "Filtrer",
+    "filter.summary": "Filtrer par type de prestation",
 
     "search.heading": "rechercher des articles de presse",
-    "search.placeholder": "Rechercher par nom de prestation",
+    "search.placeholder": "Rechercher par nom",
     "search.button": "Recherche",
+    "search.noresults": "Aucun résultat trouvé",
 
     "wip.title": "Aidez-nous à améliorer le fil d'actualité",
     "wip.p":

diff --git a/astro-frontend/src/pages/[lang]/index.astro b/astro-frontend/src/pages/[lang]/index.astro
@@ -19,7 +19,6 @@ delete filters["search"];
 let filteredData = newsItems.filter((item) => {
   let haystack = `${item.body} ${item.data.program}`.toLocaleLowerCase();
   let keys = Object.keys(filters);
-
   if (keys.length === 0 && "search" in searchParams) {
     return haystack.includes(searchParams.search?.toLowerCase());
   }
@@ -102,18 +101,18 @@ function isChecked(program: string) {
                   </label>
                 ))
               }
-              <div class="flex flex-row-reverse gap-2 mx-auto">
-                <button
-                  class="font-[500] bg-primary text-white outline outline-1 focus-visible:ring p-1 rounded-sm hover:text-gray-100 text-lg"
-                >
-                  {t("submit")}
-                </button>
+              <div class="flex flex-row gap-2 mx-auto">
                 <button
                   id="resetBtn"
                   class="font-[500] text-gray-600 outline outline-1 focus-visible:ring p-1 rounded-sm hover:text-gray-900 text-lg"
                 >
                   {t("reset")}
                 </button>
+                <button
+                  class="font-[500] bg-primary text-white outline outline-1 focus-visible:ring p-1 rounded-sm hover:text-gray-100 text-lg"
+                >
+                  {t("submit")}
+                </button>
               </div>
             </form>
           </details>
@@ -141,24 +140,36 @@ function isChecked(program: string) {
       </div>
 
       <div class="bg-white divide-y px-2 space-y-4 border-t mb-10 lg:ml-60">
-        {filteredData.map((item) => <NewsItem item={item} lang={lang}/>)}
+        {filteredData.map((item) => <NewsItem item={item} lang={lang} />)}
+      </div>
+      <div id="results-status" role="status" class="text-center">
+        {filteredData.length === 0 ? <p>{t("search.noresults")}</p> : ""}
       </div>
 
-      <div class="text-center">
-        {
-          Array.from({ length: totalPages }, (_, i) => (
-            <a
-              href={createPaginatedUrl(i)}
-              class={`${
-                page === i
-                  ? "bg-[#2572B4] text-white"
-                  : "bg-[#DCDEE1] text-[#335075]"
-              } font-bold inline-block text-[20px] py-[10px] px-[16px] hover:bg-[#335075] hover:text-[#DCDEE1] no-underline border`}
-            >
-              {i + 1}
-            </a>
-          ))
-        }
+      <div class="flex justify-center text-center">
+        <nav aria-label="pagination">
+          <ul class="flex flex-row">
+            {
+              Array.from({ length: totalPages }, (_, i) => (
+                <li>
+                  <a
+                    href={createPaginatedUrl(i)}
+                    class={`${
+                      page === i
+                        ? "bg-[#2572B4] text-white"
+                        : "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" : ""}
+                  >
+                    {i + 1}
+                    {page !== i ? <span class="sr-only">page</span> : ""}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </nav>
       </div>
     </div>
   </main>
@@ -174,7 +185,7 @@ function isChecked(program: string) {
           {t("wip.p")}
         </p>
         <a
-          href={t('wip.survey.link')}
+          href={t("wip.survey.link")}
           target="_blank"
           class="bg-primary text-white p-2 rounded hover:bg-slate-950 max-w-fit"
           >{t("wip.survey")}</a
@@ -199,4 +210,12 @@ function isChecked(program: string) {
     form.reset();
     window.location.href = window.location.origin + window.location.pathname;
   });
+  // Handle search text input when user hits Enter
+  const searchInput = document.querySelector("#search") as HTMLFormElement;
+  searchInput.addEventListener("keydown", (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      form.submit()
+    }
+  });
 </script>