Add title attributes to iframes for accessibility (#14760)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -59,7 +59,11 @@ class HassioIngressView extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const iframe = html`<iframe src=${this._addon.ingress_url!}></iframe>`;
+    const iframe = html`<iframe
+      .title=${this._addon.name}
+      .src=${this._addon.ingress_url!}
+    >
+    </iframe>`;
 
     if (!this.ingressPanel) {
       return html`<hass-subpage

src/panels/custom/ha-panel-custom.ts

@@ -12,6 +12,9 @@ import {
 import { setCustomPanelProperties } from "../../util/custom-panel/set-custom-panel-properties";
 
 declare global {
+  interface HTMLElementTagNameMap {
+    "ha-panel-custom": HaPanelCustom;
+  }
   interface Window {
     customPanel: HaPanelCustom | undefined;
   }
@@ -140,18 +143,18 @@ export class HaPanelCustom extends ReactiveElement {
     }
 
     window.customPanel = this;
+    const titleAttr = this.panel.title ? `title="${this.panel.title}"` : "";
     this.innerHTML = `
-    <style>
-      iframe {
-        border: 0;
-        width: 100%;
-        height: 100%;
-        display: block;
-        background-color: var(--primary-background-color);
-      }
-    </style>
-    <iframe></iframe>
-    `.trim();
+      <style>
+        iframe {
+          border: 0;
+          width: 100%;
+          height: 100%;
+          display: block;
+          background-color: var(--primary-background-color);
+        }
+      </style>
+      <iframe ${titleAttr}></iframe>`.trim();
     const iframeDoc = this.querySelector("iframe")!.contentWindow!.document;
     iframeDoc.open();
     iframeDoc.write(

src/panels/iframe/ha-panel-iframe.ts

@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../layouts/hass-error-screen";
 import "../../layouts/hass-subpage";
 import { HomeAssistant, PanelInfo } from "../../types";
@@ -35,11 +36,12 @@ class HaPanelIframe extends LitElement {
         main-page
       >
         <iframe
+          title=${ifDefined(
+            this.panel.title === null ? undefined : this.panel.title
+          )}
           src=${this.panel.config.url}
           sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-modals allow-downloads"
-          allowfullscreen="true"
-          webkitallowfullscreen="true"
-          mozallowfullscreen="true"
+          allow="fullscreen"
         ></iframe>
       </hass-subpage>
     `;

src/panels/lovelace/cards/hui-iframe-card.ts

@@ -1,12 +1,13 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
-import "../../../components/ha-card";
 import "../../../components/ha-alert";
+import "../../../components/ha-card";
+import type { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { IframeCardConfig } from "./types";
-import type { HomeAssistant } from "../../../types";
 
 @customElement("hui-iframe-card")
 export class HuiIframeCard extends LitElement implements LovelaceCard {
@@ -88,9 +89,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
           })}
         >
           <iframe
+            title=${ifDefined(this._config.title)}
             src=${this._config.url}
             sandbox="allow-forms allow-modals allow-popups allow-pointer-lock allow-same-origin allow-scripts"
-            allowfullscreen="true"
+            allow="fullscreen"
           ></iframe>
         </div>
       </ha-card>