Fix aria label auth page (#18032)

This commit is contained in:
Paul Bottein 2023-09-26 22:39:25 +02:00 committed by GitHub
parent b899e39a9e
commit cbd424ff5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 108 additions and 15 deletions

View File

@ -165,6 +165,7 @@ const createWebpackConfig = ({
"lit/directives/guard$": "lit/directives/guard.js",
"lit/directives/cache$": "lit/directives/cache.js",
"lit/directives/repeat$": "lit/directives/repeat.js",
"lit/directives/live$": "lit/directives/live.js",
"lit/polyfill-support$": "lit/polyfill-support.js",
"@lit-labs/virtualizer/layouts/grid":
"@lit-labs/virtualizer/layouts/grid.js",

View File

@ -62,6 +62,7 @@
"@material/mwc-dialog": "0.27.0",
"@material/mwc-drawer": "0.27.0",
"@material/mwc-fab": "0.27.0",
"@material/mwc-floating-label": "0.27.0",
"@material/mwc-formfield": "0.27.0",
"@material/mwc-icon-button": "0.27.0",
"@material/mwc-linear-progress": "0.27.0",

View File

@ -77,11 +77,11 @@ export class HaAuthFlow extends LitElement {
protected render() {
return html`
<style>
.action {
ha-auth-flow .action {
margin: 24px 0 8px;
text-align: center;
}
.store-token {
ha-auth-flow .store-token {
margin-top: 10px;
margin-left: -16px;
}

View File

@ -8,10 +8,6 @@ import "./ha-auth-textfield";
@customElement("ha-auth-form-string")
export class HaAuthFormString extends HaFormString {
protected createRenderRoot() {
// add parent style to light dom
const style = document.createElement("style");
style.innerHTML = HaFormString.elementStyles as unknown as string;
this.append(style);
return this;
}
@ -25,9 +21,21 @@ export class HaAuthFormString extends HaFormString {
ha-auth-form-string[own-margin] {
margin-bottom: 5px;
}
ha-auth-textfield {
ha-auth-form-string ha-auth-textfield {
display: block !important;
}
ha-auth-form-string ha-icon-button {
position: absolute;
top: 1em;
right: 12px;
--mdc-icon-button-size: 24px;
color: var(--secondary-text-color);
}
ha-auth-form-string ha-icon-button {
inset-inline-start: initial;
inset-inline-end: 12px;
direction: var(--direction);
}
</style>
<ha-auth-textfield
.type=${

View File

@ -1,4 +1,5 @@
/* eslint-disable lit/prefer-static-styles */
import { html } from "lit";
import { customElement } from "lit/decorators";
import { HaForm } from "../components/ha-form/ha-form";
import "./ha-auth-form-string";
@ -13,14 +14,27 @@ export class HaAuthForm extends HaForm {
}
protected createRenderRoot() {
// add parent style to light dom
const style = document.createElement("style");
style.innerHTML = HaForm.elementStyles as unknown as string;
this.append(style);
// attach it as soon as possible to make sure we fetch all events.
this.addValueChangedListener(this);
return this;
}
protected render() {
return html`
<style>
ha-auth-form .root > * {
display: block;
}
ha-auth-form .root > *:not([own-margin]):not(:last-child) {
margin-bottom: 24px;
}
ha-auth-form ha-alert[own-margin] {
margin-bottom: 4px;
}
</style>
${super.render()}
`;
}
}
declare global {

View File

@ -1,11 +1,79 @@
/* eslint-disable lit/value-after-constraints */
/* eslint-disable lit/prefer-static-styles */
import { html } from "lit";
import { floatingLabel } from "@material/mwc-floating-label/mwc-floating-label-directive";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { live } from "lit/directives/live";
import { HaTextField } from "../components/ha-textfield";
import "@material/mwc-textfield/mwc-textfield.css";
@customElement("ha-auth-textfield")
export class HaAuthTextField extends HaTextField {
protected renderLabel(): TemplateResult | string {
return !this.label
? ""
: html`
<span
.floatingLabelFoundation=${floatingLabel(
this.label
) as unknown as any}
.id=${this.name}
>${this.label}</span
>
`;
}
protected renderInput(shouldRenderHelperText: boolean): TemplateResult {
const minOrUndef = this.minLength === -1 ? undefined : this.minLength;
const maxOrUndef = this.maxLength === -1 ? undefined : this.maxLength;
const autocapitalizeOrUndef = this.autocapitalize
? (this.autocapitalize as
| "off"
| "none"
| "on"
| "sentences"
| "words"
| "characters")
: undefined;
const showValidationMessage = this.validationMessage && !this.isUiValid;
const ariaLabelledbyOrUndef = this.label ? this.name : undefined;
const ariaControlsOrUndef = shouldRenderHelperText
? "helper-text"
: undefined;
const ariaDescribedbyOrUndef =
this.focused || this.helperPersistent || showValidationMessage
? "helper-text"
: undefined;
// TODO: live() directive needs casting for lit-analyzer
// https://github.com/runem/lit-analyzer/pull/91/files
// TODO: lit-analyzer labels min/max as (number|string) instead of string
return html` <input
aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
aria-controls=${ifDefined(ariaControlsOrUndef)}
aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
class="mdc-text-field__input"
type=${this.type}
.value=${live(this.value) as unknown as string}
?disabled=${this.disabled}
placeholder=${this.placeholder}
?required=${this.required}
?readonly=${this.readOnly}
minlength=${ifDefined(minOrUndef)}
maxlength=${ifDefined(maxOrUndef)}
pattern=${ifDefined(this.pattern ? this.pattern : undefined)}
min=${ifDefined(this.min === "" ? undefined : (this.min as number))}
max=${ifDefined(this.max === "" ? undefined : (this.max as number))}
step=${ifDefined(this.step === null ? undefined : (this.step as number))}
size=${ifDefined(this.size === null ? undefined : this.size)}
name=${ifDefined(this.name === "" ? undefined : this.name)}
inputmode=${ifDefined(this.inputMode)}
autocapitalize=${ifDefined(autocapitalizeOrUndef)}
@input=${this.handleInputChange}
@focus=${this.onInputFocus}
@blur=${this.onInputBlur}
/>`;
}
public render() {
return html`
<style>
@ -173,7 +241,7 @@ export class HaAuthTextField extends HaTextField {
protected createRenderRoot() {
// add parent style to light dom
const style = document.createElement("style");
style.innerHTML = HaTextField.elementStyles as unknown as string;
style.textContent = HaTextField.elementStyles as unknown as string;
this.append(style);
return this;
}

View File

@ -2580,7 +2580,7 @@ __metadata:
languageName: node
linkType: hard
"@material/mwc-floating-label@npm:^0.27.0":
"@material/mwc-floating-label@npm:0.27.0, @material/mwc-floating-label@npm:^0.27.0":
version: 0.27.0
resolution: "@material/mwc-floating-label@npm:0.27.0"
dependencies:
@ -9758,6 +9758,7 @@ __metadata:
"@material/mwc-dialog": 0.27.0
"@material/mwc-drawer": 0.27.0
"@material/mwc-fab": 0.27.0
"@material/mwc-floating-label": 0.27.0
"@material/mwc-formfield": 0.27.0
"@material/mwc-icon-button": 0.27.0
"@material/mwc-linear-progress": 0.27.0