Fix aria label auth page (#18032)

build-scripts/webpack.cjs

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

package.json

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

src/auth/ha-auth-flow.ts

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

src/auth/ha-auth-form-string.ts

@@ -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=${

src/auth/ha-auth-form.ts

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

src/auth/ha-auth-textfield.ts

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

yarn.lock

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