jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add aria roles to data table (#6702)

Browse Source
This commit is contained in:
Bram Kragten 2020-08-26 00:38:02 +02:00 committed by GitHub
parent a40eb1ff43
commit 9b7d17433c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/data-table/ha-data-table.ts
View File

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