Skip to content

Refine gateway setup wizard UX and fix accessibility gaps#940

Merged
shanselman merged 3 commits into
openclaw:mainfrom
karkarl:karkarl-refine-gateway-setup-ux
Jul 7, 2026
Merged

Refine gateway setup wizard UX and fix accessibility gaps#940
shanselman merged 3 commits into
openclaw:mainfrom
karkarl:karkarl-refine-gateway-setup-ux

Conversation

@karkarl

@karkarl karkarl commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

What & why

Refines the OpenClaw gateway setup wizard UX and fixes real accessibility gaps found while walking the flow.

UX

  • Option pickers are now a single-selection ListView (ItemsView/ItemContainer), with the first item selected by default.
  • Standardized bottom action bar: standard-size Back, AccentButtonStyle Continue, subtle Skip / Start over / More options controls.
  • "Skip for now" is pinned to the top of every option list.
  • Replaced the "more"/"back" radio entries with a subtle "More ▾" expander that reveals the full list in one click while keeping "Skip for now", plus a dedicated Back button.
  • Wizard transcript / security text is now selectable (RichTextBlock).

Bug fix

  • ExpandMoreOptionsAsync now updates _stepId from the expanded payload, so selecting a newly revealed provider (e.g. Copilot) and pressing Continue no longer fails with a stale step id (previously flipped the primary button to "Start wizard again").

Accessibility

  • WizardPage option items (and multiselect checkboxes) get AutomationProperties.Name (label + hint) via a shared CreateOptionItem helper.
  • CapabilitiesPage profile radios (Read-only / Standard / Full access) get AutomationProperties.Name.

Validation

  • ./build.ps1 — ✅ all projects built (win-arm64)
  • dotnet test OpenClaw.Shared.Tests — ✅ 2697 passed, 31 skipped
  • dotnet test OpenClaw.Tray.Tests — ✅ 1579 passed

Real behavior proof

Screenshots + Axe.Windows (v2.4.1) scans captured against the live isolated dev app on the current PR head. Full set and details in docs/setup-wizard-ux/.

Accessibility — actionable violations (NameNotNull), before → after:

Surface Before After
Capabilities radio group 3 0
Setup-mode ListView 2 0
Provider list (collapsed) 6 0
Provider list (expanded) 7 0

Setup mode — single-selection ListView, first item selected:

setup mode

Provider list — "Skip for now" pinned top, subtle More ▾, standardized bottom bar:

provider collapsed

Provider list expanded — one click, "Skip for now" preserved, full list:

provider expanded

Capabilities — radios now expose accessible names (0 violations):

capabilities

Known framework limitation (not fixed)

Inline Hyperlink inside a RichTextBlock (security disclaimer link) reports a null BoundingRectangle to UIA when scrolled out of view — a WinUI behavior for inline hyperlinks, not a control we construct.

karkarl and others added 2 commits July 7, 2026 12:43
UX refactor (setup wizard):
- Replace radio-button option pickers with single-selection ListView
  (ItemsView/ItemContainer), first item selected by default.
- Standardize the bottom action bar: standard-size Back button,
  AccentButtonStyle primary, Subtle "Skip"/"Start over" buttons,
  and a subtle "More options" control.
- Move "Skip for now" to the top of every option list.
- Replace the "more"/"back" radio entries with a subtle "More v"
  expander that expands the full list in a single click while
  preserving the "Skip for now" option, and a dedicated Back button.
- Add a filter textbox above long model lists.
- Render wizard transcript/security text as selectable RichTextBlock.

Bug fix:
- ExpandMoreOptionsAsync now updates _stepId from the expanded payload
  so selecting a newly revealed provider (e.g. Copilot) and pressing
  Continue no longer fails with a stale step id.

Accessibility (verified live with Axe.Windows, 0 violations after):
- Give SelectOptions ListView items an AutomationProperties.Name
  (label + hint) via a shared CreateOptionItem helper; multiselect
  checkboxes named the same way. Fixes NameNotNull on setup-mode,
  config-handling, and provider option lists.
- Name the three CapabilitiesPage radio buttons (Read-only,
  Standard, Full access). Fixes NameNotNull on the capabilities step.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@clawsweeper

clawsweeper Bot commented Jul 7, 2026

Copy link
Copy Markdown

Codex review: needs changes before merge. Reviewed July 7, 2026, 5:09 PM ET / 21:09 UTC.

Summary
The branch refactors setup wizard option pickers and action bars, adds selectable wizard text and accessibility names, fixes expanded provider step ids, and adds screenshot/Axe proof docs.

Reproducibility: yes. Source inspection on the current PR head shows WizardBack_Click re-renders local payload history without changing gateway state, and WelcomePage.xaml uses pointer-only Borders for setup choices.

