Add container list and ARIA to create helper listbox (#12885)

src/panels/config/helpers/dialog-helper-detail.ts

@@ -133,6 +133,15 @@ export class DialogHelperDetail extends LitElement {
       items.sort((a, b) => a[1].localeCompare(b[1]));
 
       content = html`
+        <mwc-list
+          innerRole="listbox"
+          itemRoles="option"
+          innerAriaLabel=${this.hass.localize(
+            "ui.panel.config.helpers.dialog.create_helper"
+          )}
+          rootTabbable
+          dialogInitialFocus
+        >
           ${items.map(([domain, label]) => {
             // Only OG helpers need to be loaded prior adding one
             const isLoaded =
@@ -141,9 +150,7 @@ export class DialogHelperDetail extends LitElement {
               <mwc-list-item
                 .disabled=${!isLoaded}
                 .domain=${domain}
-              @click=${this._domainPicked}
-              @keydown=${this._handleEnter}
-              dialogInitialFocus
+                @request-selected=${this._domainPicked}
                 graphic="icon"
               >
                 <img
@@ -155,6 +162,7 @@ export class DialogHelperDetail extends LitElement {
                     useFallback: true,
                     darkOptimized: this.hass.themes?.darkMode,
                   })}
+                  aria-hidden="true"
                   referrerpolicy="no-referrer"
                 />
                 <span class="item-text"> ${label} </span>
@@ -172,6 +180,7 @@ export class DialogHelperDetail extends LitElement {
                 : ""}
             `;
           })}
+        </mwc-list>
         <mwc-button slot="primaryAction" @click=${this.closeDialog}>
           ${this.hass!.localize("ui.common.cancel")}
         </mwc-button>
@@ -220,15 +229,6 @@ export class DialogHelperDetail extends LitElement {
     }
   }
 
-  private _handleEnter(ev: KeyboardEvent) {
-    if (ev.keyCode !== 13) {
-      return;
-    }
-    ev.stopPropagation();
-    ev.preventDefault();
-    this._domainPicked(ev);
-  }
-
   private _domainPicked(ev: Event): void {
     const domain = (ev.currentTarget! as any).domain;