Repository: dusk-network/rusk (language: rust)

Issue:
After clicking "Unlock Wallet," the focus should automatically be placed on the password input field
Summary
💡 After clicking "Unlock Wallet," the focus should automatically be placed on the password input field. This small improvement aligns with good UX practices by eliminating an unnecessary click and streamlining the user flow.

Possible solution design or implementation
💡 Set focus on the password input field programmatically after the "Unlock Wallet" button is clicked. For example:

Use JavaScript to call the .focus() method on the password input field once the modal or relevant section is displayed.
Ensure this behavior is applied across all views or scenarios where the "Unlock Wallet" action is available.
Alternative: Evaluate if screen readers also benefit from this behavior for accessibility compliance.

Additional context
💡 This is a quick win with minimal implementation complexity but a notable impact on user experience. Removing small friction points like an additional click improves the overall perception and usability of the application.



Discussion / hints:
Good point :) Thanks!

Fix patch:
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index bdd54ead73..76783d94b6 100644
--- 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
index 2734f30249..57912e4448 100644
--- 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">


Test patch:
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
index ee4d23a961..ac5d1ee29a 100644
--- 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"