Installer: Improves user accessibility by adding missing <form> elements and setting the right focus #20265
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e proper form handling also adds a submit action so that you can continue with click of ENTER
… tabbing too much around, i.e. they will start within the form
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR improves installer accessibility by adding proper form handling and focus management. The changes enable keyboard-only navigation through the installer and ensure proper form semantics for better user experience.
- Added automatic focus to first input fields in consent, database, and user steps using the
umbFocusdirective - Wrapped consent step inputs in proper HTML form elements with submit handling
- Added null coalescing operators to prevent uncontrolled input warnings in user form fields
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| installer-consent.element.ts | Added form wrapper, submit handling, and auto-focus for the telemetry slider |
| installer-database.element.ts | Added auto-focus to server address and database name input fields |
| installer-user.element.ts | Added auto-focus to name field and null coalescing for form field values |
src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.element.ts
Show resolved
Hide resolved
leekelleher
approved these changes
Sep 25, 2025
Member
leekelleher
left a comment
leekelleher
left a comment
There was a problem hiding this comment.
Tested out, it's a much better experience with the keyboard now! 🎉🚀
This was referenced Oct 20, 2025
This was referenced Oct 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This has been nagging me for a while: You cannot complete the installer form only by pressing the Enter key. On the telemetry step, you must either tab or use your cursor to click 'Next'.
This pull request improves the user experience in the installer flow by enhancing form accessibility and usability. The main changes include adding automatic focus to key input fields, updating form handling to use proper HTML form semantics, and ensuring form fields have default values to prevent uncontrolled input errors.
Accessibility and Form Usability Improvements:
umbFocusdirective to automatically focus the first relevant input fields in the consent, database, and user installer steps (installer-consent.element.ts,installer-database.element.ts,installer-user.element.ts). [1] [2] [3] [4] [5] [6]<form>and handle the "Next" action via form submission, preventing the default event and ensuring accessibility and keyboard support (installer-consent.element.ts). [1] [2]Form Field Value Handling:
name,email,password) default to empty strings if no value is present, preventing uncontrolled input warnings and improving reliability (installer-user.element.ts). [1] [2] [3]How to test
You can provoke the installer on the mock server by changing the following handler in
browser-handlers.ts:Run
npm run dev:mockand verify that you can complete the installer.