From 1b922e00652a9a8a37aad1ce5bd815b9c10af044 Mon Sep 17 00:00:00 2001
From: Steve Repsher <steverep@users.noreply.github.com>
Date: Sun, 22 Jan 2023 22:47:12 -0500
Subject: [PATCH] Add more alternative text to various images (#14932)

* Add alt text for cast launcher images

* Hide icon with supervisor form field label

* Use attribute for iframe title for ingress view

* Hide some decorative ZWave/ZHA icons

* Hide image preload in state card configurator

* Use title for alt text  on image media

* Hide media art as decorative

* Do not allow empty string for image media
---
 cast/src/launcher/layout/hc-layout.ts              |  6 +++++-
 cast/src/receiver/layout/hc-launch-screen.ts       |  1 +
 .../src/components/supervisor-formfield-label.ts   |  2 +-
 hassio/src/ingress-view/hassio-ingress-view.ts     |  4 ++--
 .../config/integrations/ha-domain-integrations.ts  |  2 ++
 src/panels/media-browser/ha-bar-media-player.ts    |  4 +++-
 .../hui-dialog-web-browser-play-media.ts           | 14 ++++++++++++--
 src/state-summary/state-card-configurator.js       |  2 +-
 8 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index 30c240db12..69d788fe21 100644
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -22,7 +22,11 @@ class HcLayout extends LitElement {
     return html`
       <ha-card>
         <div class="layout">
-          <img class="hero" src="/images/google-nest-hub.png" />
+          <img
+            class="hero"
+            alt="A Google Nest Hub with a Home Assistant dashboard on its screen"
+            src="/images/google-nest-hub.png"
+          />
           <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts
index a4d6aa5e4e..0b94aacda1 100644
--- a/cast/src/receiver/layout/hc-launch-screen.ts
+++ b/cast/src/receiver/layout/hc-launch-screen.ts
@@ -12,6 +12,7 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
+          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
           src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
         />
         <div class="status">
diff --git a/hassio/src/components/supervisor-formfield-label.ts b/hassio/src/components/supervisor-formfield-label.ts
index 9220d20946..70daf3dcc8 100644
--- a/hassio/src/components/supervisor-formfield-label.ts
+++ b/hassio/src/components/supervisor-formfield-label.ts
@@ -15,7 +15,7 @@ class SupervisorFormfieldLabel extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.imageUrl
-        ? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
+        ? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
         : this.iconPath
         ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
         : ""}
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 6682531632..f2ac689f87 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -60,8 +60,8 @@ class HassioIngressView extends LitElement {
     }
 
     const iframe = html`<iframe
-      .title=${this._addon.name}
-      .src=${this._addon.ingress_url!}
+      title=${this._addon.name}
+      src=${this._addon.ingress_url!}
     >
     </iframe>`;
 
diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts
index f62461b553..da4c1f7aed 100644
--- a/src/panels/config/integrations/ha-domain-integrations.ts
+++ b/src/panels/config/integrations/ha-domain-integrations.ts
@@ -92,6 +92,7 @@ class HaDomainIntegrations extends LitElement {
               <img
                 slot="graphic"
                 loading="lazy"
+                alt=""
                 src=${brandsUrl({
                   domain,
                   type: "icon",
@@ -153,6 +154,7 @@ class HaDomainIntegrations extends LitElement {
             <img
               slot="graphic"
               loading="lazy"
+              alt=""
               src=${brandsUrl({
                 domain: this.domain,
                 type: "icon",
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index b46902e0b2..be9e9d4e2d 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -227,7 +227,9 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         })}
         @click=${this._openMoreInfo}
       >
-        ${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
+        ${mediaArt
+          ? html`<img alt="" src=${this.hass.hassUrl(mediaArt)} />`
+          : ""}
         <div class="media-info">
           <hui-marquee
             .text=${mediaTitleClean ||
diff --git a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
index 18af9e77d7..78a7beb8c3 100644
--- a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
+++ b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
@@ -76,7 +83,10 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
               ></ha-hls-player>
             `
           : mediaType === "image"
-          ? html`<img src=${this._params.sourceUrl} />`
+          ? html`<img
+              alt=${this._params.title || nothing}
+              src=${this._params.sourceUrl}
+            />`
           : html`${this.hass.localize(
               "ui.components.media-browser.media_not_supported"
             )}`}
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 98ab9a1bd1..4391445c00 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -31,7 +31,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
 
       <!-- pre load the image so the dialog is rendered the proper size -->
       <template is="dom-if" if="[[stateObj.attributes.description_image]]">
-        <img hidden="" src="[[stateObj.attributes.description_image]]" />
+        <img hidden="" alt="" src="[[stateObj.attributes.description_image]]" />
       </template>
     `;
   }