Review metrics: 2 noteworthy metrics.

  • Changed files: 20 files, +477/-138. The PR spans setup UI code, source-text tests, docs, and binary proof assets, so both runtime behavior and proof need review.
  • Proof assets: 8 PNG screenshots plus 1 proof README. The merge decision relies on live visual/Axe proof for the UX and accessibility claims, while remaining source-level regressions still need focused proof.

Merge readiness
Overall: 🦪 silver shellfish
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦪 silver shellfish
Result: blocked by patch quality or review findings.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

  • [P2] Fix Back so it stays synchronized with the gateway wizard session.
  • Restore keyboard and screen-reader invocation for the welcome setup choices.
  • [P2] Add focused current-head proof for keyboard selection and Back behavior after the repair.

Risk before merge

  • [P1] Back can display an earlier wizard step while the gateway session is still waiting on a later step, so pressing Continue can submit an old step id/value to the wrong server-side state.
  • [P1] Keyboard and screen-reader users can no longer invoke the existing-gateway welcome choice because the PR replaces real Buttons with pointer-only Borders.

Maintainer options:

  1. Repair setup navigation before merge (recommended)
    Keep Back tied to the gateway wizard state and restore keyboard/screen-reader-invokable welcome choices before landing the UX refresh.
  2. Pause or narrow the UX refactor
    If maintainers do not want to define Back behavior in this PR, keep only the accessibility names and expanded step-id fix in a smaller follow-up.
Copy recommended automerge instruction
@clawsweeper automerge

Special instructions:
Fix the setup wizard PR so Back remains synchronized with gateway-owned wizard state, welcome setup choices stay keyboard/screen-reader invokable, and focused tests/proof cover keyboard selection plus Back behavior without changing unrelated setup behavior.

Next step before merge

  • [P2] The remaining blockers are narrow PR-branch setup wizard regressions with clear affected files and validation paths, so an automated repair attempt is reasonable.

Security
Cleared: The current diff changes WinUI setup code, tests, docs, and PNG proof assets without new dependencies, workflow/script execution, secret handling, or package resolution changes.

Review findings

  • [P1] Keep Back synchronized with the gateway session — src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs:731
  • [P2] Restore invokable welcome choices — src/OpenClaw.SetupEngine.UI/Pages/WelcomePage.xaml:63-70
Review details

Best possible solution:

Land the UX and accessibility refresh after Back is synchronized with gateway-owned wizard state and the welcome choices remain real invokable controls with focused proof.

Do we have a high-confidence way to reproduce the issue?

Yes. Source inspection on the current PR head shows WizardBack_Click re-renders local payload history without changing gateway state, and WelcomePage.xaml uses pointer-only Borders for setup choices.

Is this the best way to solve the issue?

No. The UX direction is useful, but the implementation should preserve gateway ownership of wizard state and keep setup choices as real invokable controls.

Full review comments:

  • [P1] Keep Back synchronized with the gateway session — src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs:731
    Still present after the latest commit: WizardBack_Click only pops local payload history and re-renders an older step. The gateway session is still waiting on the later step, so pressing Continue after Back can submit an old _stepId/value to the wrong server-side state; use a gateway-owned back/restart path or remove the local-only rewind.
    Confidence: 0.88
  • [P2] Restore invokable welcome choices — src/OpenClaw.SetupEngine.UI/Pages/WelcomePage.xaml:63-70
    Still present after the latest commit: ConnectCard is a Border with only PointerPressed, and the page has no focus, keyboard, or automation invoke path for choosing the non-default existing-gateway route before Next. Keep these choices as Buttons/ListView/radio items or add equivalent keyboard and UIA invoke behavior.
    Confidence: 0.9

Overall correctness: patch is incorrect
Overall confidence: 0.88

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 2c6873e8f20f.

Label changes

Label justifications:

  • P2: This is normal-priority setup/onboarding UX repair on an unmerged PR with concrete but bounded blockers before landing.
  • merge-risk: 🚨 compatibility: The PR removes established Button semantics from welcome choices, which can break keyboard and screen-reader setup usage.
  • merge-risk: 🚨 availability: The new local-only Back behavior can leave the gateway setup wizard unable to proceed after user navigation.
  • rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦞 diamond lobster and patch quality is 🦪 silver shellfish.
  • status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action. Sufficient (screenshot): The PR body includes live isolated-app screenshots and Axe.Windows before/after counts, and sampled PNG links resolved; the proof supports the visible UX/a11y claims but not the remaining Back and keyboard blockers.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR body includes live isolated-app screenshots and Axe.Windows before/after counts, and sampled PNG links resolved; the proof supports the visible UX/a11y claims but not the remaining Back and keyboard blockers.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body includes live isolated-app screenshots and Axe.Windows before/after counts, and sampled PNG links resolved; the proof supports the visible UX/a11y claims but not the remaining Back and keyboard blockers.
Evidence reviewed

