From 61478b7806247214275647afb4b8bb2536bc6855 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Mon, 31 Jan 2022 10:40:55 +0100 Subject: [PATCH 01/15] Add aria-label property to ha-data-table --- src/components/data-table/ha-data-table.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index b2d669105bd0..47dbfa371fa8 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -70,6 +70,7 @@ export interface DataTableSortColumnData { export interface DataTableColumnData extends DataTableSortColumnData { title: TemplateResult | string; + ariaLabel: TemplateResult | string; type?: "numeric" | "icon" | "icon-button" | "overflow-menu"; template?: (data: any, row: T) => TemplateResult | string; width?: string; @@ -321,7 +322,7 @@ export class HaDataTable extends LitElement { > ` : ""} - ${column.title} + ${column.title} `; })} From 80505f9b0dd19bd7f0b83b0a53bb7a54ba37cb77 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Mon, 31 Jan 2022 10:52:03 +0100 Subject: [PATCH 02/15] Entities list: Add aria-label to icon column header --- src/panels/config/entities/ha-config-entities.ts | 3 +++ src/translations/en.json | 1 + 2 files changed, 4 insertions(+) diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 47271028c851..fa6ee435317f 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -168,6 +168,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { (narrow, _language, showDisabled): DataTableColumnContainer => ({ icon: { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.entities.picker.headers.icon" + ), type: "icon", template: (_, entry: EntityRow) => html` Date: Mon, 31 Jan 2022 11:56:12 +0100 Subject: [PATCH 03/15] Add aria-label to disabled by column of devices list Signed-off-by: Patrick ZAJDA --- src/panels/config/devices/ha-config-devices-dashboard.ts | 3 +++ src/translations/en.json | 1 + 2 files changed, 4 insertions(+) diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index e195c09825f4..e016054f4399 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -326,6 +326,9 @@ export class HaConfigDeviceDashboard extends LitElement { if (showDisabled) { columns.disabled_by = { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.devices.data_table.disabled_by" + ), type: "icon", template: (disabled_by) => disabled_by diff --git a/src/translations/en.json b/src/translations/en.json index 70b21ef7146a..53a7e148295d 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2298,6 +2298,7 @@ "area": "Area", "integration": "Integration", "battery": "Battery", + "disabled_by": "Disabled", "no_devices": "No devices", "no_integration": "No integration" }, From a6b1edb05e61534f81d422e73a556b4301e0f616 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Mon, 31 Jan 2022 15:26:10 +0100 Subject: [PATCH 04/15] Add aria-labels for script columns Signed-off-by: Patrick ZAJDA --- src/panels/config/script/ha-script-picker.ts | 11 +++++++++++ src/translations/en.json | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index e96b5edfb298..a4e3fe5dd06c 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -69,6 +69,9 @@ class HaScriptPicker extends LitElement { const columns: DataTableColumnContainer = { activate: { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.script.picker.run_script" + ), type: "icon-button", template: (_toggle, script) => html` @@ -84,6 +87,9 @@ class HaScriptPicker extends LitElement { }, icon: { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.script.picker.headers.state" + ), type: "icon", template: (_icon, script) => html` `, @@ -124,6 +130,7 @@ class HaScriptPicker extends LitElement { } columns.info = { title: "", + ariaLabel: this.hass.localize("ui.panel.config.script.picker.show_info"), type: "icon-button", template: (_info, script) => html` html` @@ -152,6 +160,9 @@ class HaScriptPicker extends LitElement { }; columns.edit = { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.script.picker.edit_script" + ), type: "icon-button", template: (_info, script: any) => html` diff --git a/src/translations/en.json b/src/translations/en.json index 53a7e148295d..189d27c192c7 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1928,7 +1928,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%]" From 8a77970808933f59285bfb07ee1dfd69c8ff5b13 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Tue, 1 Feb 2022 11:09:26 +0100 Subject: [PATCH 05/15] Make ariaLabel optional Signed-off-by: Patrick ZAJDA --- src/components/data-table/ha-data-table.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 47dbfa371fa8..0c6f6eeb3b81 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -70,7 +70,7 @@ export interface DataTableSortColumnData { export interface DataTableColumnData extends DataTableSortColumnData { title: TemplateResult | string; - ariaLabel: TemplateResult | string; + ariaLabel?: TemplateResult | string; type?: "numeric" | "icon" | "icon-button" | "overflow-menu"; template?: (data: any, row: T) => TemplateResult | string; width?: string; From cc13ed0d938f29941407f6797799edc7c99afde9 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Tue, 1 Feb 2022 14:55:50 +0100 Subject: [PATCH 06/15] Better label for entity state icon Signed-off-by: Patrick ZAJDA --- src/panels/config/entities/ha-config-entities.ts | 2 +- src/translations/en.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index bafce6219aff..c0b0ed8a9762 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -169,7 +169,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { icon: { title: "", ariaLabel: this.hass.localize( - "ui.panel.config.entities.picker.headers.icon" + "ui.panel.config.entities.picker.headers.state_icon" ), type: "icon", template: (_, entry: EntityRow) => html` diff --git a/src/translations/en.json b/src/translations/en.json index f4da16504c05..348daff46e65 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2339,7 +2339,7 @@ "ok": "Ok" }, "headers": { - "icon": "Icon", + "state_icon": "State icon", "name": "Name", "entity_id": "Entity ID", "integration": "Integration", From 97257b49a04ab99cc1e7c184e7609f0a3f804c31 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Tue, 1 Feb 2022 15:25:36 +0100 Subject: [PATCH 07/15] Add aria-labels for automations dashboard Signed-off-by: Patrick ZAJDA --- src/panels/config/automation/ha-automation-picker.ts | 9 +++++++++ src/translations/en.json | 5 ++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index cf06bc92eae9..26377cd0f5db 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -81,6 +81,9 @@ class HaAutomationPicker extends LitElement { const columns: DataTableColumnContainer = { toggle: { title: "", + ariaLabel: 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 = { + ariaLabel: this.hass.localize( + "ui.panel.config.automation.picker.headers.trigger" + ), title: html` ${this.hass.localize("ui.card.automation.trigger")} @@ -146,6 +152,9 @@ class HaAutomationPicker extends LitElement { } columns.actions = { title: "", + ariaLabel: this.hass.localize( + "ui.panel.config.automation.picker.headers.actions" + ), type: "overflow-menu", template: (_info, automation: any) => html` Date: Tue, 1 Feb 2022 17:19:50 +0100 Subject: [PATCH 08/15] Move ariaLabel to parent div instead of span Signed-off-by: Patrick ZAJDA --- src/components/data-table/ha-data-table.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 0c6f6eeb3b81..ddee07484c00 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -295,6 +295,7 @@ export class HaDataTable extends LitElement { }; return html`
` : ""} - ${column.title} + ${column.title}
`; })} From 80de037affce7e4c55a0b6bbae8849d358391fa4 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Tue, 1 Feb 2022 18:24:27 +0100 Subject: [PATCH 09/15] Replace ariaLabel by label Signed-off-by: Patrick ZAJDA --- src/components/data-table/ha-data-table.ts | 4 ++-- .../config/automation/ha-automation-picker.ts | 6 +++--- .../config/devices/ha-config-devices-dashboard.ts | 2 +- src/panels/config/entities/ha-config-entities.ts | 2 +- src/panels/config/script/ha-script-picker.ts | 14 +++++--------- 5 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index ddee07484c00..eda5aefd3f97 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -70,7 +70,7 @@ export interface DataTableSortColumnData { export interface DataTableColumnData extends DataTableSortColumnData { title: TemplateResult | string; - ariaLabel?: TemplateResult | string; + label?: TemplateResult | string; type?: "numeric" | "icon" | "icon-button" | "overflow-menu"; template?: (data: any, row: T) => TemplateResult | string; width?: string; @@ -295,7 +295,7 @@ export class HaDataTable extends LitElement { }; return html`
=> ({ icon: { title: "", - ariaLabel: this.hass.localize( + label: this.hass.localize( "ui.panel.config.entities.picker.headers.state_icon" ), type: "icon", diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index a4e3fe5dd06c..25a31fef6a31 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -69,9 +69,7 @@ class HaScriptPicker extends LitElement { const columns: DataTableColumnContainer = { activate: { title: "", - ariaLabel: this.hass.localize( - "ui.panel.config.script.picker.run_script" - ), + label: this.hass.localize("ui.panel.config.script.picker.run_script"), type: "icon-button", template: (_toggle, script) => html` @@ -87,7 +85,7 @@ class HaScriptPicker extends LitElement { }, icon: { title: "", - ariaLabel: this.hass.localize( + label: this.hass.localize( "ui.panel.config.script.picker.headers.state" ), type: "icon", @@ -130,7 +128,7 @@ class HaScriptPicker extends LitElement { } columns.info = { title: "", - ariaLabel: this.hass.localize("ui.panel.config.script.picker.show_info"), + label: this.hass.localize("ui.panel.config.script.picker.show_info"), type: "icon-button", template: (_info, script) => html` html` @@ -160,9 +158,7 @@ class HaScriptPicker extends LitElement { }; columns.edit = { title: "", - ariaLabel: this.hass.localize( - "ui.panel.config.script.picker.edit_script" - ), + label: this.hass.localize("ui.panel.config.script.picker.edit_script"), type: "icon-button", template: (_info, script: any) => html` From f0238ac73f2d79cb35263a3de6c55acc61581032 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Wed, 2 Feb 2022 16:29:08 +0100 Subject: [PATCH 10/15] Add ARIA labels in users configuration Signed-off-by: Patrick ZAJDA --- src/panels/config/users/ha-config-users.ts | 3 +++ src/translations/en.json | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index 57faf9a2e604..d93a01748b2c 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -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, diff --git a/src/translations/en.json b/src/translations/en.json index 0a74694905c3..75d664156f83 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2568,7 +2568,8 @@ "group": "Group", "system": "System", "is_active": "Active", - "local": "Local" + "local": "Local", + "icon": "Icon" }, "add_user": "Add user" }, From 310f35a354bc290d056f8cf31520e923fd50b31a Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Wed, 2 Feb 2022 16:41:33 +0100 Subject: [PATCH 11/15] Add aria-label for tags Signed-off-by: Patrick ZAJDA --- src/panels/config/tags/ha-config-tags.ts | 2 ++ src/translations/en.json | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts index 6b53cac199e0..26a0c6f1e81c 100644 --- a/src/panels/config/tags/ha-config-tags.ts +++ b/src/panels/config/tags/ha-config-tags.ts @@ -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``, }, @@ -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` Date: Wed, 9 Feb 2022 17:50:54 +0100 Subject: [PATCH 12/15] Add aria-label for input helpers configuration Signed-off-by: Patrick ZAJDA --- src/panels/config/helpers/ha-config-helpers.ts | 6 ++++++ src/translations/en.json | 1 + 2 files changed, 7 insertions(+) diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 3a54f1de0a07..0f96aecdc65c 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -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 diff --git a/src/translations/en.json b/src/translations/en.json index ee265e4827c3..95cf8441fc65 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1272,6 +1272,7 @@ }, "picker": { "headers": { + "icon": "Icon", "name": "Name", "entity_id": "Entity ID", "type": "Type", From 304c9b4ba3fe4cc4851fafa8537dbc8057b1d4ba Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Wed, 9 Feb 2022 18:24:39 +0100 Subject: [PATCH 13/15] Add aria-label on Lovelace dashboards configuration Signed-off-by: Patrick ZAJDA --- .../lovelace/dashboards/ha-config-lovelace-dashboards.ts | 6 ++++++ src/translations/en.json | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 4ac61b267b7b..59c787b91cee 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -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) => diff --git a/src/translations/en.json b/src/translations/en.json index 95cf8441fc65..e66966f5d199 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1377,12 +1377,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" From b2f8bdd2c035e5ea31e025c3b533a0c07c26f378 Mon Sep 17 00:00:00 2001 From: Patrick ZAJDA Date: Wed, 9 Feb 2022 18:42:57 +0100 Subject: [PATCH 14/15] Add aria-label on scenes configuration Signed-off-by: Patrick ZAJDA --- src/panels/config/scene/ha-scene-dashboard.ts | 8 ++++++++ src/translations/en.json | 6 +++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 53310c5e8ce7..07ca40e110cd 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -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` `, @@ -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` html` Date: Wed, 9 Feb 2022 18:58:22 +0100 Subject: [PATCH 15/15] Add aria-label for unused entities Signed-off-by: Patrick ZAJDA --- .../lovelace/editor/card-editor/hui-entity-picker-table.ts | 3 +++ src/translations/en.json | 1 + 2 files changed, 4 insertions(+) diff --git a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts index b08cdbc53904..fde9ed21735f 100644 --- a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts +++ b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts @@ -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`