Disable pointer-events for tile-card .icon-container class that don't have a "button" role (#19497)

Set pointer-events to none for icon containers that don't have button role

gallery/src/pages/lovelace/tile-card.ts

@@ -79,6 +79,18 @@ const CONFIGS = [
   color: pink
     `,
   },
+  {
+    heading: "Whole tile tap action",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  color: pink
+  tap_action:
+    action: toggle
+  icon_tap_action:
+    action: none
+    `,
+  },
   {
     heading: "Unknown entity",
     config: `

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

@@ -525,6 +525,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         top: -3px;
         right: -3px;
       }
+      .icon-container:not([role="button"]) {
+        pointer-events: none;
+      }
       .icon-container[role="button"]:focus-visible,
       .icon-container[role="button"]:active {
         transform: scale(1.2);