Installer: Improves user accessibility by adding missing <form> elements and setting the right focus

[iOvergaard]

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:

• Added the umbFocus directive 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]
• Updated the consent step to wrap inputs in a <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:

• Ensured that user form fields (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:mock and verify that you can complete the installer.

[Copilot]

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 umbFocus directive
• 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

[leekelleher]

Tested out, it's a much better experience with the keyboard now! 🎉🚀