From 97931a37c25ef5d392ce9317f582d498f821c607 Mon Sep 17 00:00:00 2001
From: Antonio Pacheco <antonio_pacheco@outlook.com>
Date: Mon, 24 Jun 2024 15:26:35 -0700
Subject: [PATCH] fix(data-tables): accessibility for row enter

rows should be focusable, and should handle enter

fix #21028
---
 src/components/data-table/ha-data-table.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index f40c4a9046de..8da8a26dc0b4 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -423,9 +423,11 @@ export class HaDataTable extends LitElement {
     return html`
       <div
         aria-rowindex=${index + 2}
+        tabindex="0"
         role="row"
         .rowId=${row[this.id]}
         @click=${this._handleRowClick}
+        @keydown=${this._handleRowKeyDown}
         class="mdc-data-table__row ${classMap({
           "mdc-data-table__row--selected": this._checkedRows.includes(
             String(row[this.id])
@@ -661,6 +663,13 @@ export class HaDataTable extends LitElement {
     this._checkedRowsChanged();
   };
 
+  private _handleRowKeyDown = (ev: KeyboardEvent) => {
+    // Handle pressing enter.
+    if (ev.key === "Enter") {
+      this._handleRowClick(ev);
+    }
+  };
+
   private _handleRowClick = (ev: Event) => {
     if (
       ev