From 3ae057261ef33f0bc5c6848dd630727c0f679fc8 Mon Sep 17 00:00:00 2001
From: Malcolm Bouzi <mrbouzi@gmail.com>
Date: Tue, 8 Nov 2022 19:07:01 -0500
Subject: [PATCH] web/satellite: make sure users are able to tab through all
 navigation dropdown items.

Change-Id: Ia6148d96cbe385e25bc1107b974288fb98000fe8
---
 .../src/components/navigation/AccountArea.vue | 19 +++++++++++++++----
 .../navigation/ProjectSelection.vue           | 15 ++++++++++++---
 .../components/navigation/QuickStartLinks.vue | 16 +++++++++++-----
 .../components/navigation/ResourcesLinks.vue  |  8 ++++++++
 4 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/web/satellite/src/components/navigation/AccountArea.vue b/web/satellite/src/components/navigation/AccountArea.vue
index a789baa79..fdaff98e5 100644
--- a/web/satellite/src/components/navigation/AccountArea.vue
+++ b/web/satellite/src/components/navigation/AccountArea.vue
@@ -31,15 +31,15 @@
                     </a>
                 </div>
             </div>
-            <div class="account-area__dropdown__item" @click="navigateToBilling">
+            <div tabindex="0" class="account-area__dropdown__item" @click="navigateToBilling" @keyup.enter="navigateToBilling">
                 <BillingIcon />
                 <p class="account-area__dropdown__item__label">Billing</p>
             </div>
-            <div class="account-area__dropdown__item" @click="navigateToSettings">
+            <div tabindex="0" class="account-area__dropdown__item" @click="navigateToSettings" @keyup.enter="navigateToSettings">
                 <SettingsIcon />
                 <p class="account-area__dropdown__item__label">Account Settings</p>
             </div>
-            <div class="account-area__dropdown__item" @click="onLogout">
+            <div tabindex="0" class="account-area__dropdown__item" @click="onLogout" @keyup.enter="onLogout">
                 <LogoutIcon />
                 <p class="account-area__dropdown__item__label">Logout</p>
             </div>
@@ -313,6 +313,13 @@ export default class AccountArea extends Vue {
                     &__link {
                         max-height: 16px;
                     }
+
+                    &__link:focus {
+
+                        svg :deep(path) {
+                            fill: var(--c-blue-3);
+                        }
+                    }
                 }
             }
 
@@ -336,7 +343,7 @@ export default class AccountArea extends Vue {
                 }
 
                 &:hover {
-                    background-color: #f7f8fb;
+                    background-color: #f5f6fa;
 
                     p {
                         color: var(--c-blue-3);
@@ -346,6 +353,10 @@ export default class AccountArea extends Vue {
                         fill: var(--c-blue-3);
                     }
                 }
+
+                &:focus {
+                    background-color: #f5f6fa;
+                }
             }
         }
     }
diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue
index 590371a6f..a7cd45e80 100644
--- a/web/satellite/src/components/navigation/ProjectSelection.vue
+++ b/web/satellite/src/components/navigation/ProjectSelection.vue
@@ -21,7 +21,7 @@
                 <VLoader width="30px" height="30px" />
             </div>
             <div v-else class="project-selection__dropdown__items">
-                <div class="project-selection__dropdown__items__choice" @click.prevent.stop="closeDropdown">
+                <div tabindex="0" class="project-selection__dropdown__items__choice" @click.prevent.stop="closeDropdown">
                     <div class="project-selection__dropdown__items__choice__mark-container">
                         <CheckmarkIcon class="project-selection__dropdown__items__choice__mark-container__image" />
                     </div>
@@ -34,15 +34,16 @@
                     :key="project.id"
                     class="project-selection__dropdown__items__choice"
                     @click.prevent.stop="onProjectSelected(project.id)"
+                    @keyup.enter="onProjectSelected(project.id)"
                 >
                     <p class="project-selection__dropdown__items__choice__unselected">{{ project.name }}</p>
                 </div>
             </div>
-            <div class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick">
+            <div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onProjectsLinkClick" @keyup.enter="onProjectsLinkClick">
                 <ManageIcon />
                 <p class="project-selection__dropdown__link-container__label">Manage Projects</p>
             </div>
-            <div class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick">
+            <div tabindex="0" class="project-selection__dropdown__link-container" @click.stop="onCreateLinkClick" @keyup.enter="onCreateLinkClick">
                 <CreateProjectIcon />
                 <p class="project-selection__dropdown__link-container__label">Create new</p>
             </div>
