From 5e5ddd30f47fd296787601d07d743720b38c8f91 Mon Sep 17 00:00:00 2001
From: Goeme Nthomiwa <gnthomiwa@gmail.com>
Date: Thu, 25 Apr 2024 12:11:02 -0700
Subject: [PATCH] fix: geo 556 footer accessibility issue (#437)

---
 frontend/src/components/Footer.vue | 50 ++++++++++++++++--------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index b1ed3c16e..78cce5abf 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,5 +1,15 @@
 <template>
   <v-footer color="#fff" dark absolute class="margin-top" app>
+    <div class="first-nation-acknowledgement">
+      <div>
+        The B.C. Public Service acknowledges the territories of First Nations
+        around B.C. and is grateful to carry out our work on these lands. We
+        acknowledge the rights, interests, priorities, and concerns of all
+        Indigenous Peoples - First Nations, Métis, and Inuit - respecting and
+        acknowledging their distinct cultures, histories, rights, laws, and
+        governments.
+      </div>
+    </div>
     <v-row>
       <v-col class="justify-left" style="text-align: left">
         <v-row>
@@ -27,9 +37,14 @@
           </v-col>
         </v-row>
       </v-col>
-      <v-col class="justify-right">
+      <v-col
+        class="justify-right"
+        role="listbox"
+        id="more-info"
+        aria-label="More information links"
+      >
         <p class="more-info-title">MORE INFO</p>
-        <v-row>
+        <v-row role="presentation" aria-labelledby="more-info">
           <v-col class="links" style="text-align: left">
             <v-list>
               <v-list-item
@@ -37,6 +52,8 @@
                 v-for="link in settings.links.left"
                 v-bind:href="sanitizeUrl(link.to)"
                 :data-testid="link.id"
+                role="listitem"
+                :aria-label="link.label"
               >
                 <v-list-item-title v-text="link.label"></v-list-item-title>
               </v-list-item>
@@ -48,6 +65,7 @@
                 class="footer-btn pl-1 pr-1"
                 v-for="link in settings.links.right"
                 v-bind:href="sanitizeUrl(link.to)"
+                :aria-label="link.label"
                 :data-testid="link.id"
               >
                 <v-list-item-title v-text="link.label"></v-list-item-title>
@@ -58,16 +76,6 @@
       </v-col>
     </v-row>
   </v-footer>
-  <v-footer dark absolute class="bordered first-nation-acknowledgement" app>
-    <div>
-      The B.C. Public Service acknowledges the territories of First Nations
-      around B.C. and is grateful to carry out our work on these lands. We
-      acknowledge the rights, interests, priorities, and concerns of all
-      Indigenous Peoples - First Nations, Métis, and Inuit - respecting and
-      acknowledging their distinct cultures, histories, rights, laws, and
-      governments.
-    </div>
-  </v-footer>
 </template>
 
 <script setup lang="ts">
@@ -142,18 +150,9 @@ p {
   min-width: 100%;
   font-size: $font-size;
   z-index: 0 !important;
-}
-
-.v-footer.bordered {
-  border-top: 4px solid $border-color !important;
-  border-bottom: 4px solid $border-color !important;
-  overflow: hidden;
-
-  &.margin-top {
-    padding-top: 50px;
-  }
+  padding: 0 !important;
 
-  &.first-nation-acknowledgement {
+  .first-nation-acknowledgement {
     background-color: rgb(41, 41, 41);
     display: flex;
     flex-direction: row;
@@ -164,6 +163,11 @@ p {
     font-size: 14px;
     line-height: 21px;
     transition: none !important;
+    width: 100%;
+    margin-bottom: 50px;
+    border-top: 4px solid $border-color !important;
+    border-bottom: 4px solid $border-color !important;
+    overflow: hidden;
 
     div {
       max-width: 1120px;