Fix hold action for picture element card in Android app (home-assistant#26647)

piitaya · MindFreeze · bramkragten · web-flow · commit 9cc85bc9285d · 2025-08-25T14:36:20.000Z
Co-authored-by: Petar Petrov &lt;MindFreeze@users.noreply.github.com&gt;
Co-authored-by: Bram Kragten &lt;mail@bramkragten.nl&gt;
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -1,6 +1,7 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -161,33 +162,40 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       this.layout === "grid" &&
       typeof this._config.grid_options?.rows === "number";
 
+    const hasTapAction =
+      hasAction(this._config.tap_action) ||
+      Boolean(!this._config.tap_action && this._config.entity);
+
     return html`
       <ha-card>
-        <hui-image
-          .hass=${this.hass}
-          .image=${image}
-          .stateImage=${this._config.state_image}
-          .stateFilter=${this._config.state_filter}
-          .cameraImage=${domain === "camera"
-            ? this._config.entity
-            : this._config.camera_image}
-          .cameraView=${this._config.camera_view}
-          .entity=${this._config.entity}
-          .aspectRatio=${ignoreAspectRatio
-            ? undefined
-            : this._config.aspect_ratio}
-          .fitMode=${this._config.fit_mode}
+        <div
+          class="image-container ${classMap({
+            clickable: hasTapAction,
+          })}"
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasHold: hasAction(this._config!.hold_action),
             hasDoubleClick: hasAction(this._config!.double_tap_action),
           })}
-          tabindex=${ifDefined(
-            hasAction(this._config.tap_action) || this._config.entity
-              ? "0"
-              : undefined
-          )}
-        ></hui-image>
+          tabindex=${ifDefined(hasTapAction ? "0" : undefined)}
+          role=${ifDefined(hasTapAction ? "0" : undefined)}
+        >
+          <hui-image
+            .hass=${this.hass}
+            .image=${image}
+            .stateImage=${this._config.state_image}
+            .stateFilter=${this._config.state_filter}
+            .cameraImage=${domain === "camera"
+              ? this._config.entity
+              : this._config.camera_image}
+            .cameraView=${this._config.camera_view}
+            .entity=${this._config.entity}
+            .aspectRatio=${ignoreAspectRatio
+              ? undefined
+              : this._config.aspect_ratio}
+            .fitMode=${this._config.fit_mode}
+          ></hui-image>
+        </div>
         ${footer}
       </ha-card>
     `;
@@ -202,8 +210,15 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       box-sizing: border-box;
     }
 
-    hui-image {
+    .image-container {
+      height: 100%;
+    }
+    .image-container.clickable {
       cursor: pointer;
+    }
+
+    hui-image {
+      pointer-events: none;
       height: 100%;
     }
 
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -219,33 +219,37 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card>
-        <hui-image
-          class=${classMap({
+        <div
+          class="image-container ${classMap({
             clickable:
               hasTapAction ||
               hasAction(this._config.hold_action) ||
               hasAction(this._config.double_tap_action),
-          })}
+          })}"
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasTap: hasTapAction,
             hasHold: hasAction(this._config.hold_action),
             hasDoubleClick: hasAction(this._config.double_tap_action),
           })}
           tabindex=${ifDefined(hasTapAction ? "0" : undefined)}
+          role=${ifDefined(hasTapAction ? "button" : undefined)}
           .config=${this._config}
-          .hass=${this.hass}
-          .image=${image}
-          .stateImage=${this._config.state_image}
-          .stateFilter=${this._config.state_filter}
-          .cameraImage=${this._config.camera_image}
-          .cameraView=${this._config.camera_view}
-          .entity=${this._config.entity}
-          .fitMode=${this._config.fit_mode}
-          .aspectRatio=${ignoreAspectRatio
-            ? undefined
-            : this._config.aspect_ratio}
-        ></hui-image>
+        >
+          <hui-image
+            .hass=${this.hass}
+            .image=${image}
+            .stateImage=${this._config.state_image}
+            .stateFilter=${this._config.state_filter}
+            .cameraImage=${this._config.camera_image}
+            .cameraView=${this._config.camera_view}
+            .entity=${this._config.entity}
+            .fitMode=${this._config.fit_mode}
+            .aspectRatio=${ignoreAspectRatio
+              ? undefined
+              : this._config.aspect_ratio}
+          ></hui-image>
+        </div>
         <div class="box">
           ${this._config.title
             ? html`<div class="title">${this._config.title}</div>`
@@ -342,12 +346,16 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       height: 100%;
       box-sizing: border-box;
     }
-    hui-image {
+    .image-container {
       height: 100%;
     }
-    hui-image.clickable {
+    .image-container.clickable {
       cursor: pointer;
     }
+    hui-image {
+      pointer-events: none;
+      height: 100%;
+    }
     .box {
       position: absolute;
       left: 0;
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
@@ -51,19 +51,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
     }
 
     return html`
-      <hui-image
-        .hass=${this.hass}
-        .entity=${this._config.entity}
-        .image=${stateObj ? computeImageUrl(stateObj) : this._config.image}
-        .stateImage=${this._config.state_image}
-        .cameraImage=${this._config.camera_image}
-        .cameraView=${this._config.camera_view}
-        .filter=${this._config.filter}
-        .stateFilter=${this._config.state_filter}
-        .title=${computeTooltip(this.hass, this._config)}
-        .aspectRatio=${this._config.aspect_ratio}
-        .darkModeImage=${this._config.dark_mode_image}
-        .darkModeFilter=${this._config.dark_mode_filter}
+      <div
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),
@@ -72,7 +60,25 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
         tabindex=${ifDefined(
           hasAction(this._config.tap_action) ? "0" : undefined
         )}
-      ></hui-image>
+        role=${ifDefined(
+          hasAction(this._config.tap_action) ? "button" : undefined
+        )}
+      >
+        <hui-image
+          .hass=${this.hass}
+          .entity=${this._config.entity}
+          .image=${stateObj ? computeImageUrl(stateObj) : this._config.image}
+          .stateImage=${this._config.state_image}
+          .cameraImage=${this._config.camera_image}
+          .cameraView=${this._config.camera_view}
+          .filter=${this._config.filter}
+          .stateFilter=${this._config.state_filter}
+          .title=${computeTooltip(this.hass, this._config)}
+          .aspectRatio=${this._config.aspect_ratio}
+          .darkModeImage=${this._config.dark_mode_image}
+          .darkModeFilter=${this._config.dark_mode_filter}
+        ></hui-image>
+      </div>
     `;
   }
 
@@ -84,9 +90,12 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
     }
     hui-image {
       -webkit-user-select: none !important;
+      pointer-events: none;
     }
-    hui-image:focus {
+    div:focus {
       outline: none;
+    }
+    div:focus hui-image {
       background: var(--divider-color);
       border-radius: 100%;
     }
