Add a couple of labels (#3310)

* Add a couple of labels

* Add some more labels

src/cards/ha-media_player-card.js

@@ -188,6 +188,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <div class="controls layout horizontal justified">
         <paper-icon-button
+          aria-label="Turn off"
           icon="hass:power"
           on-click="handleTogglePower"
           invisible$="[[computeHidePowerButton(playerObj)]]"
@@ -196,12 +197,14 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <div class="playback-controls">
           <paper-icon-button
+            aria-label="Previous track"
             icon="hass:skip-previous"
             invisible$="[[!playerObj.supportsPreviousTrack]]"
             disabled="[[playerObj.isOff]]"
             on-click="handlePrevious"
           ></paper-icon-button>
           <paper-icon-button
+            aria-label="Play or Pause"
             class="primary"
             icon="[[computePlaybackControlIcon(playerObj)]]"
             invisible$="[[!computePlaybackControlIcon(playerObj)]]"
@@ -209,6 +212,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             on-click="handlePlaybackControl"
           ></paper-icon-button>
           <paper-icon-button
+            aria-label="Next track"
             icon="hass:skip-next"
             invisible$="[[!playerObj.supportsNextTrack]]"
             disabled="[[playerObj.isOff]]"
@@ -217,6 +221,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </div>
 
         <paper-icon-button
+          aria-label="More information."
           icon="hass:dots-vertical"
           on-click="handleOpenMoreInfo"
           class="self-center secondary"

src/components/entity/ha-entity-toggle.ts

@@ -15,6 +15,7 @@ import {
 import { HomeAssistant } from "../../types";
 import { HassEntity } from "home-assistant-js-websocket";
 import { forwardHaptic } from "../../data/haptics";
+import computeStateName from "../../common/entity/compute_state_name";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
@@ -35,11 +36,13 @@ class HaEntityToggle extends LitElement {
     if (this.stateObj.attributes.assumed_state) {
       return html`
         <paper-icon-button
+          aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
           icon="hass:flash-off"
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></paper-icon-button>
         <paper-icon-button
+          aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
           icon="hass:flash"
           @click=${this._turnOn}
           ?state-active=${this._isOn}
@@ -49,6 +52,9 @@ class HaEntityToggle extends LitElement {
 
     return html`
       <paper-toggle-button
+        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+          this._isOn ? "off" : "on"
+        }`}
         .checked=${this._isOn}
         @change=${this._toggleChanged}
       ></paper-toggle-button>

src/components/ha-camera-stream.ts

@@ -55,7 +55,9 @@ class HaCameraStream extends LitElement {
               .src=${__DEMO__
                 ? `/api/camera_proxy_stream/${this.stateObj.entity_id}`
                 : computeMJPEGStreamUrl(this.stateObj)}
-              .alt=${computeStateName(this.stateObj)}
+              .alt=${`Preview of the ${computeStateName(
+                this.stateObj
+              )} camera.`}
             />
           `
         : html`

src/components/ha-sidebar.ts

@@ -68,6 +68,7 @@ const computePanels = (hass: HomeAssistant) => {
 
 const renderPanel = (hass, panel) => html`
   <a
+    aria-role="option"
     href="${computeUrl(panel.url_path)}"
     data-panel="${panel.url_path}"
     tabindex="-1"
@@ -115,12 +116,17 @@ class HaSidebar extends LitElement {
           `
         : html`
             <div class="logo">
-              <img id="logo" src="/static/icons/favicon-192x192.png" />
+              <img
+                id="logo"
+                src="/static/icons/favicon-192x192.png"
+                alt="Home Assistant logo"
+              />
             </div>
           `}
 
       <paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
         <a
+          aria-role="option"
           href="${computeUrl(this._defaultPage)}"
           data-panel=${this._defaultPage}
           tabindex="-1"
@@ -197,6 +203,7 @@ class HaSidebar extends LitElement {
         ${this._externalConfig && this._externalConfig.hasSettingsScreen
           ? html`
               <a
+                aria-role="option"
                 aria-label="App Configuration"
                 href="#external-app-configuration"
                 tabindex="-1"
@@ -219,7 +226,13 @@ class HaSidebar extends LitElement {
         ${configPanel ? renderPanel(hass, configPanel) : ""}
         ${hass.user
           ? html`
-              <a href="/profile" data-panel="panel" tabindex="-1">
+              <a
+                href="/profile"
+                data-panel="panel"
+                tabindex="-1"
+                aria-role="option"
+                aria-label=${hass.localize("panel.profile")}
+              >
                 <paper-icon-item class="profile">
                   <ha-user-badge
                     slot="item-icon"
@@ -233,7 +246,11 @@ class HaSidebar extends LitElement {
               </a>
             `
           : html`
-              <paper-icon-item @click=${this._handleLogOut} class="logout">
+              <paper-icon-item
+                @click=${this._handleLogOut}
+                class="logout"
+                aria-role="option"
+              >
                 <ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
                 <span class="item-text"
                   >${hass.localize("ui.sidebar.log_out")}</span

src/components/ha-start-voice-button.js

@@ -14,6 +14,7 @@ class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
       <paper-icon-button
+        aria-label="Start conversation"
         icon="hass:microphone"
         hidden$="[[!canListen]]"
         on-click="handleListenClick"

src/panels/dev-info/ha-panel-dev-info.ts

@@ -64,9 +64,14 @@ class HaPanelDevInfo extends LitElement {
         <div class="content">
           <div class="about">
             <p class="version">
-              <a href="https://www.home-assistant.io" target="_blank"
-                ><img src="/static/icons/favicon-192x192.png" height="192"/></a
-              ><br />
+              <a href="https://www.home-assistant.io" target="_blank">
+                <img
+                  src="/static/icons/favicon-192x192.png"
+                  height="192"
+                  alt="Home Assistant logo"
+                />
+              </a>
+              <br />
               Home Assistant<br />
               ${hass.config.version}
             </p>

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -41,6 +41,7 @@ class HuiEntitiesToggle extends LitElement {
 
     return html`
       <paper-toggle-button
+        aria-label="Toggle entities."
         ?checked="${this._toggleEntities!.some((entityId) => {
           const stateObj = this.hass!.states[entityId];
           return stateObj && stateObj.state === "on";

src/panels/lovelace/components/notifications/hui-notifications-button.ts

@@ -23,6 +23,7 @@ class HuiNotificationsButton extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <paper-icon-button
+        aria-label="Show Notifications"
         icon="hass:bell"
         @click="${this._clicked}"
       ></paper-icon-button>

src/panels/lovelace/hui-root.ts

@@ -144,6 +144,7 @@ class HUIRoot extends LitElement {
                     horizontal-offset="-5"
                   >
                     <paper-icon-button
+                      aria-label="Open Lovelace menu"
                       icon="hass:dots-vertical"
                       slot="dropdown-trigger"
                     ></paper-icon-button>