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

src/components/data-table/ha-data-table.ts

@@ -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({

src/panels/config/automation/ha-automation-picker.ts

@@ -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

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -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

src/panels/config/entities/ha-config-entities.ts

@@ -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

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

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) =>

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` <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

src/panels/config/script/ha-script-picker.ts

@@ -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}">

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`<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}

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,

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`
           <state-badge

src/translations/en.json

@@ -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",