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

* fix: adds a <form> element around the consent/telemetry step to ensure proper form handling

also adds a submit action so that you can continue with click of ENTER

* fix: adds umbFocus to select inputs to allow the user to proceed with tabbing too much around, i.e. they will start within the form

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/apps/installer/consent/installer-consent.element.ts

@@ -8,7 +8,7 @@ import type {
 	TelemetryResponseModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import { TelemetryLevelModel } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-installer-consent')
 export class UmbInstallerConsentElement extends UmbLitElement {
@@ -54,7 +54,8 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 		this._installerContext?.appendData(value);
 	}
 
-	private _onNext() {
+	private _onNext(evt: SubmitEvent) {
+		evt.preventDefault();
 		this._installerContext?.nextStep();
 	}
 
@@ -75,6 +76,7 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 
 		return html`
 			<uui-slider
+				${umbFocus()}
 				@input=${this._handleChange}
 				name="telemetryLevel"
 				label="telemetry-level"
@@ -91,11 +93,15 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 		return html`
 			<div id="container" class="uui-text" data-test="installer-telemetry">
 				<h1>Consent for telemetry data</h1>
-				${this._renderSlider()}
-				<div id="buttons">
-					<uui-button label="Back" @click=${this._onBack} look="secondary"></uui-button>
-					<uui-button id="button-install" @click=${this._onNext} label="Next" look="primary"></uui-button>
-				</div>
+				<uui-form>
+					<form id="consent-form" name="consent" @submit=${this._onNext}>
+						${this._renderSlider()}
+						<div id="buttons">
+							<uui-button label="Back" @click=${this._onBack} look="secondary"></uui-button>
+							<uui-button id="button-install" type="submit" label="Next" look="primary"></uui-button>
+						</div>
+					</form>
+				</uui-form>
 			</div>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/apps/installer/database/installer-database.element.ts

@@ -9,7 +9,7 @@ import type {
 	DatabaseSettingsPresentationModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import { InstallService } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { tryExecute, UmbApiError } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-installer-database')
@@ -238,6 +238,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		<uui-form-layout-item>
 			<uui-label for="server" slot="label" required>Server address</uui-label>
 			<uui-input
+				${umbFocus()}
 				type="text"
 				id="server"
 				name="server"
@@ -254,6 +255,7 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 		html` <uui-form-layout-item>
 			<uui-label for="database-name" slot="label" required>Database Name</uui-label>
 			<uui-input
+				${umbFocus()}
 				type="text"
 				.value=${value}
 				id="database-name"

src/Umbraco.Web.UI.Client/src/apps/installer/user/installer-user.element.ts

@@ -2,7 +2,7 @@ import type { UmbInstallerContext } from '../installer.context.js';
 import { UMB_INSTALLER_CONTEXT } from '../installer.context.js';
 import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-installer-user')
 export class UmbInstallerUserElement extends UmbLitElement {
@@ -67,9 +67,10 @@ export class UmbInstallerUserElement extends UmbLitElement {
 					<uui-form-layout-item>
 						<uui-label id="nameLabel" for="name" slot="label" required>Name</uui-label>
 						<uui-input
+							${umbFocus()}
 							type="text"
 							id="name"
-							.value=${this._userFormData?.name}
+							.value=${this._userFormData?.name ?? ''}
 							name="name"
 							label="name"
 							required
@@ -81,7 +82,7 @@ export class UmbInstallerUserElement extends UmbLitElement {
 						<uui-input
 							type="email"
 							id="email"
-							.value=${this._userFormData?.email}
+							.value=${this._userFormData?.email ?? ''}
 							name="email"
 							label="email"
 							required
@@ -95,7 +96,7 @@ export class UmbInstallerUserElement extends UmbLitElement {
 							name="password"
 							label="password"
 							minlength=${this._minimumPasswordLength}
-							.value=${this._userFormData?.password}
+							.value=${this._userFormData?.password ?? ''}
 							required
 							required-message="Password is required"></uui-input-password>
 					</uui-form-layout-item>