Add alt attribute to various images (#14405)

* ha-config-area-page: Add alt tag for area-picture

* dialog-tag-detail: Add alt tag for generated QR code image.

* ha-config-hardware: Blank alt tag for hardware pic, info already elsewhere

* dialog-energy-solar-settings: Blank alt tag for brand icon.

* ha-energy-grid-settings: Blank alt tag for co2signal brand icon.

* Add a few more appropriately-blank alt texts.

* ha-config-device-page: Logo alt text set to name of device domain.

* ha-config-repairs: Logo alt text set to name of issue domain.

* hui-picture-card(-editor): Alternate Text via config (blank default)

* hui-picture-entity-card(-editor): Alternate Text via config (blank default)

* ha-long-lived-access-token-dialog: Alt text for QR code.

* hui-picture-header-footer: Support alt text via optional property.

* A few more blank alt attributes.

* ha-tile-image: Support alt tag (but it is blank in current usage).

* prod cla-bot

* Lint. Fix whitespace.

* Add missing alt text properties to TS types.

* Fix my silly typo in picture-entity-card-editor's SCHEMA (+ minor reformat)

* Add alt_text to Picture(Entity)CardConfig TypeScript types.

* Format with prettier.

* Revise alt text for tag QR

* Revise alt text for token QR

* Revise alternate to alternative

* Add alt to logo in gallery

* Add alt text to crop image

* Use ifDefined for tile image alt

* Change area picture alt to area name

* Remove entry from entities config struct

* Revert altText changes for Picture Entity Card (to revisit in future PR)

See:
https://github.com/home-assistant/frontend/pull/14405#discussion_r1032735871

* Revert changes to hui-image and picture entity editor

Co-authored-by: Steve Repsher <steverep@users.noreply.github.com>

gallery/src/pages/components/ha-alert.ts

@@ -98,7 +98,9 @@ const alerts: {
     description: "Alert with slotted image",
     type: "warning",
     iconSlot: html`<span slot="icon" class="image"
-      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
+      ><img
+        alt="Home Assistant logo"
+        src="https://www.home-assistant.io/images/home-assistant-logo.svg"
     /></span>`,
   },
   {

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -404,6 +404,7 @@ class HassioAddonInfo extends LitElement {
                 ? html`
                     <img
                       class="logo"
+                      alt=""
                       src="/api/hassio/addons/${this.addon.slug}/logo"
                     />
                   `

src/components/ha-addon-picker.ts

@@ -16,7 +16,11 @@ const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
   <span>${item.name}</span>
   <span slot="secondary">${item.slug}</span>
   ${item.icon
-    ? html`<img slot="graphic" .src="/api/hassio/addons/${item.slug}/icon" />`
+    ? html`<img
+        alt=""
+        slot="graphic"
+        .src="/api/hassio/addons/${item.slug}/icon"
+      />`
     : ""}
 </mwc-list-item>`;
 

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

@@ -59,6 +59,7 @@ class HaConfigEntryPicker extends LitElement {
     >
     <span slot="secondary">${item.localized_domain_name}</span>
     <img
+      alt=""
       slot="graphic"
       src=${brandsUrl({
         domain: item.domain,

src/components/tile/ha-tile-image.ts

@@ -1,14 +1,19 @@
 import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 
 @customElement("ha-tile-image")
 export class HaTileImage extends LitElement {
   @property() public imageUrl?: string;
 
+  @property() public imageAlt?: string;
+
   protected render(): TemplateResult {
     return html`
       <div class="image">
-        ${this.imageUrl ? html`<img src=${this.imageUrl} />` : null}
+        ${this.imageUrl
+          ? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
+          : null}
       </div>
     `;
   }

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -74,7 +74,7 @@ export class HaImagecropperDialog extends LitElement {
           round: Boolean(this._params?.options.round),
         })}"
       >
-        <img />
+        <img alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")} />
       </div>
       <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
         ${this.hass.localize("ui.common.cancel")}

src/onboarding/integration-badge.ts

@@ -19,6 +19,7 @@ class IntegrationBadge extends LitElement {
     return html`
       <div class="icon">
         <img
+          alt=""
           src=${brandsUrl({
             domain: this.domain,
             type: "icon",

src/panels/config/areas/ha-config-area-page.ts

@@ -258,7 +258,8 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
           <div class="column">
             ${area.picture
               ? html`<div class="img-container">
-                  <img src=${area.picture} /><ha-icon-button
+                  <img alt=${area.name} src=${area.picture} />
+                  <ha-icon-button
                     .path=${mdiPencil}
                     .entry=${area}
                     @click=${this._showSettings}

src/panels/config/devices/ha-config-device-page.ts

@@ -659,6 +659,10 @@ export class HaConfigDevicePage extends LitElement {
                     integrations.length
                       ? html`
                           <img
+                            alt=${domainToName(
+                              this.hass.localize,
+                              integrations[0].domain
+                            )}
                             src=${brandsUrl({
                               domain: integrations[0].domain,
                               type: "logo",

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -220,6 +220,7 @@ export class EnergyGridSettings extends LitElement {
           ${this._co2ConfigEntry
             ? html`<div class="row" .entry=${this._co2ConfigEntry}>
                 <img
+                  alt=""
                   referrerpolicy="no-referrer"
                   src=${brandsUrl({
                     domain: "co2signal",
@@ -244,6 +245,7 @@ export class EnergyGridSettings extends LitElement {
             : html`
                 <div class="row border-bottom">
                   <img
+                    alt=""
                     referrerpolicy="no-referrer"
                     src=${brandsUrl({
                       domain: "co2signal",

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -130,6 +130,7 @@ export class DialogEnergySolarSettings
                     style="display: flex; align-items: center;"
                   >
                     <img
+                      alt=""
                       referrerpolicy="no-referrer"
                       style="height: 24px; margin-right: 16px;"
                       src=${brandsUrl({

src/panels/config/hardware/ha-config-hardware.ts

@@ -305,7 +305,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                         .twoline=${Boolean(boardId)}
                       >
                         ${imageURL
-                          ? html`<img slot="graphic" src=${imageURL} />`
+                          ? html`<img alt="" slot="graphic" src=${imageURL} />`
                           : ""}
                         <span class="primary-text">
                           ${boardName ||

src/panels/config/integrations/ha-domain-integrations.ts

@@ -48,6 +48,7 @@ class HaDomainIntegrations extends LitElement {
                 hasMeta
               >
                 <img
+                  alt=""
                   slot="graphic"
                   loading="lazy"
                   src=${brandsUrl({

src/panels/config/integrations/ha-integration-header.ts

@@ -92,6 +92,7 @@ export class HaIntegrationHeader extends LitElement {
       <slot name="above-header"></slot>
       <div class="header">
         <img
+          alt=""
           src=${brandsUrl({
             domain: this.domain,
             type: "icon",

src/panels/config/integrations/ha-integration-list-item.ts

@@ -47,6 +47,7 @@ export class HaIntegrationListItem extends ListItemBase {
       )}"
     >
       <img
+        alt=""
         loading="lazy"
         src=${brandsUrl({
           domain: this.integration.domain,

src/panels/config/repairs/ha-config-repairs.ts

@@ -52,6 +52,7 @@ class HaConfigRepairs extends LitElement {
               @click=${this._openShowMoreDialog}
             >
               <img
+                alt=${domainToName(this.hass.localize, issue.domain)}
                 loading="lazy"
                 src=${brandsUrl({
                   domain: issue.issue_domain || issue.domain,

src/panels/config/repairs/integrations-startup-time.ts

@@ -65,6 +65,7 @@ class IntegrationsStartupTime extends LitElement {
               href=${docLink}
             >
               <img
+                alt=""
                 loading="lazy"
                 src=${brandsUrl({
                   domain: setup.domain,

src/panels/config/tags/dialog-tag-detail.ts

@@ -244,7 +244,14 @@ class DialogTagDetail
       canvas.height / 3
     );
 
-    this._qrCode = html`<img src=${canvas.toDataURL()}></img>`;
+    this._qrCode = html`<img
+        alt=${this.hass.localize(
+          "ui.panel.config.tag.qr_code_image",
+          "name",
+          this._name
+        )}
+        src=${canvas.toDataURL()}
+      ></img>`;
   }
 
   static get styles(): CSSResultGroup {

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

@@ -101,7 +101,10 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
           ),
         })}
       >
-        <img src=${this.hass.hassUrl(this._config.image)} />
+        <img
+          alt=${this._config.alt_text}
+          src=${this.hass.hassUrl(this._config.image)}
+        />
       </ha-card>
     `;
   }

src/panels/lovelace/cards/types.ts

@@ -332,6 +332,7 @@ export interface PictureCardConfig extends LovelaceCardConfig {
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
   theme?: string;
+  alt_text?: string;
 }
 
 export interface PictureElementsCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -20,6 +20,7 @@ const cardConfigStruct = assign(
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
     theme: optional(string()),
+    alt_text: optional(string()),
   })
 );
 
@@ -53,6 +54,10 @@ export class HuiPictureCardEditor
     return this._config!.theme || "";
   }
 
+  get _alt_text(): string {
+    return this._config!.alt_text || "";
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -72,6 +77,16 @@ export class HuiPictureCardEditor
           .configValue=${"image"}
           @input=${this._valueChanged}
         ></ha-textfield>
+        <ha-textfield
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.alt_text"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .value=${this._alt_text}
+          .configValue=${"alt_text"}
+          @input=${this._valueChanged}
+        ></ha-textfield>
         <ha-theme-picker
           .hass=${this.hass}
           .value=${this._theme}

src/panels/lovelace/header-footer/hui-picture-header-footer.ts

@@ -68,6 +68,7 @@ export class HuiPictureHeaderFooter
 
     return html`
       <img
+        alt=${this._config!.alt_text}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),

src/panels/lovelace/header-footer/structs.ts

@@ -17,6 +17,7 @@ export const pictureHeaderFooterConfigStruct = object({
   tap_action: optional(actionConfigStruct),
   hold_action: optional(actionConfigStruct),
   double_tap_action: optional(actionConfigStruct),
+  alt_text: optional(string()),
 });
 
 export const buttonsHeaderFooterConfigStruct = object({

src/panels/lovelace/header-footer/types.ts

@@ -27,4 +27,5 @@ export interface PictureHeaderFooterConfig extends LovelaceHeaderFooterConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  alt_text?: string;
 }

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -85,7 +85,14 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
       canvas.height / 3
     );
 
-    this._qrCode = html`<img src=${canvas.toDataURL()}></img>`;
+    this._qrCode = html`<img
+        alt=${this.hass.localize(
+          "ui.panel.profile.long_lived_access_tokens.qr_code_image",
+          "name",
+          this._params!.name
+        )}
+        src=${canvas.toDataURL()}
+      ></img>`;
   }
 
   static get styles(): CSSResultGroup {

src/translations/en.json

@@ -791,7 +791,8 @@
         "close": "Close"
       },
       "image_cropper": {
-        "crop": "Crop"
+        "crop": "Crop",
+        "crop_image": "Picture to crop"
       },
       "date-picker": {
         "today": "Today"
@@ -1435,6 +1436,7 @@
           "confirm_remove_title": "Remove tag?",
           "confirm_remove": "Are you sure you want to remove tag {tag}?",
           "automation_title": "Tag {name} is scanned",
+          "qr_code_image": "QR code for tag {name}",
           "headers": {
             "icon": "Icon",
             "name": "Name",
@@ -4195,6 +4197,7 @@
               "description": "The Light card allows you to change the brightness of the light."
             },
             "generic": {
+              "alt_text": "Alternative Text",
               "aspect_ratio": "Aspect Ratio",
               "attribute": "Attribute",
               "camera_image": "Camera Entity",
@@ -4598,7 +4601,8 @@
           "name": "Name",
           "prompt_name": "Give the token a name",
           "prompt_copy_token": "Copy your access token. It will not be shown again.",
-          "empty_state": "You have no long-lived access tokens yet."
+          "empty_state": "You have no long-lived access tokens yet.",
+          "qr_code_image": "QR code for token {name}"
         }
       },
       "shopping_list": {