yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Jacob Overgaard
2025-09-25 10:07:08 +02:00
committed by GitHub
parent 7a3c711add
commit 6714050f4b
3 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
`;
}

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

@@ -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"

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

@@ -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>