From 8275ac5853ccbc94a343672998e36a04436184f6 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 10 Nov 2020 11:39:09 +0100
Subject: [PATCH] Ensure "next" and "prev" buttons always have ARIA label
 (#7588)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 hassio/src/ingress-view/hassio-ingress-view.ts   |  1 +
 src/components/ha-icon-button-arrow-next.ts      | 10 +++++++++-
 src/components/ha-icon-button-arrow-prev.ts      | 16 +++++++++++++---
 src/components/ha-icon-button-next.ts            | 16 +++++++++++++---
 src/components/ha-icon-button-prev.ts            | 16 +++++++++++++---
 src/dialogs/notifications/notification-drawer.js |  5 ++++-
 src/layouts/hass-error-screen.ts                 |  4 ++++
 src/layouts/hass-loading-screen.ts               |  1 +
 src/layouts/hass-subpage.ts                      | 14 +++++++-------
 src/layouts/hass-tabs-subpage.ts                 |  2 +-
 src/panels/config/areas/ha-config-area-page.ts   |  3 ++-
 src/panels/config/cloud/account/cloud-account.js |  2 +-
 src/panels/config/cloud/alexa/cloud-alexa.ts     |  6 +++---
 .../forgot-password/cloud-forgot-password.js     |  1 +
 .../google-assistant/cloud-google-assistant.ts   |  6 +++---
 src/panels/config/cloud/login/cloud-login.js     |  2 +-
 .../config/cloud/register/cloud-register.js      |  2 +-
 .../config/devices/ha-config-device-page.ts      |  5 +++--
 .../integration-panels/mqtt/mqtt-config-panel.ts |  2 +-
 .../ozw/ozw-config-dashboard.ts                  |  5 +++--
 .../integration-panels/ozw/ozw-node-config.ts    |  5 +++--
 .../integration-panels/ozw/ozw-node-dashboard.ts |  3 ++-
 .../integration-panels/zha/zha-add-group-page.ts |  1 +
 .../integration-panels/zha/zha-group-page.ts     |  7 ++++---
 .../integration-panels/zwave/ha-config-zwave.js  |  1 +
 .../editor/view-editor/hui-dialog-edit-view.ts   |  2 +-
 src/panels/lovelace/ha-panel-lovelace.ts         |  1 +
 src/panels/lovelace/hui-root.ts                  | 12 ++++++++++--
 28 files changed, 108 insertions(+), 43 deletions(-)

diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 6a56522e9a..14962c6f36 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -58,6 +58,7 @@ class HassioIngressView extends LitElement {
 
     if (!this.ingressPanel) {
       return html`<hass-subpage
+        .hass=${this.hass}
         .header=${this._addon.name}
         .narrow=${this.narrow}
       >
diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts
index 4d84add488..06401f0e06 100644
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@@ -9,11 +9,16 @@ import {
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import "@material/mwc-icon-button/mwc-icon-button";
 import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-arrow-next")
 export class HaIconButtonArrowNext extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public disabled = false;
 
+  @property() public label?: string;
+
   @internalProperty() private _icon = mdiArrowRight;
 
   public connectedCallback() {
@@ -29,7 +34,10 @@ export class HaIconButtonArrowNext extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button .disabled=${this.disabled}>
+    return html`<mwc-icon-button
+      .disabled=${this.disabled}
+      .label=${this.label || this.hass.localize("ui.common.next")}
+    >
       <ha-svg-icon .path=${this._icon}></ha-svg-icon>
     </mwc-icon-button> `;
   }
diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts
index 07c8265bb2..fab1951371 100644
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@@ -9,11 +9,16 @@ import {
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import "@material/mwc-icon-button/mwc-icon-button";
 import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public disabled = false;
 
+  @property() public label?: string;
+
   @internalProperty() private _icon = mdiArrowLeft;
 
   public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonArrowPrev extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button .disabled=${this.disabled}>
-      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
-    </mwc-icon-button> `;
+    return html`
+      <mwc-icon-button
+        .disabled=${this.disabled}
+        .label=${this.label || this.hass.localize("ui.common.back")}
+      >
+        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      </mwc-icon-button>
+    `;
   }
 }
 
diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts
index e328c4ff1e..0ffcd7e9bd 100644
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@@ -9,11 +9,16 @@ import {
 import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
 import "@material/mwc-icon-button";
 import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-next")
 export class HaIconButtonNext extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public disabled = false;
 
+  @property() public label?: string;
+
   @internalProperty() private _icon = mdiChevronRight;
 
   public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonNext extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button .disabled=${this.disabled}>
-      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
-    </mwc-icon-button> `;
+    return html`
+      <mwc-icon-button
+        .disabled=${this.disabled}
+        .label=${this.label || this.hass.localize("ui.common.next")}
+      >
+        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      </mwc-icon-button>
+    `;
   }
 }
 
diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts
index 077b5a03bf..b70f64c650 100644
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@@ -9,11 +9,16 @@ import {
 import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
 import "@material/mwc-icon-button/mwc-icon-button";
 import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
 
 @customElement("ha-icon-button-prev")
 export class HaIconButtonPrev extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public disabled = false;
 
+  @property() public label?: string;
+
   @internalProperty() private _icon = mdiChevronLeft;
 
   public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonPrev extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button .disabled=${this.disabled}>
-      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
-    </mwc-icon-button> `;
+    return html`
+      <mwc-icon-button
+        .disabled=${this.disabled}
+        .label=${this.label || this.hass.localize("ui.common.back")}
+      >
+        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      </mwc-icon-button>
+    `;
   }
 }
 
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 0ad149e9f0..81a45156d2 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -63,7 +63,10 @@ export class HuiNotificationDrawer extends EventsMixin(
     <app-drawer id="drawer" opened="{{open}}" disable-swipe align="start">
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <ha-icon-button-prev on-click="_closeDrawer" aria-label$="[[localize('ui.notification_drawer.close')]]"></ha-icon-button-prev>
+        <ha-icon-button-prev hass="[[hass]]" on-click="_closeDrawer" 
+          title="[[localize('ui.notification_drawer.close')]]" 
+          label="[[localize('ui.notification_drawer.close')]]">
+        </ha-icon-button-prev>
       </app-toolbar>
       <div class="notifications">
         <template is="dom-if" if="[[!_empty(notifications)]]">
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
index 962e812de5..5a4702329d 100644
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -9,9 +9,12 @@ import {
   TemplateResult,
 } from "lit-element";
 import "./hass-subpage";
+import { HomeAssistant } from "../types";
 
 @customElement("hass-error-screen")
 class HassErrorScreen extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public toolbar = true;
 
   @property() public error?: string;
@@ -21,6 +24,7 @@ class HassErrorScreen extends LitElement {
       ${this.toolbar
         ? html`<div class="toolbar">
             <ha-icon-button-arrow-prev
+              .hass=${this.hass}
               @click=${this._handleBack}
             ></ha-icon-button-arrow-prev>
           </div>`
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
index e3917e581f..7d0e903769 100644
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -39,6 +39,7 @@ class HassLoadingScreen extends LitElement {
                 `
               : html`
                   <ha-icon-button-arrow-prev
+                    .hass=${this.hass}
                     @click=${this._handleBack}
                   ></ha-icon-button-arrow-prev>
                 `}
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 72afdffa1c..d9a9f55d2d 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -12,17 +12,17 @@ import { classMap } from "lit-html/directives/class-map";
 import "../components/ha-menu-button";
 import "../components/ha-icon-button-arrow-prev";
 import { restoreScroll } from "../common/decorators/restore-scroll";
+import { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
 class HassSubpage extends LitElement {
-  @property()
-  public header?: string;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean })
-  public showBackButton = true;
+  @property() public header?: string;
 
-  @property({ type: Boolean })
-  public hassio = false;
+  @property({ type: Boolean }) public showBackButton = true;
+
+  @property({ type: Boolean }) public hassio = false;
 
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
@@ -31,7 +31,7 @@ class HassSubpage extends LitElement {
     return html`
       <div class="toolbar">
         <ha-icon-button-arrow-prev
-          aria-label="Back"
+          .hass=${this.hass}
           @click=${this._backTapped}
           class=${classMap({ hidden: !this.showBackButton })}
         ></ha-icon-button-arrow-prev>
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 24b5ca9f9a..e33bbb61a7 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -145,7 +145,7 @@ class HassTabsSubpage extends LitElement {
             `
           : html`
               <ha-icon-button-arrow-prev
-                aria-label="Back"
+                .hass=${this.hass}
                 @click=${this._backTapped}
               ></ha-icon-button-arrow-prev>
             `}
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index d03ebebbba..3cddc9ba5d 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -81,7 +81,8 @@ class HaConfigAreaPage extends LitElement {
     if (!area) {
       return html`
         <hass-error-screen
-          error="${this.hass.localize("ui.panel.config.areas.area_not_found")}"
+          .hass=${this.hass}
+          .error=${this.hass.localize("ui.panel.config.areas.area_not_found")}
         ></hass-error-screen>
       `;
     }
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index b919b3d463..2359d24067 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/src/panels/config/cloud/account/cloud-account.js
@@ -61,7 +61,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
       </style>
-      <hass-subpage header="Home Assistant Cloud">
+      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index 904333c728..d9bdbd1e14 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -214,9 +214,9 @@ class CloudAlexa extends LitElement {
     }
 
     return html`
-      <hass-subpage header="${this.hass!.localize(
-        "ui.panel.config.cloud.alexa.title"
-      )}">
+      <hass-subpage .hass=${this.hass} header="${this.hass!.localize(
+      "ui.panel.config.cloud.alexa.title"
+    )}">
         ${
           emptyFilter
             ? html`
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
index 68acfeec7e..d6e39ed4c7 100644
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
@@ -46,6 +46,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
       </style>
       <hass-subpage
+        hass="[[hass]]"
         header="[[localize('ui.panel.config.cloud.forgot_password.title')]]"
       >
         <div class="content">
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 40067a0eaf..e0ad918fe5 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -237,9 +237,9 @@ class CloudGoogleAssistant extends LitElement {
     }
 
     return html`
-      <hass-subpage header="${this.hass!.localize(
-        "ui.panel.config.cloud.google.title"
-      )}">
+      <hass-subpage 
+        .hass=${this.hass}
+        .header=${this.hass!.localize("ui.panel.config.cloud.google.title")}>
         ${
           emptyFilter
             ? html`
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
index eb84940803..f2cdeb3350 100644
--- a/src/panels/config/cloud/login/cloud-login.js
+++ b/src/panels/config/cloud/login/cloud-login.js
@@ -76,7 +76,7 @@ class CloudLogin extends LocalizeMixin(
           left: 8px;
         }
       </style>
-      <hass-subpage header="Home Assistant Cloud">
+      <hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
         <div class="content">
           <ha-config-section is-wide="[[isWide]]">
             <span slot="header">Home Assistant Cloud</span>
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
index 382effb34f..8071ec8058 100644
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/src/panels/config/cloud/register/cloud-register.js
@@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
         display: none;
       }
     </style>
-    <hass-subpage header="[[localize('ui.panel.config.cloud.register.title')]]">
+    <hass-subpage hass="[[hass]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
       <div class="content">
         <ha-config-section is-wide="[[isWide]]">
           <span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index dfe1286905..4c747026ff 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -143,9 +143,10 @@ export class HaConfigDevicePage extends LitElement {
     if (!device) {
       return html`
         <hass-error-screen
-          error="${this.hass.localize(
+          .hass=${this.hass}
+          .error=${this.hass.localize(
             "ui.panel.config.devices.device_not_found"
-          )}"
+          )}
         ></hass-error-screen>
       `;
     }
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
index e2c166f571..eefacaf40c 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
@@ -41,7 +41,7 @@ class HaPanelDevMqtt extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage>
+      <hass-subpage .hass=${this.hass}>
         <div class="content">
           <ha-card header="MQTT settings">
             <div class="card-actions">
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
index ee05890a37..bbf4ba6188 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
@@ -58,9 +58,10 @@ class OZWConfigDashboard extends LitElement {
 
     if (this._instances.length === 0) {
       return html`<hass-error-screen
