From 4e62bb48bf268060e8fc160456703a1cfa56053a Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Sun, 24 Dec 2023 09:46:57 -0800
Subject: [PATCH 1/3] Remove tile pointer/ripple/index when it has no action

---
 src/panels/lovelace/cards/hui-tile-card.ts | 33 ++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 1c06426d1acb..bab97d5ca1b2 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -359,6 +359,15 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       : undefined;
     const badge = computeTileBadge(stateObj, this.hass);
 
+    const hasCardAction =
+      !this._config.tap_action ||
+      hasAction(this._config.tap_action) ||
+      hasAction(this._config.hold_action) ||
+      hasAction(this._config.double_tap_action);
+
+    const hasIconAction =
+      !this._config.icon_tap_action || hasAction(this._config.icon_tap_action);
+
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
         <div
@@ -368,16 +377,18 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             hasHold: hasAction(this._config!.hold_action),
             hasDoubleClick: hasAction(this._config!.double_tap_action),
           })}
-          role="button"
-          tabindex="0"
+          role=${hasCardAction ? "button" : ""}
+          tabindex=${hasCardAction ? "0" : undefined}
           aria-labelledby="info"
-          @mousedown=${this.handleRippleActivate}
-          @mouseup=${this.handleRippleDeactivate}
-          @mouseenter=${this.handleRippleMouseEnter}
-          @mouseleave=${this.handleRippleMouseLeave}
-          @touchstart=${this.handleRippleActivate}
-          @touchend=${this.handleRippleDeactivate}
-          @touchcancel=${this.handleRippleDeactivate}
+          @mousedown=${hasCardAction ? this.handleRippleActivate : undefined}
+          @mouseup=${hasCardAction ? this.handleRippleDeactivate : undefined}
+          @mouseenter=${hasCardAction ? this.handleRippleMouseEnter : undefined}
+          @mouseleave=${hasCardAction ? this.handleRippleMouseLeave : undefined}
+          @touchstart=${hasCardAction ? this.handleRippleActivate : undefined}
+          @touchend=${hasCardAction ? this.handleRippleDeactivate : undefined}
+          @touchcancel=${hasCardAction
+            ? this.handleRippleDeactivate
+            : undefined}
         >
           ${this._shouldRenderRipple
             ? html`<mwc-ripple></mwc-ripple>`
@@ -386,8 +397,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         <div class="content ${classMap(contentClasses)}">
           <div
             class="icon-container"
-            role="button"
-            tabindex="0"
+            role=${hasIconAction ? "button" : ""}
+            tabindex=${hasIconAction ? "0" : undefined}
             @action=${this._handleIconAction}
             .actionHandler=${actionHandler()}
           >

From e6f7a92124b5999b74b8e72fcb824a74880fd040 Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Thu, 28 Dec 2023 15:24:03 -0800
Subject: [PATCH 2/3] update

---
 src/panels/lovelace/cards/hui-tile-card.ts | 52 +++++++++++++---------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index bab97d5ca1b2..5d5d069a3bf6 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -287,21 +287,40 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
   @eventOptions({ passive: true })
   private handleRippleActivate(evt?: Event) {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.startPress(evt);
   }
 
   private handleRippleDeactivate() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.endPress();
   }
 
   private handleRippleMouseEnter() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.startHover();
   }
 
   private handleRippleMouseLeave() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.endHover();
   }
 
