mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add more alternative text to various images (#14932)
* Add alt text for cast launcher images * Hide icon with supervisor form field label * Use attribute for iframe title for ingress view * Hide some decorative ZWave/ZHA icons * Hide image preload in state card configurator * Use title for alt text on image media * Hide media art as decorative * Do not allow empty string for image media
This commit is contained in:
parent
c8883a6a8a
commit
1b922e0065
@ -22,7 +22,11 @@ class HcLayout extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<ha-card>
|
<ha-card>
|
||||||
<div class="layout">
|
<div class="layout">
|
||||||
<img class="hero" src="/images/google-nest-hub.png" />
|
<img
|
||||||
|
class="hero"
|
||||||
|
alt="A Google Nest Hub with a Home Assistant dashboard on its screen"
|
||||||
|
src="/images/google-nest-hub.png"
|
||||||
|
/>
|
||||||
<h1 class="card-header">
|
<h1 class="card-header">
|
||||||
Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
|
Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
|
||||||
${this.auth
|
${this.auth
|
||||||
|
@ -12,6 +12,7 @@ class HcLaunchScreen extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<img
|
<img
|
||||||
|
alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
|
||||||
src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
|
src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
|
||||||
/>
|
/>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
|
@ -15,7 +15,7 @@ class SupervisorFormfieldLabel extends LitElement {
|
|||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${this.imageUrl
|
${this.imageUrl
|
||||||
? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
|
? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
|
||||||
: this.iconPath
|
: this.iconPath
|
||||||
? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
|
? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
|
||||||
: ""}
|
: ""}
|
||||||
|
@ -60,8 +60,8 @@ class HassioIngressView extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const iframe = html`<iframe
|
const iframe = html`<iframe
|
||||||
.title=${this._addon.name}
|
title=${this._addon.name}
|
||||||
.src=${this._addon.ingress_url!}
|
src=${this._addon.ingress_url!}
|
||||||
>
|
>
|
||||||
</iframe>`;
|
</iframe>`;
|
||||||
|
|
||||||
|
@ -92,6 +92,7 @@ class HaDomainIntegrations extends LitElement {
|
|||||||
<img
|
<img
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
alt=""
|
||||||
src=${brandsUrl({
|
src=${brandsUrl({
|
||||||
domain,
|
domain,
|
||||||
type: "icon",
|
type: "icon",
|
||||||
@ -153,6 +154,7 @@ class HaDomainIntegrations extends LitElement {
|
|||||||
<img
|
<img
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
alt=""
|
||||||
src=${brandsUrl({
|
src=${brandsUrl({
|
||||||
domain: this.domain,
|
domain: this.domain,
|
||||||
type: "icon",
|
type: "icon",
|
||||||
|
@ -227,7 +227,9 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
|||||||
})}
|
})}
|
||||||
@click=${this._openMoreInfo}
|
@click=${this._openMoreInfo}
|
||||||
>
|
>
|
||||||
${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
|
${mediaArt
|
||||||
|
? html`<img alt="" src=${this.hass.hassUrl(mediaArt)} />`
|
||||||
|
: ""}
|
||||||
<div class="media-info">
|
<div class="media-info">
|
||||||
<hui-marquee
|
<hui-marquee
|
||||||
.text=${mediaTitleClean ||
|
.text=${mediaTitleClean ||
|
||||||
|
@ -1,4 +1,11 @@
|
|||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import {
|
||||||
|
css,
|
||||||
|
CSSResultGroup,
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
nothing,
|
||||||
|
TemplateResult,
|
||||||
|
} from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { createCloseHeading } from "../../components/ha-dialog";
|
import { createCloseHeading } from "../../components/ha-dialog";
|
||||||
@ -76,7 +83,10 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
|
|||||||
></ha-hls-player>
|
></ha-hls-player>
|
||||||
`
|
`
|
||||||
: mediaType === "image"
|
: mediaType === "image"
|
||||||
? html`<img src=${this._params.sourceUrl} />`
|
? html`<img
|
||||||
|
alt=${this._params.title || nothing}
|
||||||
|
src=${this._params.sourceUrl}
|
||||||
|
/>`
|
||||||
: html`${this.hass.localize(
|
: html`${this.hass.localize(
|
||||||
"ui.components.media-browser.media_not_supported"
|
"ui.components.media-browser.media_not_supported"
|
||||||
)}`}
|
)}`}
|
||||||
|
@ -31,7 +31,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
|
|||||||
|
|
||||||
<!-- pre load the image so the dialog is rendered the proper size -->
|
<!-- pre load the image so the dialog is rendered the proper size -->
|
||||||
<template is="dom-if" if="[[stateObj.attributes.description_image]]">
|
<template is="dom-if" if="[[stateObj.attributes.description_image]]">
|
||||||
<img hidden="" src="[[stateObj.attributes.description_image]]" />
|
<img hidden="" alt="" src="[[stateObj.attributes.description_image]]" />
|
||||||
</template>
|
</template>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user