-        .error="${this.hass.localize(
+        .hass=${this.hass}
+        .error=${this.hass.localize(
           "ui.panel.config.ozw.select_instance.none_found"
-        )}"
+        )}
       ></hass-error-screen>`;
     }
 
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
index b1017aaaa8..5eb89a30bb 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@@ -68,9 +68,10 @@ class OZWNodeConfig extends LitElement {
     if (this._error) {
       return html`
         <hass-error-screen
-          .error="${this.hass.localize(
+          .hass=${this.hass}
+          .error=${this.hass.localize(
             "ui.panel.config.ozw.node." + this._error
-          )}"
+          )}
         ></hass-error-screen>
       `;
     }
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
index c860027551..7ac930d8b4 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
@@ -64,7 +64,8 @@ class OZWNodeDashboard extends LitElement {
     if (this._not_found) {
       return html`
         <hass-error-screen
-          .error="${this.hass.localize("ui.panel.config.ozw.node.not_found")}"
+          .hass=${this.hass}
+          .error=${this.hass.localize("ui.panel.config.ozw.node.not_found")}
         ></hass-error-screen>
       `;
     }
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index fdbe21ea19..0887ccca34 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -67,6 +67,7 @@ export class ZHAAddGroupPage extends LitElement {
   protected render() {
     return html`
       <hass-subpage