Acceptance criteria:

  • [P1] ./build.ps1.
  • [P1] dotnet test ./tests/OpenClaw.Shared.Tests/OpenClaw.Shared.Tests.csproj --no-restore.
  • [P1] dotnet test ./tests/OpenClaw.Tray.Tests/OpenClaw.Tray.Tests.csproj --no-restore.
  • [P1] Launch an isolated setup wizard and verify keyboard selection for both welcome choices plus Back behavior through a gateway wizard step; capture screenshot/video or redacted UI diagnostics.

What I checked:

Likely related people:

  • steipete: Peter Steinberger introduced the Windows gateway onboarding wizard and recently adjusted slow wizard step timeouts in the same WizardPage/WelcomePage area. (role: introduced behavior and recent area contributor; confidence: high; commits: adcb4c378f90, 7ad7fcacccf8; files: src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs, src/OpenClaw.SetupEngine.UI/Pages/WelcomePage.xaml, docs/ONBOARDING_WIZARD.md)
  • paulcam206: Paul Campbell authored the merged setup work that integrates Windows-node context after onboarding and touched wizard completion behavior adjacent to this PR. (role: adjacent setup contributor; confidence: medium; commits: 698efcc2bd33; files: src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs, tests/OpenClaw.Tray.Tests/AppRefactorContractTests.cs)
  • karkarl: Karen has recent merged setup install work touching WelcomePage/WizardPage data-directory handling, separate from authoring this PR branch. (role: recent adjacent contributor; confidence: medium; commits: dae64b6c49e9; files: src/OpenClaw.SetupEngine.UI/Pages/WelcomePage.xaml.cs, src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs)
  • shanselman: Scott Hanselman authored the latest commit on this PR to remove stale overflow More controls and has adjacent current-main setup UI history. (role: recent PR repair contributor; confidence: medium; commits: 5bb1a5a592ce, 4166e0fd63f8; files: src/OpenClaw.SetupEngine.UI/Pages/WizardPage.xaml.cs, tests/OpenClaw.Tray.Tests/AppRefactorContractTests.cs)
What the crustacean ranks mean
  • 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
  • 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
  • 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
  • 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
  • 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
  • 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
  • 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works
  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.
Review history (2 earlier review cycles)
  • reviewed 2026-07-07T19:52:10.262Z sha cad90d5 :: needs changes before merge. :: [P1] Keep Back synchronized with the gateway session | [P2] Keep welcome choices keyboard-invokable | [P2] Remove dynamic More controls when resetting steps
  • reviewed 2026-07-07T19:58:01.785Z sha cad90d5 :: needs changes before merge. :: [P1] Keep Back synchronized with the gateway session | [P2] Keep welcome choices keyboard-invokable | [P2] Remove dynamic More controls when resetting steps

@clawsweeper clawsweeper Bot added proof: sufficient Contributor real behavior proof is sufficient. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. P2 Normal priority bug or improvement with limited blast radius. merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. merge-risk: 🚨 availability 🚨 Merging this PR could cause crashes, hangs, restart loops, stalls, or process outages. labels Jul 7, 2026
The 'More v' overflow toggle is inserted as a sibling of SelectOptions in
the shared StackPanel, but ResetInputs only cleared SelectOptions.Items.
Advancing past a select step without clicking More left the button orphaned
on subsequent steps. Track it and remove it in ResetInputs.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

@shanselman shanselman left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed with >90% confidence. Found and fixed one stale overflow-button lifecycle issue, reran local validation, and refreshed CI is green.

@shanselman shanselman merged commit 8763472 into openclaw:main Jul 7, 2026
14 checks passed
@karkarl

karkarl commented Jul 7, 2026

Copy link
Copy Markdown
Contributor Author

Thanks — both review findings are addressed in 3c856193:

[P2] Invokable welcome choices (WelcomePage.xaml)
The Install / Connect cards were pointer-only Borders. They're now card-styled Buttons (SetupChoiceCardStyle), so they're keyboard focusable, activate on Enter/Space, and expose the UIA Invoke pattern — the card visuals and select-then-Next behavior are unchanged.

[P1] Back vs. gateway wizard state (WizardPage.xaml.cs)
There is no wizard.back RPC; the gateway flow is driven only by wizard.next {stepId, value}. Back re-renders a cached previous step via ApplyPayloadAsync, which sets _stepId from that payload, so the client stays synchronized to the displayed step and any subsequent Continue re-answers that step by its own stepId (the intended re-answer path). The concrete client defect was that back re-renders ran through the forward-only step/visit guards and could falsely trip "repeated step too many times"; back navigation now skips those counters (isBackNavigation).

Added source-contract tests for both invariants. Validation: ./build.ps1 ✅, shared 2697 ✅, tray 1582 ✅.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

merge-risk: 🚨 availability 🚨 Merging this PR could cause crashes, hangs, restart loops, stalls, or process outages. merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. P2 Normal priority bug or improvement with limited blast radius. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient Contributor real behavior proof is sufficient. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants