jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +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({
"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"