+  get hasCardAction() {
+    return (
+      !this._config?.tap_action ||
+      hasAction(this._config?.tap_action) ||
+      hasAction(this._config?.hold_action) ||
+      hasAction(this._config?.double_tap_action)
+    );
+  }
+
+  get hasIconAction() {
+    return (
+      !this._config?.icon_tap_action || hasAction(this._config?.icon_tap_action)
+    );
+  }
+
   protected render() {
     if (!this._config || !this.hass) {
       return nothing;
@@ -359,15 +378,6 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       : undefined;
     const badge = computeTileBadge(stateObj, this.hass);
 
-    const hasCardAction =
-      !this._config.tap_action ||
-      hasAction(this._config.tap_action) ||
-      hasAction(this._config.hold_action) ||
-      hasAction(this._config.double_tap_action);
-
-    const hasIconAction =
-      !this._config.icon_tap_action || hasAction(this._config.icon_tap_action);
-
     return html`
       <ha-card style=${styleMap(style)} class=${classMap({ active })}>
         <div
@@ -377,18 +387,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             hasHold: hasAction(this._config!.hold_action),
             hasDoubleClick: hasAction(this._config!.double_tap_action),
           })}
-          role=${hasCardAction ? "button" : ""}
-          tabindex=${hasCardAction ? "0" : undefined}
+          role=${this.hasCardAction ? "button" : ""}
+          tabindex=${this.hasCardAction ? "0" : undefined}
           aria-labelledby="info"
-          @mousedown=${hasCardAction ? this.handleRippleActivate : undefined}
-          @mouseup=${hasCardAction ? this.handleRippleDeactivate : undefined}
-          @mouseenter=${hasCardAction ? this.handleRippleMouseEnter : undefined}
-          @mouseleave=${hasCardAction ? this.handleRippleMouseLeave : undefined}
-          @touchstart=${hasCardAction ? this.handleRippleActivate : undefined}
-          @touchend=${hasCardAction ? this.handleRippleDeactivate : undefined}
-          @touchcancel=${hasCardAction
-            ? this.handleRippleDeactivate
-            : undefined}
+          @mousedown=${this.handleRippleActivate}
+          @mouseup=${this.handleRippleDeactivate}
+          @mouseenter=${this.handleRippleMouseEnter}
+          @mouseleave=${this.handleRippleMouseLeave}
+          @touchstart=${this.handleRippleActivate}
+          @touchend=${this.handleRippleDeactivate}
+          @touchcancel=${this.handleRippleDeactivate}
         >
           ${this._shouldRenderRipple
             ? html`<mwc-ripple></mwc-ripple>`
@@ -397,8 +405,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         <div class="content ${classMap(contentClasses)}">
           <div
             class="icon-container"
-            role=${hasIconAction ? "button" : ""}
-            tabindex=${hasIconAction ? "0" : undefined}
+            role=${this.hasIconAction ? "button" : ""}
+            tabindex=${this.hasIconAction ? "0" : undefined}
             @action=${this._handleIconAction}
             .actionHandler=${actionHandler()}
           >

From 0b3d81e2c15f44bcfc080d2ceb0f48ee24e6d23d Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Wed, 3 Jan 2024 05:39:09 -0800
Subject: [PATCH 3/3] Apply suggestions from code review

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
---
 src/panels/lovelace/cards/hui-tile-card.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 5d5d069a3bf6..b3470aeed569 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -387,8 +387,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             hasHold: hasAction(this._config!.hold_action),
             hasDoubleClick: hasAction(this._config!.double_tap_action),
           })}
-          role=${this.hasCardAction ? "button" : ""}
-          tabindex=${this.hasCardAction ? "0" : undefined}
+          role=${ifDefined(this.hasCardAction ? "button" : undefined)}
+          tabindex=${ifDefined(this.hasCardAction ? "0" : undefined)}
           aria-labelledby="info"
           @mousedown=${this.handleRippleActivate}
           @mouseup=${this.handleRippleDeactivate}
@@ -405,8 +405,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         <div class="content ${classMap(contentClasses)}">
           <div
             class="icon-container"
-            role=${this.hasIconAction ? "button" : ""}
-            tabindex=${this.hasIconAction ? "0" : undefined}
+            role=${ifDefined(this.hasIconAction ? "button" : undefined)}
+            tabindex=${ifDefined(this.hasIconAction ? "0" : undefined)}
             @action=${this._handleIconAction}
             .actionHandler=${actionHandler()}
           >