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">
           <button
             class="card manual"
+            type="button"
             @click=${this._cardPicked}
             .config=${{ type: "" }}
           >
@@ -306,20 +309,20 @@ export class HuiCardPicker extends LitElement {
       : name;
 
     return html`
-      <div class="card">
-        <button
-          class="overlay"
-          type="button"
-          @click=${this._cardPicked}
-          .config=${cardConfig}
-          .title=${cardName}
-        ></button>
+      <button
+        class="card"
+        type="button"
+        @click=${this._cardPicked}
+        .config=${cardConfig}
+        .title=${cardName}
+      >
         <div class="card-header">${cardName}</div>
         <div
           class="preview ${classMap({
             description: !element || element.tagName === "HUI-ERROR-CARD",
           })}"
           inert
+          aria-hidden="true"
         >
           ${element && element.tagName !== "HUI-ERROR-CARD"
             ? element
@@ -330,7 +333,7 @@ export class HuiCardPicker extends LitElement {
               )
             : description}
         </div>
-      </div>
+      </button>
     `;
   }
 
@@ -348,13 +351,19 @@ 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;
@@ -420,10 +429,6 @@ export class HuiCardPicker extends LitElement {
 
         .manual {
           max-width: none;
-          display: flex;
-          align-items: inherit;
-          justify-content: center;
-          padding: 0;
         }
       `,
     ];

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":
-  version: 3.0.0
-  resolution: "wicg-inert@npm:3.0.0"
-  checksum: 2f8fdc3140d8937fa01d89901b9a3bfb6d342a63bafb63d3e6ca2da59d4521803abca7d5890b56b20f1a16afe0584c775989f2034a83b1912716dfa8b3e7623e
+"wicg-inert@npm:^3.0.0, wicg-inert@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "wicg-inert@npm:3.1.2"
+  checksum: 538c5cb7f240915a4c17741c644b135040764c6d8a05853099f2f342c95ce2645e6cf7c4f729775013dbc218e0da04b3f943875eba6ed4b38ff9dd431465d391
   languageName: node
   linkType: hard