jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Philip Allgaier 2021-12-14 01:33:34 +01:00 committed by GitHub
parent 86114758c3
commit d8e12f4280
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/media-player.ts
View File

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

3
src/dialogs/more-info/controls/more-info-media_player.ts
View File

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

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

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

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

@ -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
: mdiStop;
? { icon: mdiPause, action: "media_pause" }
: { icon: mdiStop, action: "media_stop" };
}
private _togglePower(): void {

12
src/translations/en.json
View File

@ -195,8 +195,14 @@
"turn_off": "Turn off",
"media_play": "Play",
"media_play_pause": "Play/pause",
"media_next_track": "Next",
"media_previous_track": "Previous",
"media_pause": "Pause",
"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": {