@@ -402,6 +403,10 @@ export default class ProjectSelection extends Vue {
                             object-fit: cover;
                         }
                     }
+
+                    &:focus {
+                        background-color: #f5f6fa;
+                    }
                 }
             }
 
@@ -435,6 +440,10 @@ export default class ProjectSelection extends Vue {
                         fill: var(--c-blue-3);
                     }
                 }
+
+                &:focus {
+                    background-color: #f5f6fa;
+                }
             }
         }
     }
diff --git a/web/satellite/src/components/navigation/QuickStartLinks.vue b/web/satellite/src/components/navigation/QuickStartLinks.vue
index 2294ffe5a..0227908b7 100644
--- a/web/satellite/src/components/navigation/QuickStartLinks.vue
+++ b/web/satellite/src/components/navigation/QuickStartLinks.vue
@@ -3,35 +3,35 @@
 
 <template>
     <div>
-        <div class="dropdown-item" aria-roledescription="create-project-route" @click.stop="navigateToNewProject">
+        <div tabindex="0" class="dropdown-item" aria-roledescription="create-project-route" @click.stop="navigateToNewProject" @keyup.enter="navigateToNewProject">
             <NewProjectIcon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
                 <h2 class="dropdown-item__text__title">New Project</h2>
                 <p class="dropdown-item__text__label">Create a new project.</p>
             </div>
         </div>
-        <div class="dropdown-item" aria-roledescription="create-ag-route" @click.stop="navigateToCreateAG">
+        <div tabindex="0" class="dropdown-item" aria-roledescription="create-ag-route" @click.stop="navigateToCreateAG" @keyup.enter="navigateToCreateAG">
             <CreateAGIcon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
                 <h2 class="dropdown-item__text__title">Create an Access Grant</h2>
                 <p class="dropdown-item__text__label">Start the wizard to create a new access grant.</p>
             </div>
         </div>
-        <div class="dropdown-item" aria-roledescription="create-s3-credentials-route" @click.stop="navigateToAccessGrantS3">
+        <div tabindex="0" class="dropdown-item" aria-roledescription="create-s3-credentials-route" @click.stop="navigateToAccessGrantS3" @keyup.enter="navigateToAccessGrantS3">
             <S3Icon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
                 <h2 class="dropdown-item__text__title">Create S3 Gateway Credentials</h2>
                 <p class="dropdown-item__text__label">Start the wizard to generate S3 credentials.</p>
             </div>
         </div>
-        <div class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToBuckets">
+        <div tabindex="0" class="dropdown-item" aria-roledescription="objects-route" @click.stop="navigateToBuckets" @keyup.enter="navigateToBuckets">
             <UploadInWebIcon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
                 <h2 class="dropdown-item__text__title">Upload in Web</h2>
                 <p class="dropdown-item__text__label">Start uploading files in the web browser.</p>
             </div>
         </div>
-        <div class="dropdown-item" aria-roledescription="cli-flow-route" @click.stop="navigateToCLIFlow">
+        <div tabindex="0" class="dropdown-item" aria-roledescription="cli-flow-route" @click.stop="navigateToCLIFlow" @keyup.enter="navigateToCLIFlow">
             <UploadInCLIIcon class="dropdown-item__icon" />
             <div class="dropdown-item__text">
                 <h2 class="dropdown-item__text__title">Upload using CLI</h2>
@@ -141,3 +141,9 @@ export default class QuickStartLinks extends Vue {
     }
 }
 </script>
+
+<style scoped lang="scss">
+    .dropdown-item:focus {
+        background-color: #f5f6fa;
+    }
+</style>
\ No newline at end of file
diff --git a/web/satellite/src/components/navigation/ResourcesLinks.vue b/web/satellite/src/components/navigation/ResourcesLinks.vue
index 8a505e9dd..679be131f 100644
--- a/web/satellite/src/components/navigation/ResourcesLinks.vue
+++ b/web/satellite/src/components/navigation/ResourcesLinks.vue
@@ -94,3 +94,11 @@ export default class ResourcesLinks extends Vue {
     }
 }
 </script>
+
+<style scoped lang="scss">
+    .dropdown-item:focus {
+        background-color: #f5f6fa;
+        outline: auto;
+        outline-color: var(--c-blue-3);
+    }
+</style>
\ No newline at end of file