From 9535444dcde12228ae595bec349fcf86c58f0784 Mon Sep 17 00:00:00 2001
From: Malcolm Bouzi <mrbouzi@gmail.com>
Date: Thu, 15 Dec 2022 09:50:10 -0500
Subject: [PATCH] web/satellite: adds satellite selection through tab control
 on the forget password page.

ticket: https://github.com/storj/storj/issues/5164
Change-Id: I1e0cefe75883a12c7b26ad42b7c44fddb7e93d10
---
 web/satellite/src/views/ForgotPassword.vue | 46 ++++++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/web/satellite/src/views/ForgotPassword.vue b/web/satellite/src/views/ForgotPassword.vue
index fec6a3452..c2aa26b77 100644
--- a/web/satellite/src/views/ForgotPassword.vue
+++ b/web/satellite/src/views/ForgotPassword.vue
@@ -22,17 +22,28 @@
                 <div class="forgot-area__content-area__container__title-area">
                     <h1 class="forgot-area__content-area__container__title-area__title">Reset Password</h1>
                     <div class="forgot-area__expand" @click.stop="toggleDropdown">
-                        <span class="forgot-area__expand__value">{{ satelliteName }}</span>
+                        <button 
+                            id="resetDropdown"
+                            type="button"
+                            aria-haspopup="listbox"
+                            aria-roledescription="satellites-dropdown"
+                            :aria-expanded="isDropdownShown"
+                            class="forgot-area__expand__value"
+                        >
+                            {{ satelliteName }}
+                        </button>
                         <BottomArrowIcon />
-                        <div v-if="isDropdownShown" v-click-outside="closeDropdown" class="forgot-area__expand__dropdown">
-                            <div class="forgot-area__expand__dropdown__item" @click.stop="closeDropdown">
+                        <ul v-if="isDropdownShown" v-click-outside="closeDropdown" role="listbox" tabindex="-1" class="forgot-area__expand__dropdown">
+                            <li class="forgot-area__expand__dropdown__item" @click.stop="closeDropdown">
                                 <SelectedCheckIcon />
                                 <span class="forgot-area__expand__dropdown__item__name">{{ satelliteName }}</span>
-                            </div>
-                            <a v-for="sat in partneredSatellites" :key="sat.id" class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
-                                {{ sat.name }}
-                            </a>
-                        </div>
+                            </li>
+                            <li v-for="sat in partneredSatellites" :key="sat.id">
+                                <a class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
+                                    {{ sat.name }}
+                                </a>
+                            </li>
+                        </ul>
                     </div>
                 </div>
                 <p class="forgot-area__content-area__container__message">If you’ve forgotten your account password, you can reset it here. Make sure you’re signing in to the right satellite.</p>
@@ -211,6 +222,9 @@ export default class ForgotPassword extends Vue {
      * Sends recovery password email.
      */
     public async onSendConfigurations(): Promise<void> {
+        let activeElement = document.activeElement;
+        if (activeElement && activeElement.id === 'resetDropdown') return;
+
         if (this.isLoading || !this.validateFields()) {
             return;
         }
@@ -220,6 +234,11 @@ export default class ForgotPassword extends Vue {
             return;
         }
 
+        if (this.isDropdownShown) {
+            this.isDropdownShown = false;
+            return;
+        }
+
         this.isLoading = true;
 
         try {
@@ -304,6 +323,8 @@ export default class ForgotPassword extends Vue {
                 margin-right: 10px;
                 font-family: 'font_regular', sans-serif;
                 font-weight: 700;
+                background: none;
+                border: none;
             }
 
             &__dropdown {
@@ -316,6 +337,7 @@ export default class ForgotPassword extends Vue {
                 box-shadow: 0 8px 34px rgb(161 173 185 / 41%);
                 border-radius: 6px;
                 min-width: 250px;
+                list-style-type: none;
 
                 &__item {
                     display: flex;
@@ -340,6 +362,10 @@ export default class ForgotPassword extends Vue {
                         background-color: #f2f2f6;
                     }
                 }
+
+                &__item:focus-visible {
+                    outline: -webkit-focus-ring-color auto 1px;
+                }
             }
         }
 
@@ -396,6 +422,10 @@ export default class ForgotPassword extends Vue {
                         line-height: 18px;
                         color: #0149ff;
                     }
+
+                    &__link:focus {
+                        text-decoration: underline !important;
+                    }
                 }
             }