Improve A11y

package.json

@@ -137,6 +137,7 @@
     "vue": "^2.7.14",
     "vue2-daterange-picker": "^0.6.8",
     "weekstart": "^1.1.0",
+    "wicg-inert": "^3.1.2",
     "workbox-cacheable-response": "^6.5.4",
     "workbox-core": "^6.5.4",
     "workbox-expiration": "^6.5.4",

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -14,9 +14,10 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
+import "wicg-inert";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/search-input";
 import "../../../../components/ha-circular-progress";
+import "../../../../components/search-input";
 import { isUnavailableState } from "../../../../data/entity";
 import type {
   LovelaceCardConfig,
@@ -114,12 +115,14 @@ export class HuiCardPicker extends LitElement {
       >
         <div class="cards-container">
           ${this._filterCards(this._cards, this._filter).map(
-            (cardElement: CardElement) => cardElement.element
+            (cardElement: CardElement) =>
+              html`<div>${cardElement.element}</div>`
           )}
         </div>
         <div class="cards-container">
-          <div
+          <button
             class="card manual"
+            type="button"
             @click=${this._cardPicked}
             .config=${{ type: "" }}
           >
@@ -133,7 +136,7 @@ export class HuiCardPicker extends LitElement {
                 `ui.panel.lovelace.editor.card.generic.manual_description`
               )}
             </div>
-          </div>
+          </button>
         </div>
       </div>
     `;
@@ -299,24 +302,27 @@ export class HuiCardPicker extends LitElement {
       }
     }
 
+    const cardName = customCard
+      ? `${this.hass!.localize(
+          "ui.panel.lovelace.editor.cardpicker.custom_card"
+        )}: ${customCard.name || customCard.type}`
+      : name;
+
     return html`
-      <div class="card">
+      <button
-        <div
+        class="card"
-          class="overlay"
+        type="button"
-          @click=${this._cardPicked}
+        @click=${this._cardPicked}
-          .config=${cardConfig}
+        .config=${cardConfig}
-        ></div>
+        .title=${cardName}
-        <div class="card-header">
+      >
-          ${customCard
+        <div class="card-header">${cardName}</div>
-            ? `${this.hass!.localize(
-                "ui.panel.lovelace.editor.cardpicker.custom_card"
-              )}: ${customCard.name || customCard.type}`
-            : name}
-        </div>
         <div
           class="preview ${classMap({
             description: !element || element.tagName === "HUI-ERROR-CARD",
           })}"
+          inert
+          aria-hidden="true"
         >
           ${element && element.tagName !== "HUI-ERROR-CARD"
             ? element
@@ -327,7 +333,7 @@ export class HuiCardPicker extends LitElement {
               )
             : description}
         </div>
-      </div>
+      </button>
     `;
   }
 
@@ -345,17 +351,26 @@ export class HuiCardPicker extends LitElement {
           grid-gap: 8px 8px;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           margin-top: 20px;
+          list-style-type: none;
+          padding: 0;
         }
 
         .card {
-          height: 100%;
-          max-width: 500px;
           display: flex;
           flex-direction: column;
+          align-items: inherit;
+          justify-content: center;
+          padding: 0;
+          height: 100%;
+          width: 100%;
+          max-width: 500px;
           border-radius: var(--ha-card-border-radius, 12px);
           background: var(--primary-background-color, #fafafa);
           cursor: pointer;
           position: relative;
+          border: var(--ha-card-border-width, 1px) solid
+            var(--ha-card-border-color, var(--divider-color));
+          overflow: hidden;
         }
 
         .card-header {
@@ -405,8 +420,10 @@ export class HuiCardPicker extends LitElement {
           height: 100%;
           z-index: 1;
           box-sizing: border-box;
-          border: var(--ha-card-border-width, 1px) solid
+          background: none;
-            var(--ha-card-border-color, var(--divider-color));
+          cursor: pointer;
+          padding: 0;
+          border: none;
           border-radius: var(--ha-card-border-radius, 12px);
         }
 

yarn.lock

@@ -9715,6 +9715,7 @@ fsevents@^1.2.7:
     webpack-manifest-plugin: ^5.0.0
     webpackbar: ^5.0.2
     weekstart: ^1.1.0
+    wicg-inert: ^3.1.2
     workbox-build: ^6.5.4
     workbox-cacheable-response: ^6.5.4
     workbox-core: ^6.5.4
@@ -16567,10 +16568,10 @@ typescript@^3.8.3:
   languageName: node
   linkType: hard
 
-"wicg-inert@npm:^3.0.0":
+"wicg-inert@npm:^3.0.0, wicg-inert@npm:^3.1.2":
-  version: 3.0.0
+  version: 3.1.2
-  resolution: "wicg-inert@npm:3.0.0"
+  resolution: "wicg-inert@npm:3.1.2"
-  checksum: 2f8fdc3140d8937fa01d89901b9a3bfb6d342a63bafb63d3e6ca2da59d4521803abca7d5890b56b20f1a16afe0584c775989f2034a83b1912716dfa8b3e7623e
+  checksum: 538c5cb7f240915a4c17741c644b135040764c6d8a05853099f2f342c95ce2645e6cf7c4f729775013dbc218e0da04b3f943875eba6ed4b38ff9dd431465d391
   languageName: node
   linkType: hard