Merge pull request #3441 from dusk-network/feature-3420

web-wallet: Auto-focus text field (Unlock page)
dusk-network · Jan 29, 2025 · 539cf2b · 539cf2b
2 parents 2db27ec + 1a0b28b
commit 539cf2b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Update Transactions list design [#1922]
+- Auto-focus text field (Unlock page) [#3420]
 
 ### Removed
 
@@ -563,6 +564,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3362]: https://github.com/dusk-network/rusk/issues/3362
 [#3381]: https://github.com/dusk-network/rusk/issues/3381
 [#3387]: https://github.com/dusk-network/rusk/issues/3387
+[#3420]: https://github.com/dusk-network/rusk/issues/3420
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/routes/(welcome)/unlock/+page.svelte b/web-wallet/src/routes/(welcome)/unlock/+page.svelte
@@ -111,11 +111,13 @@
         <Textbox
           bind:this={fldSecret}
           bind:value={secretText}
-          name={loginInfo ? "password" : "mnemonic"}
+          name={modeLabel}
+          aria-label={modeLabel}
           placeholder={modeLabel}
           required
           type="password"
           autocomplete="current-password"
+          autofocus
         />
         {#if error instanceof InvalidMnemonicError}
           <Banner title="Invalid mnemonic phrase" variant="error">

diff --git a/web-wallet/src/routes/(welcome)/unlock/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/unlock/__tests__/__snapshots__/page.spec.js.snap
@@ -67,9 +67,11 @@ exports[`Unlock Wallet > Mnemonic phrase workflow > should render the Unlock Wal
           class="login__form svelte-1e8gc2s"
         >
           <input
+            aria-label="Mnemonic phrase"
             autocomplete="current-password"
+            autofocus=""
             class="dusk-textbox dusk-textbox-password"
-            name="mnemonic"
+            name="Mnemonic phrase"
             placeholder="Mnemonic phrase"
             required=""
             type="password"
@@ -193,9 +195,11 @@ exports[`Unlock Wallet > Password workflow > should show the password field and
           class="login__form svelte-1e8gc2s"
         >
           <input
+            aria-label="Password"
             autocomplete="current-password"
+            autofocus=""
             class="dusk-textbox dusk-textbox-password"
-            name="password"
+            name="Password"
             placeholder="Password"
             required=""
             type="password"