fix(desktop): next/back navigation during key creation onboarding (#4978)

**Category:** fix
**User Impact:** Users can navigate back while an identity key is being
created, while Next remains visible and unavailable until creation
finishes.
**Problem:** The key-creation hold hid both navigation actions, leaving
users without an escape route or a clear indication of what would happen
next. **Solution:** Keep the onboarding footer mounted throughout
creation, leave Back enabled, and gate Next on the completed identity
state.

<details>
<summary>File changes</summary>

**desktop/src/features/onboarding/ui/BackupStep.tsx**
Keeps the onboarding navigation footer visible during key creation, with
Back available and Next disabled until the identity is ready.

**desktop/tests/e2e/onboarding-backup.spec.ts**
Covers the loading and completed navigation states so the intended
behavior cannot quietly crawl back out of the pit.

</details>

## Reproduction steps

1. Start desktop onboarding and choose to create a new identity.
2. Submit the profile step and observe the key-creation screen.
3. Confirm Back is enabled while Next is visible but disabled.
4. Wait for key creation to finish and confirm Next becomes enabled.


## Screenshots

| Before | After |
| --- | --- |
| Navigation actions are hidden during key creation. | Back remains
enabled while Next stays visible and disabled. |
| ![Before: key creation screen without navigation
actions](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/4978/key-creation-before-bird.png)
| ![After: key creation screen with disabled Next and enabled
Back](https://d24qwcpro867f5.cloudfront.net/repos/buzz/prs/4978/key-creation-after-bird.png)
|

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
Taylor Ho
2026-08-06 17:13:55 -07:00
committed by GitHub
parent 1399ec1d13
commit 67b77344d6
2 changed files with 24 additions and 22 deletions

View File

@@ -410,29 +410,27 @@ export function BackupStep({
</div>
)}
{created ? (
<OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
<Button
className={ONBOARDING_PRIMARY_CTA_CLASS}
data-testid="onboarding-next"
disabled={backupNextDisabled()}
onClick={onNext}
type="button"
>
Next
</Button>
<OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
<Button
className={ONBOARDING_PRIMARY_CTA_CLASS}
data-testid="onboarding-next"
disabled={!created || backupNextDisabled()}
onClick={onNext}
type="button"
>
Next
</Button>
<Button
className={ONBOARDING_SECONDARY_CTA_CLASS}
data-testid="onboarding-back"
onClick={onBack}
type="button"
variant="ghost"
>
Back
</Button>
</OnboardingFooter>
) : null}
<Button
className={ONBOARDING_SECONDARY_CTA_CLASS}
data-testid="onboarding-back"
onClick={onBack}
type="button"
variant="ghost"
>
Back
</Button>
</OnboardingFooter>
</OnboardingSlideTransition>
);
}

View File

@@ -59,6 +59,9 @@ test("backup step appears on fresh-key path after profile submit", async ({
page.getByRole("heading", { name: "Creating your identity key" }),
).toBeVisible();
await expect(page.getByTestId("backup-intro-logo")).toBeVisible();
await expect(page.getByTestId("onboarding-next")).toBeVisible();
await expect(page.getByTestId("onboarding-next")).toBeDisabled();
await expect(page.getByTestId("onboarding-back")).toBeEnabled();
await expect(
page.getByRole("heading", {
@@ -66,6 +69,7 @@ test("backup step appears on fresh-key path after profile submit", async ({
}),
).toBeVisible();
await expect(page.getByTestId("backup-intro-logo")).toHaveCount(0);
await expect(page.getByTestId("onboarding-next")).toBeEnabled();
});
// ---------------------------------------------------------------------------