From 9b7d17433c7850696e7ffe27ea8e0065e0c1a8a7 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 26 Aug 2020 00:38:02 +0200
Subject: [PATCH] Add aria roles to data table (#6702)

---
 src/components/data-table/ha-data-table.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 69c30633b6..af549b942f 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -214,13 +214,15 @@ export class HaDataTable extends LitElement {
           class="mdc-data-table__table ${classMap({
             "auto-height": this.autoHeight,
           })}"
+          role="table"
+          aria-rowcount=${this._filteredData.length}
           style=${styleMap({
             height: this.autoHeight
               ? `${(this._filteredData.length || 1) * 53 + 57}px`
               : `calc(100% - ${this._header?.clientHeight}px)`,
           })}
         >
-          <div class="mdc-data-table__header-row">
+          <div class="mdc-data-table__header-row" role="row">
             ${this.selectable
               ? html`
                   <div
@@ -288,8 +290,8 @@ export class HaDataTable extends LitElement {
           ${!this._filteredData.length
             ? html`
                 <div class="mdc-data-table__content">
-                  <div class="mdc-data-table__row">
-                    <div class="mdc-data-table__cell grows center">
+                  <div class="mdc-data-table__row" role="row">
+                    <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText || "No data"}
                     </div>
                   </div>
@@ -304,12 +306,14 @@ export class HaDataTable extends LitElement {
                     items: !this.hasFab
                       ? this._filteredData
                       : [...this._filteredData, ...[{ empty: true }]],
-                    renderItem: (row: DataTableRowData) => {
+                    renderItem: (row: DataTableRowData, index) => {
                       if (row.empty) {
                         return html` <div class="mdc-data-table__row"></div> `;
                       }
                       return html`
                         <div
+                          aria-rowindex=${index}
+                          role="row"
                           .rowId="${row[this.id]}"
                           @click=${this._handleRowClick}
                           class="mdc-data-table__row ${classMap({
@@ -328,6 +332,7 @@ export class HaDataTable extends LitElement {
                             ? html`
                                 <div
                                   class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                                  role="cell"
                                 >
                                   <ha-checkbox
                                     class="mdc-data-table__row-checkbox"
@@ -345,6 +350,7 @@ export class HaDataTable extends LitElement {
                             const [key, column] = columnEntry;
                             return html`
                               <div
+                                role="cell"
                                 class="mdc-data-table__cell ${classMap({
                                   "mdc-data-table__cell--numeric": Boolean(
                                     column.type === "numeric"