Add more aria labels (#4293)

* Add aria labels

* Fix polymer binding

src/dialogs/more-info/more-info-controls.js

@@ -16,13 +16,14 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
 import { EventsMixin } from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 
 const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
 /*
  * @appliesMixin EventsMixin
  */
-class MoreInfoControls extends EventsMixin(PolymerElement) {
+class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
       <style include="ha-style-dialog">
@@ -68,7 +69,7 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
 
       <app-toolbar>
         <paper-icon-button
-          aria-label="Dismiss dialog"
+          aria-label$="[[localize('ui.dialogs.more_info_control.dismiss')]]"
           icon="hass:close"
           dialog-dismiss
         ></paper-icon-button>
@@ -77,6 +78,7 @@ class MoreInfoControls extends EventsMixin(PolymerElement) {
         </div>
         <template is="dom-if" if="[[canConfigure]]">
           <paper-icon-button
+            aria-label$="[[localize('ui.dialogs.more_info_control.settings')]]"
             icon="hass:settings"
             on-click="_gotoSettings"
           ></paper-icon-button>

src/dialogs/more-info/more-info-settings.js

@@ -47,6 +47,7 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <app-toolbar>
         <ha-paper-icon-button-arrow-prev
+          aria-label$="[[localize('ui.dialogs.more_info_settings.back')]]"
           on-click="_backTapped"
         ></ha-paper-icon-button-arrow-prev>
         <div main-title="">[[_computeStateName(stateObj)]]</div>

src/dialogs/notifications/notification-drawer.js

@@ -49,10 +49,10 @@ export class HuiNotificationDrawer extends EventsMixin(
         text-align: center;
       }
     </style>
-    <app-drawer id='drawer' opened="{{open}}" disable-swipe align="start">
+    <app-drawer id="drawer" opened="{{open}}" disable-swipe align="start">
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <ha-paper-icon-button-prev on-click="_closeDrawer"></paper-icon-button>
+        <ha-paper-icon-button-prev on-click="_closeDrawer" aria-label$="[[localize('ui.notification_drawer.close')]]"></paper-icon-button>
       </app-toolbar>
       <div class="notifications">
         <template is="dom-if" if="[[!_empty(notifications)]]">

src/panels/config/integrations/ha-config-entries-dashboard.ts

@@ -133,7 +133,11 @@ export class HaConfigManagerDashboard extends LitElement {
                             )}
                           </div>
                         </paper-item-body>
-                        <ha-icon-next></ha-icon-next>
+                        <ha-icon-next
+                          aria-label=${this.hass.localize(
+                            "ui.panel.config.integrations.details"
+                          )}
+                        ></ha-icon-next>
                       </paper-item>
                     </a>
                   `
@@ -154,6 +158,7 @@ export class HaConfigManagerDashboard extends LitElement {
 
         <ha-fab
           icon="hass:plus"
+          aria-label=${this.hass.localize("ui.panel.config.integrations.new")}
           title=${this.hass.localize("ui.panel.config.integrations.new")}
           @click=${this._createFlow}
           ?rtl=${computeRTL(this.hass!)}

src/panels/lovelace/hui-root.ts

@@ -93,6 +93,9 @@ class HUIRoot extends LitElement {
             ? html`
                 <app-toolbar class="edit-mode">
                   <paper-icon-button
+                    aria-label="${this.hass!.localize(
+                      "ui.panel.lovelace.menu.exit_edit_mode"
+                    )}"
                     title="${this.hass!.localize(
                       "ui.panel.lovelace.menu.close"
                     )}"
@@ -103,6 +106,9 @@ class HUIRoot extends LitElement {
                     ${this.config.title ||
                       this.hass!.localize("ui.panel.lovelace.editor.header")}
                     <paper-icon-button
+                      aria-label="${this.hass!.localize(
+                        "ui.panel.lovelace.editor.edit_lovelace.edit_title"
+                      )}"
                       title="${this.hass!.localize(
                         "ui.panel.lovelace.editor.edit_lovelace.edit_title"
                       )}"
@@ -182,6 +188,12 @@ class HUIRoot extends LitElement {
                     horizontal-offset="-5"
                   >
                     <paper-icon-button
+                      aria-label=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                      title="${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}"
                       icon="hass:dots-vertical"
                       slot="dropdown-trigger"
                     ></paper-icon-button>

src/translations/en.json

@@ -569,6 +569,8 @@
         "title": "Are you sure?"
       },
       "more_info_control": {
+        "dismiss": "Dismiss dialog",
+        "settings": "Entity settings",
         "script": {
           "last_action": "Last Action"
         },
@@ -582,6 +584,7 @@
         }
       },
       "more_info_settings": {
+        "back": "Go back",
         "save": "Save",
         "name": "Name Override",
         "entity_id": "Entity ID"
@@ -641,7 +644,8 @@
     "notification_drawer": {
       "click_to_configure": "Click button to configure {entity}",
       "empty": "No Notifications",
-      "title": "Notifications"
+      "title": "Notifications",
+      "close": "Close"
     },
     "notification_toast": {
       "service_call_failed": "Failed to call service {service}.",
@@ -1299,6 +1303,7 @@
           "configure": "Configure",
           "none": "Nothing configured yet",
           "integration_not_found": "Integration not found.",
+          "details": "Integration details",
           "config_entry": {
             "settings_button": "Edit settings for {integration}",
             "system_options_button": "System options for {integration}",
@@ -1518,6 +1523,7 @@
           "configure_ui": "Configure UI",
           "help": "Help",
           "refresh": "Refresh",
+          "exit_edit_mode": "Exit UI edit mode",
           "close": "Close"
         },
         "editor": {