Combo-box accessibility and other fixes (#13496)

package.json

@@ -119,7 +119,6 @@
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
-    "lit-vaadin-helpers": "^0.3.0",
     "marked": "^4.0.12",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",

src/common/translations/localize.ts

@@ -18,7 +18,6 @@ export type LocalizeKeys =
   | `ui.card.alarm_control_panel.${string}`
   | `ui.card.weather.attributes.${string}`
   | `ui.card.weather.cardinal_direction.${string}`
-  | `ui.components.combo-box.${string}`
   | `ui.components.logbook.${string}`
   | `ui.components.selectors.file.${string}`
   | `ui.dialogs.entity_registry.editor.${string}`

src/components/device/ha-area-devices-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/device/ha-device-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/entity/ha-entity-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/entity/ha-statistic-picker.ts

@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/ha-addon-picker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-area-picker.ts

@@ -1,6 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";

src/components/ha-combo-box.ts

@@ -9,8 +9,9 @@ import type {
 } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -72,31 +73,31 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
-  @property({ type: Boolean }) public invalid?: boolean;
+  @property({ type: Boolean }) public invalid = false;
 
-  @property({ type: Boolean }) public icon?: boolean;
+  @property({ type: Boolean }) public icon = false;
 
-  @property() public items?: any[];
+  @property({ attribute: false }) public items?: any[];
 
-  @property() public filteredItems?: any[];
+  @property({ attribute: false }) public filteredItems?: any[];
 
   @property({ attribute: "allow-custom-value", type: Boolean })
-  public allowCustomValue?: boolean;
+  public allowCustomValue = false;
 
-  @property({ attribute: "item-value-path" }) public itemValuePath?: string;
+  @property({ attribute: "item-value-path" }) public itemValuePath = "value";
 
-  @property({ attribute: "item-label-path" }) public itemLabelPath?: string;
+  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
 
   @property({ attribute: "item-id-path" }) public itemIdPath?: string;
 
   @property() public renderer?: ComboBoxLitRenderer<any>;
 
-  @property({ type: Boolean }) public disabled?: boolean;
+  @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
   @property({ type: Boolean, reflect: true, attribute: "opened" })
-  private _opened?: boolean;
+  public opened?: boolean;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
@@ -149,37 +150,45 @@ export class HaComboBox extends LitElement {
         attr-for-value="value"
       >
         <ha-textfield
-          .label=${this.label}
+          label=${ifDefined(this.label)}
-          .placeholder=${this.placeholder}
+          placeholder=${ifDefined(this.placeholder)}
-          .disabled=${this.disabled}
+          ?disabled=${this.disabled}
-          .required=${this.required}
+          ?required=${this.required}
-          .validationMessage=${this.validationMessage}
+          validationMessage=${ifDefined(this.validationMessage)}
           .errorMessage=${this.errorMessage}
           class="input"
           autocapitalize="none"
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
-          .suffix=${html`<div style="width: 28px;"></div>`}
+          .suffix=${html`<div
+            style="width: 28px;"
+            role="none presentation"
+          ></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
+          helper=${ifDefined(this.helper)}
           helperPersistent
         >
           <slot name="icon" slot="leadingIcon"></slot>
         </ha-textfield>
         ${this.value
           ? html`<ha-svg-icon
-              aria-label=${this.hass?.localize("ui.components.combo-box.clear")}
+              role="button"
+              tabindex="-1"
+              aria-label=${ifDefined(this.hass?.localize("ui.common.clear"))}
               class="clear-button"
               .path=${mdiClose}
               @click=${this._clearValue}
             ></ha-svg-icon>`
           : ""}
         <ha-svg-icon
-          aria-label=${this.hass?.localize("ui.components.combo-box.show")}
+          role="button"
+          tabindex="-1"
+          aria-label=${ifDefined(this.label)}
+          aria-expanded=${this.opened ? "true" : "false"}
           class="toggle-button"
-          .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+          .path=${this.opened ? mdiMenuUp : mdiMenuDown}
           @click=${this._toggleOpen}
         ></ha-svg-icon>
       </vaadin-combo-box-light>
@@ -199,7 +208,7 @@ export class HaComboBox extends LitElement {
   }
 
   private _toggleOpen(ev: Event) {
-    if (this._opened) {
+    if (this.opened) {
       this._comboBox?.close();
       ev.stopPropagation();
     } else {
@@ -211,7 +220,7 @@ export class HaComboBox extends LitElement {
     const opened = ev.detail.value;
     // delay this so we can handle click event before setting _opened
     setTimeout(() => {
-      this._opened = opened;
+      this.opened = opened;
     }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);

src/components/ha-config-entry-picker.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";

src/components/ha-icon-picker.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { customIcons } from "../data/custom_icons";

src/components/ha-selector/ha-selector-icon.ts

@@ -24,6 +24,7 @@ export class HaIconSelector extends LitElement {
   protected render() {
     return html`
       <ha-icon-picker
+        .hass=${this.hass}
         .label=${this.label}
         .value=${this.value}
         .required=${this.required}

src/components/ha-service-picker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";

src/panels/config/entities/entity-registry-settings.ts

@@ -315,6 +315,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           @input=${this._nameChanged}
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           @value-changed=${this._iconChanged}
           .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -82,6 +82,7 @@ class HaCounterForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -60,6 +60,7 @@ class HaInputBooleanForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -60,6 +60,7 @@ class HaInputButtonForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -74,6 +74,7 @@ class HaInputDateTimeForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -91,6 +91,7 @@ class HaInputNumberForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -72,6 +72,7 @@ class HaInputSelectForm extends LitElement {
           @input=${this._valueChanged}
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -79,6 +79,7 @@ class HaInputTextForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -126,6 +126,7 @@ class HaScheduleForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -68,6 +68,7 @@ class HaTimerForm extends LitElement {
           dialogInitialFocus
         ></ha-textfield>
         <ha-icon-picker
+          .hass=${this.hass}
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}

src/panels/config/scene/ha-scene-editor.ts

@@ -301,6 +301,7 @@ export class HaSceneEditor extends SubscribeMixin(
                         )}
                       ></ha-textfield>
                       <ha-icon-picker
+                        .hass=${this.hass}
                         .label=${this.hass.localize(
                           "ui.panel.config.scene.editor.icon"
                         )}

yarn.lock

@@ -9108,7 +9108,6 @@ fsevents@^1.2.7:
     lint-staged: ^13.0.3
     lit: ^2.1.2
     lit-analyzer: ^1.2.1
-    lit-vaadin-helpers: ^0.3.0
     lodash.template: ^4.5.0
     magic-string: ^0.25.7
     map-stream: ^0.0.7
@@ -10749,15 +10748,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit-vaadin-helpers@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "lit-vaadin-helpers@npm:0.3.0"
-  dependencies:
-    lit: ^2.0.0
-  checksum: c96df23272442b3f6c38273721306eb650ea27876fade53ccfbb0158eef838865b1727b9657d35a80f55d94b1418106be63794adb064b79f35dfe3014fb435ff
-  languageName: node
-  linkType: hard
-
 "lit@npm:^2.1.2":
   version: 2.1.2
   resolution: "lit@npm:2.1.2"