+        .hass=${this.hass}
         .header=${this.hass.localize("ui.panel.config.zha.groups.create_group")}
       >
         <ha-config-section .isWide=${!this.narrow}>
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
index 2c52b29933..1526c4c0d8 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -94,15 +94,16 @@ export class ZHAGroupPage extends LitElement {
     if (!this.group) {
       return html`
         <hass-error-screen
-          error="${this.hass.localize(
+          .hass=${this.hass}
+          .error=${this.hass.localize(
             "ui.panel.config.zha.groups.group_not_found"
-          )}"
+          )}
         ></hass-error-screen>
       `;
     }
 
     return html`
-      <hass-subpage .header=${this.group.name}>
+      <hass-subpage .hass=${this.hass} .header=${this.group.name}>
         <ha-icon-button
           slot="toolbar-icon"
           icon="hass:delete"
diff --git a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
index f768d764d8..9c9dc1fdfc 100644
--- a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
+++ b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
@@ -93,6 +93,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <app-header slot="header" fixed="">
           <app-toolbar>
             <ha-icon-button-arrow-prev
+              hass="[[hass]]"
               on-click="_backTapped"
             ></ha-icon-button-arrow-prev>
             <div main-title="">
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index d4b1eafced..0459cfa6c2 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -148,7 +148,7 @@ export class HuiDialogEditView extends LitElement {
       case "tab-visibility":
         content = html`
           <hui-view-visibility-editor
-            .hass="${this.hass}"
+            .hass=${this.hass}
             .config="${this._config}"
             @view-visibility-changed="${this._viewVisibilityChanged}"
           ></hui-view-visibility-editor>
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index a955e59056..b3db6ba6ad 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -109,6 +109,7 @@ class LovelacePanel extends LitElement {
     if (state === "error") {
       return html`
         <hass-error-screen
+          .hass=${this.hass}
           title="${domainToName(this.hass!.localize, "lovelace")}"
           .error="${this._errorMsg}"
         >
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 9f14c9c9b6..8ebb8df92e 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -405,7 +405,11 @@ class HUIRoot extends LitElement {
                           ${this._editMode
                             ? html`
                                 <ha-icon-button-arrow-prev
-                                  title="${this.hass!.localize(
+                                  .hass=${this.hass}
+                                  .title="${this.hass!.localize(
+                                    "ui.panel.lovelace.editor.edit_view.move_left"
+                                  )}"
+                                  .label="${this.hass!.localize(
                                     "ui.panel.lovelace.editor.edit_view.move_left"
                                   )}"
                                   class="edit-icon view"
@@ -433,7 +437,11 @@ class HUIRoot extends LitElement {
                                   @click="${this._editView}"
                                 ></ha-svg-icon>
                                 <ha-icon-button-arrow-next
-                                  title="${this.hass!.localize(
+                                  .hass=${this.hass}
+                                  .title="${this.hass!.localize(
+                                    "ui.panel.lovelace.editor.edit_view.move_right"
+                                  )}"
+                                  .label="${this.hass!.localize(
                                     "ui.panel.lovelace.editor.edit_view.move_right"
                                   )}"
                                   class="edit-icon view"