feat(auth): navigate login page with keyboard (#4962)

* feat(auth): navigate login page with keyboard

- Use tab/shift+tab to navigate the login.
- Press enter on start url field to shortcut continue (if the form is valid).
- Press enter on any of the IAM credential fields to continue (if the form is valid).
- Autofocus the start url field.
- Autofocus IAM profile name field.

* add support for focus/enter on IAM creds

* changelog items

Author: hayemaxi

packages/amazonq/.changes/next-release/Feature-13e24999-a2c9-4636-9ca8-d79b2ae78ca6.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "UX: Added keyboard navigation to login screen."
+}

packages/core/src/login/webview/vue/login.vue

@@ -184,6 +184,7 @@
                     name="startUrl"
                     @input="handleUrlInput"
                     v-model="startUrl"
+                    @keydown.enter="handleContinueClick()"
                 />
                 <h4 class="start-url-error">{{ startUrlError }}</h4>
                 <div class="title topMargin">Region</div>
@@ -201,7 +202,7 @@
                 </select>
                 <button
                     class="continue-button topMargin"
-                    :disabled="startUrl.length == 0 || startUrlError.length > 0 || !selectedRegion"
+                    :disabled="shouldDisableSsoContinue()"
                     v-on:click="handleContinueClick()"
                 >
                     Continue
@@ -245,16 +246,27 @@
                 id="profileName"
                 name="profileName"
                 v-model="profileName"
+                @keydown.enter="handleContinueClick()"
             />
             <div class="title">Access Key</div>
-            <input class="iamInput bottomMargin" type="text" id="accessKey" name="accessKey" v-model="accessKey" />
+            <input
+                class="iamInput bottomMargin"
+                type="text"
+                id="accessKey"
+                name="accessKey"
+                v-model="accessKey"
+                @keydown.enter="handleContinueClick()"
+            />
             <div class="title">Secret Key</div>
-            <input class="iamInput bottomMargin" type="text" id="secretKey" name="secretKey" v-model="secretKey" />
-            <button
-                class="continue-button"
-                :disabled="profileName.length <= 0 || accessKey.length <= 0 || secretKey.length <= 0"
-                v-on:click="handleContinueClick()"
-            >
+            <input
+                class="iamInput bottomMargin"
+                type="text"
+                id="secretKey"
+                name="secretKey"
+                v-model="secretKey"
+                @keydown.enter="handleContinueClick()"
+            />
+            <button class="continue-button" :disabled="shouldDisableIamContinue()" v-on:click="handleContinueClick()">
                 Continue
             </button>
         </template>
@@ -393,7 +405,6 @@ export default defineComponent({
             }
         },
         async handleContinueClick() {
-            void client.emitUiClick('auth_continueButton')
             if (this.stage === 'START') {
                 if (this.selectedLoginOption === LoginOption.BUILDER_ID) {
                     this.stage = 'AUTHENTICATING'
@@ -406,6 +417,7 @@ export default defineComponent({
                     }
                 } else if (this.selectedLoginOption === LoginOption.ENTERPRISE_SSO) {
                     this.stage = 'SSO_FORM'
+                    this.$nextTick(() => document.getElementById('startUrl')!.focus())
                     await client.storeMetricMetadata({ region: this.selectedRegion })
                 } else if (this.selectedLoginOption >= LoginOption.EXISTING_LOGINS) {
                     this.stage = 'AUTHENTICATING'
@@ -420,8 +432,12 @@ export default defineComponent({
                     }
                 } else if (this.selectedLoginOption === LoginOption.IAM_CREDENTIAL) {
                     this.stage = 'AWS_PROFILE'
+                    this.$nextTick(() => document.getElementById('profileName')!.focus())
                 }
             } else if (this.stage === 'SSO_FORM') {
+                if (this.shouldDisableSsoContinue()) {
+                    return
+                }
                 this.stage = 'AUTHENTICATING'
                 const error = await client.startEnterpriseSetup(this.startUrl, this.selectedRegion, this.app)
                 if (error) {
@@ -431,6 +447,9 @@ export default defineComponent({
                     this.stage = 'CONNECTED'
                 }
             } else if (this.stage === 'AWS_PROFILE') {
+                if (this.shouldDisableIamContinue()) {
+                    return
+                }
                 this.stage = 'AUTHENTICATING'
                 const error = await client.startIamCredentialSetup(this.profileName, this.accessKey, this.secretKey)
                 if (error) {
@@ -440,6 +459,7 @@ export default defineComponent({
                     this.stage = 'CONNECTED'
                 }
             }
+            void client.emitUiClick('auth_continueButton')
         },
         async handleCodeCatalystSignin() {
             void client.emitUiClick('auth_codeCatalystSignIn')
@@ -525,6 +545,12 @@ export default defineComponent({
         handleHelpLinkClick() {
             void client.emitUiClick('auth_helpLink')
         },
+        shouldDisableSsoContinue() {
+            return this.startUrl.length == 0 || this.startUrlError.length > 0 || !this.selectedRegion
+        },
+        shouldDisableIamContinue() {
+            return this.profileName.length <= 0 || this.accessKey.length <= 0 || this.secretKey.length <= 0
+        },
     },
 })
 </script>

packages/core/src/login/webview/vue/selectableItem.vue

@@ -1,8 +1,10 @@
 <template>
     <div
         class="item-container-base"
+        tabindex="0"
         :class="{ selected: isSelected, hovering: isHovering }"
         @click="toggleSelection"
+        @keydown.enter="toggleSelection"
         @mouseover="isHovering = true"
         @mouseout="isHovering = false"
     >

packages/toolkit/.changes/next-release/Feature-2ac7c80a-b285-47a8-a512-7d10fd78d5ac.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "UX: Added keyboard navigation to login screen."
+}