Add tooltips and aria-labels to media player buttons (#10881)

src/data/media-player.ts

@@ -156,6 +156,7 @@ export interface MediaPlayerThumbnail {
 
 export interface ControlButton {
   icon: string;
+  // Used as key for action as well as tooltip and aria-label translation key
   action: string;
 }
 

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -65,6 +65,9 @@ class MoreInfoMediaPlayer extends LitElement {
                       action=${control.action}
                       @click=${this._handleClick}
                       .path=${control.icon}
+                      .label=${this.hass.localize(
+                        `ui.card.media_player.${control.action}`
+                      )}
                     >
                     </ha-icon-button>
                   `

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -235,6 +235,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             <div>
               <ha-icon-button
                 .path=${mdiDotsVertical}
+                .label=${this.hass.localize(
+                  "ui.panel.lovelace.cards.show_more_info"
+                )}
                 class="more-info"
                 @click=${this._handleMoreInfo}
               ></ha-icon-button>

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -30,6 +30,7 @@ import "../../../components/ha-slider";
 import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
 import {
   computeMediaDescription,
+  ControlButton,
   MediaPlayerEntity,
   SUPPORT_NEXT_TRACK,
   SUPPORT_PAUSE,
@@ -108,6 +109,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     }
 
     const entityState = stateObj.state;
+    const controlButton = this._computeControlButton(stateObj);
 
     const buttons = html`
       ${!this._narrow &&
@@ -116,6 +118,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         ? html`
             <ha-icon-button
               .path=${mdiSkipPrevious}
+              .label=${this.hass.localize(
+                "ui.card.media_player.media_previous_track"
+              )}
               @click=${this._previousTrack}
             ></ha-icon-button>
           `
@@ -130,7 +135,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
           supportsFeature(stateObj, SUPPORT_PAUSE)))
         ? html`
             <ha-icon-button
-              .path=${this._computeControlIcon(stateObj)}
+              .path=${controlButton.icon}
+              .label=${this.hass.localize(
+                `ui.card.media_player.${controlButton.action}`
+              )}
               @click=${this._playPauseStop}
             ></ha-icon-button>
           `
@@ -140,6 +148,9 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         ? html`
             <ha-icon-button
               .path=${mdiSkipNext}
+              .label=${this.hass.localize(
+                "ui.card.media_player.media_next_track"
+              )}
               @click=${this._nextTrack}
             ></ha-icon-button>
           `
@@ -162,6 +173,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ? html`
                 <ha-icon-button
                   .path=${mdiPower}
+                  .label=${this.hass.localize("ui.card.media_player.turn_on")}
                   @click=${this._togglePower}
                 ></ha-icon-button>
               `
@@ -175,6 +187,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ? html`
                 <ha-icon-button
                   .path=${mdiPower}
+                  .label=${this.hass.localize("ui.card.media_player.turn_off")}
                   @click=${this._togglePower}
                 ></ha-icon-button>
               `
@@ -193,6 +206,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
                         .path=${stateObj.attributes.is_volume_muted
                           ? mdiVolumeOff
                           : mdiVolumeHigh}
+                        .label=${this.hass.localize(
+                          `ui.card.media_player.${
+                            stateObj.attributes.is_volume_muted
+                              ? "media_volume_mute"
+                              : "media_volume_unmute"
+                          }`
+                        )}
                         @click=${this._toggleMute}
                       ></ha-icon-button>
                     `
@@ -214,10 +234,16 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
                   ? html`
                       <ha-icon-button
                         .path=${mdiVolumeMinus}
+                        .label=${this.hass.localize(
+                          "ui.card.media_player.media_volume_down"
+                        )}
                         @click=${this._volumeDown}
                       ></ha-icon-button>
                       <ha-icon-button
                         .path=${mdiVolumePlus}
+                        .label=${this.hass.localize(
+                          "ui.card.media_player.media_volume_up"
+                        )}
                         @click=${this._volumeUp}
                       ></ha-icon-button>
                     `
@@ -249,14 +275,14 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     this._veryNarrow = (this.clientWidth || 0) < 225;
   }
 
-  private _computeControlIcon(stateObj: HassEntity): string {
+  private _computeControlButton(stateObj: HassEntity): ControlButton {
     return stateObj.state === "on"
-      ? mdiPlayPause
+      ? { icon: mdiPlayPause, action: "media_play_pause" }
       : stateObj.state !== "playing"
-      ? mdiPlay
+      ? { icon: mdiPlay, action: "media_play" }
       : supportsFeature(stateObj, SUPPORT_PAUSE)
-      ? mdiPause
+      ? { icon: mdiPause, action: "media_pause" }
-      : mdiStop;
+      : { icon: mdiStop, action: "media_stop" };
   }
 
   private _togglePower(): void {

src/translations/en.json

@@ -195,8 +195,14 @@
         "turn_off": "Turn off",
         "media_play": "Play",
         "media_play_pause": "Play/pause",
-        "media_next_track": "Next",
+        "media_pause": "Pause",
-        "media_previous_track": "Previous",
+        "media_stop": "Stop",
+        "media_next_track": "Next track",
+        "media_previous_track": "Previous track",
+        "media_volume_up": "Volume up",
+        "media_volume_down": "Volume down",
+        "media_volume_mute": "Volume mute",
+        "media_volume_unmute": "Volume unmute",
         "text_to_speak": "Text to speak"
       },
       "persistent_notification": {
@@ -689,7 +695,7 @@
           "close_cover": "Close cover",
           "open_tilt_cover": "Open cover tilt",
           "close_tilt_cover": "Close cover tilt",
-          "stop_cover": "Stop cover from moving"
+          "stop_cover": "Stop cover"
         }
       },
       "entity_registry": {