Add aria-label to table headers with no title (#11503)

This commit is contained in:
Patrick ZAJDA 2022-02-09 19:10:41 +01:00 committed by GitHub
parent 4db943c5ff
commit d37d99223d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 75 additions and 6 deletions

View File

@ -70,6 +70,7 @@ export interface DataTableSortColumnData {
export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
title: TemplateResult | string;
label?: TemplateResult | string;
type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
template?: (data: any, row: T) => TemplateResult | string;
width?: string;
@ -294,6 +295,7 @@ export class HaDataTable extends LitElement {
};
return html`
<div
aria-label=${column.label}
class="mdc-data-table__header-cell ${classMap(classes)}"
style=${column.width
? styleMap({

View File

@ -81,6 +81,9 @@ class HaAutomationPicker extends LitElement {
const columns: DataTableColumnContainer = {
toggle: {
title: "",
label: this.hass.localize(
"ui.panel.config.automation.picker.headers.toggle"
),
type: "icon",
template: (_toggle, automation: any) =>
html`
@ -127,6 +130,9 @@ class HaAutomationPicker extends LitElement {
`,
};
columns.trigger = {
label: this.hass.localize(
"ui.panel.config.automation.picker.headers.trigger"
),
title: html`
<mwc-button style="visibility: hidden">
${this.hass.localize("ui.card.automation.trigger")}
@ -146,6 +152,9 @@ class HaAutomationPicker extends LitElement {
}
columns.actions = {
title: "",
label: this.hass.localize(
"ui.panel.config.automation.picker.headers.actions"
),
type: "overflow-menu",
template: (_info, automation: any) => html`
<ha-icon-overflow-menu

View File

@ -326,6 +326,9 @@ export class HaConfigDeviceDashboard extends LitElement {
if (showDisabled) {
columns.disabled_by = {
title: "",
label: this.hass.localize(
"ui.panel.config.devices.data_table.disabled_by"
),
type: "icon",
template: (disabled_by) =>
disabled_by

View File

@ -168,6 +168,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
(narrow, _language, showDisabled): DataTableColumnContainer<EntityRow> => ({
icon: {
title: "",
label: this.hass.localize(
"ui.panel.config.entities.picker.headers.state_icon"
),
type: "icon",
template: (_, entry: EntityRow) => html`
<ha-state-icon

View File

@ -41,6 +41,9 @@ export class HaConfigHelpers extends LitElement {
const columns: DataTableColumnContainer = {
icon: {
title: "",
label: this.hass.localize(
"ui.panel.config.helpers.picker.headers.icon"
),
type: "icon",
template: (icon, helper: any) =>
icon
@ -88,6 +91,9 @@ export class HaConfigHelpers extends LitElement {
};
columns.editable = {
title: "",
label: this.hass.localize(
"ui.panel.config.helpers.picker.headers.editable"
),
type: "icon",
template: (editable) => html`
${!editable

View File

@ -53,6 +53,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
const columns: DataTableColumnContainer = {
icon: {
title: "",
label: this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.headers.icon"
),
type: "icon",
template: (icon, dashboard) =>
icon
@ -161,6 +164,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
columns.url_path = {
title: "",
label: this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.headers.url"
),
filterable: true,
width: "100px",
template: (urlPath) =>

View File

@ -67,6 +67,9 @@ class HaSceneDashboard extends LitElement {
(_language): DataTableColumnContainer => ({
activate: {
title: "",
label: this.hass.localize(
"ui.panel.config.scene.picker.headers.activate"
),
type: "icon-button",
template: (_toggle, scene) =>
html`
@ -82,6 +85,7 @@ class HaSceneDashboard extends LitElement {
},
icon: {
title: "",
label: this.hass.localize("ui.panel.config.scene.picker.headers.state"),
type: "icon",
template: (_, scene) =>
html` <ha-state-icon .state=${scene}></ha-state-icon> `,
@ -95,6 +99,9 @@ class HaSceneDashboard extends LitElement {
},
info: {
title: "",
label: this.hass.localize(
"ui.panel.config.scene.picker.headers.show_info"
),
type: "icon-button",
template: (_info, scene) => html`
<ha-icon-button
@ -109,6 +116,7 @@ class HaSceneDashboard extends LitElement {
},
edit: {
title: "",
label: this.hass.localize("ui.panel.config.scene.picker.headers.edit"),
type: "icon-button",
template: (_info, scene: any) => html`
<a

View File

@ -69,6 +69,7 @@ class HaScriptPicker extends LitElement {
const columns: DataTableColumnContainer = {
activate: {
title: "",
label: this.hass.localize("ui.panel.config.script.picker.run_script"),
type: "icon-button",
template: (_toggle, script) =>
html`
@ -84,6 +85,9 @@ class HaScriptPicker extends LitElement {
},
icon: {
title: "",
label: this.hass.localize(
"ui.panel.config.script.picker.headers.state"
),
type: "icon",
template: (_icon, script) =>
html` <ha-state-icon .state=${script}></ha-state-icon>`,
@ -124,6 +128,7 @@ class HaScriptPicker extends LitElement {
}
columns.info = {
title: "",
label: this.hass.localize("ui.panel.config.script.picker.show_info"),
type: "icon-button",
template: (_info, script) => html`
<ha-icon-button
@ -138,6 +143,7 @@ class HaScriptPicker extends LitElement {
};
columns.trace = {
title: "",
label: this.hass.localize("ui.panel.config.script.picker.dev_script"),
type: "icon-button",
template: (_info, script: any) => html`
<a href="/config/script/trace/${script.entity_id}">
@ -152,6 +158,7 @@ class HaScriptPicker extends LitElement {
};
columns.edit = {
title: "",
label: this.hass.localize("ui.panel.config.script.picker.edit_script"),
type: "icon-button",
template: (_info, script: any) => html`
<a href="/config/script/edit/${script.entity_id}">

View File

@ -61,6 +61,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
const columns: DataTableColumnContainer = {
icon: {
title: "",
label: this.hass.localize("ui.panel.config.tag.headers.icon"),
type: "icon",
template: (_icon, tag) => html`<tag-image .tag=${tag}></tag-image>`,
},
@ -103,6 +104,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
if (this._canWriteTags) {
columns.write = {
title: "",
label: this.hass.localize("ui.panel.config.tag.headers.write"),
type: "icon-button",
template: (_write, tag: any) => html` <ha-icon-button
.tag=${tag}

View File

@ -120,6 +120,9 @@ export class HaConfigUsers extends LitElement {
},
icons: {
title: "",
label: this.hass.localize(
"ui.panel.config.users.picker.headers.icon"
),
type: "icon",
sortable: false,
filterable: false,

View File

@ -50,6 +50,9 @@ export class HuiEntityPickerTable extends LitElement {
const columns: DataTableColumnContainer = {
icon: {
title: "",
label: this.hass!.localize(
"ui.panel.lovelace.unused_entities.state_icon"
),
type: "icon",
template: (_icon, entity: any) => html`
<state-badge

View File

@ -1073,8 +1073,10 @@
"confirm_remove": "Are you sure you want to remove tag {tag}?",
"automation_title": "Tag {name} is scanned",
"headers": {
"icon": "Icon",
"name": "Name",
"last_scanned": "Last scanned"
"last_scanned": "Last scanned",
"write": "Write"
},
"detail": {
"new_tag": "New tag",
@ -1272,6 +1274,7 @@
},
"picker": {
"headers": {
"icon": "Icon",
"name": "Name",
"entity_id": "Entity ID",
"type": "Type",
@ -1378,12 +1381,14 @@
},
"picker": {
"headers": {
"icon": "Icon",
"title": "Title",
"conf_mode": "Configuration method",
"default": "Default",
"require_admin": "Admin only",
"sidebar": "Show in sidebar",
"filename": "Filename"
"filename": "Filename",
"url": "Open"
},
"open": "Open",
"add_dashboard": "Add dashboard"
@ -1523,7 +1528,10 @@
"duplicate_automation": "Duplicate automation",
"duplicate": "Duplicate",
"headers": {
"name": "Name"
"toggle": "Enable/disable",
"name": "Name",
"trigger": "Trigger",
"actions": "Actions"
}
},
"dialog_new": {
@ -1932,7 +1940,8 @@
"edit_script": "Edit script",
"dev_script": "Debug script",
"headers": {
"name": "Name"
"name": "Name",
"state": "State"
},
"duplicate_script": "Duplicate script",
"duplicate": "[%key:ui::panel::config::automation::picker::duplicate%]"
@ -1988,7 +1997,11 @@
"duplicate_scene": "Duplicate scene",
"duplicate": "Duplicate",
"headers": {
"name": "Name"
"activate": "Activate",
"state": "State",
"name": "Name",
"show_info": "Show information",
"edit": "Edit"
}
},
"editor": {
@ -2303,6 +2316,7 @@
"area": "Area",
"integration": "Integration",
"battery": "Battery",
"disabled_by": "Disabled",
"no_devices": "No devices",
"no_integration": "No integration"
},
@ -2342,6 +2356,7 @@
"ok": "Ok"
},
"headers": {
"state_icon": "State icon",
"name": "Name",
"entity_id": "Entity ID",
"integration": "Integration",
@ -2567,7 +2582,8 @@
"group": "Group",
"system": "System",
"is_active": "Active",
"local": "Local"
"local": "Local",
"icon": "Icon"
},
"add_user": "Add user"
},
@ -3196,6 +3212,7 @@
"title": "Unused entities",
"available_entities": "These are the entities that you have available, but are not in your Lovelace UI yet.",
"select_to_add": "Select the entities you want to add to a card and then click the add card button.",
"state_icon": "State",
"entity": "Entity",
"entity_id": "Entity ID",
"domain": "Domain",