mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 16:26:43 +00:00
Ensure "next" and "prev" buttons always have ARIA label (#7588)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
b7bcf97365
commit
8275ac5853
@ -58,6 +58,7 @@ class HassioIngressView extends LitElement {
|
||||
|
||||
if (!this.ingressPanel) {
|
||||
return html`<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.header=${this._addon.name}
|
||||
.narrow=${this.narrow}
|
||||
>
|
||||
|
@ -9,11 +9,16 @@ import {
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("ha-icon-button-arrow-next")
|
||||
export class HaIconButtonArrowNext extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@internalProperty() private _icon = mdiArrowRight;
|
||||
|
||||
public connectedCallback() {
|
||||
@ -29,7 +34,10 @@ export class HaIconButtonArrowNext extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
return html`<mwc-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass.localize("ui.common.next")}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
}
|
||||
|
@ -9,11 +9,16 @@ import {
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("ha-icon-button-arrow-prev")
|
||||
export class HaIconButtonArrowPrev extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@internalProperty() private _icon = mdiArrowLeft;
|
||||
|
||||
public connectedCallback() {
|
||||
@ -29,9 +34,14 @@ export class HaIconButtonArrowPrev extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass.localize("ui.common.back")}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -9,11 +9,16 @@ import {
|
||||
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
|
||||
import "@material/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("ha-icon-button-next")
|
||||
export class HaIconButtonNext extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@internalProperty() private _icon = mdiChevronRight;
|
||||
|
||||
public connectedCallback() {
|
||||
@ -29,9 +34,14 @@ export class HaIconButtonNext extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass.localize("ui.common.next")}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -9,11 +9,16 @@ import {
|
||||
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("ha-icon-button-prev")
|
||||
export class HaIconButtonPrev extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@internalProperty() private _icon = mdiChevronLeft;
|
||||
|
||||
public connectedCallback() {
|
||||
@ -29,9 +34,14 @@ export class HaIconButtonPrev extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
return html`
|
||||
<mwc-icon-button
|
||||
.disabled=${this.disabled}
|
||||
.label=${this.label || this.hass.localize("ui.common.back")}
|
||||
>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -63,7 +63,10 @@ export class HuiNotificationDrawer extends EventsMixin(
|
||||
<app-drawer id="drawer" opened="{{open}}" disable-swipe align="start">
|
||||
<app-toolbar>
|
||||
<div main-title>[[localize('ui.notification_drawer.title')]]</div>
|
||||
<ha-icon-button-prev on-click="_closeDrawer" aria-label$="[[localize('ui.notification_drawer.close')]]"></ha-icon-button-prev>
|
||||
<ha-icon-button-prev hass="[[hass]]" on-click="_closeDrawer"
|
||||
title="[[localize('ui.notification_drawer.close')]]"
|
||||
label="[[localize('ui.notification_drawer.close')]]">
|
||||
</ha-icon-button-prev>
|
||||
</app-toolbar>
|
||||
<div class="notifications">
|
||||
<template is="dom-if" if="[[!_empty(notifications)]]">
|
||||
|
@ -9,9 +9,12 @@ import {
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import "./hass-subpage";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("hass-error-screen")
|
||||
class HassErrorScreen extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean }) public toolbar = true;
|
||||
|
||||
@property() public error?: string;
|
||||
@ -21,6 +24,7 @@ class HassErrorScreen extends LitElement {
|
||||
${this.toolbar
|
||||
? html`<div class="toolbar">
|
||||
<ha-icon-button-arrow-prev
|
||||
.hass=${this.hass}
|
||||
@click=${this._handleBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
</div>`
|
||||
|
@ -39,6 +39,7 @@ class HassLoadingScreen extends LitElement {
|
||||
`
|
||||
: html`
|
||||
<ha-icon-button-arrow-prev
|
||||
.hass=${this.hass}
|
||||
@click=${this._handleBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`}
|
||||
|
@ -12,17 +12,17 @@ import { classMap } from "lit-html/directives/class-map";
|
||||
import "../components/ha-menu-button";
|
||||
import "../components/ha-icon-button-arrow-prev";
|
||||
import { restoreScroll } from "../common/decorators/restore-scroll";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("hass-subpage")
|
||||
class HassSubpage extends LitElement {
|
||||
@property()
|
||||
public header?: string;
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public showBackButton = true;
|
||||
@property() public header?: string;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public hassio = false;
|
||||
@property({ type: Boolean }) public showBackButton = true;
|
||||
|
||||
@property({ type: Boolean }) public hassio = false;
|
||||
|
||||
// @ts-ignore
|
||||
@restoreScroll(".content") private _savedScrollPos?: number;
|
||||
@ -31,7 +31,7 @@ class HassSubpage extends LitElement {
|
||||
return html`
|
||||
<div class="toolbar">
|
||||
<ha-icon-button-arrow-prev
|
||||
aria-label="Back"
|
||||
.hass=${this.hass}
|
||||
@click=${this._backTapped}
|
||||
class=${classMap({ hidden: !this.showBackButton })}
|
||||
></ha-icon-button-arrow-prev>
|
||||
|
@ -145,7 +145,7 @@ class HassTabsSubpage extends LitElement {
|
||||
`
|
||||
: html`
|
||||
<ha-icon-button-arrow-prev
|
||||
aria-label="Back"
|
||||
.hass=${this.hass}
|
||||
@click=${this._backTapped}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`}
|
||||
|
@ -81,7 +81,8 @@ class HaConfigAreaPage extends LitElement {
|
||||
if (!area) {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
error="${this.hass.localize("ui.panel.config.areas.area_not_found")}"
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize("ui.panel.config.areas.area_not_found")}
|
||||
></hass-error-screen>
|
||||
`;
|
||||
}
|
||||
|
@ -61,7 +61,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
<hass-subpage header="Home Assistant Cloud">
|
||||
<hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
|
@ -214,9 +214,9 @@ class CloudAlexa extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<hass-subpage header="${this.hass!.localize(
|
||||
"ui.panel.config.cloud.alexa.title"
|
||||
)}">
|
||||
<hass-subpage .hass=${this.hass} header="${this.hass!.localize(
|
||||
"ui.panel.config.cloud.alexa.title"
|
||||
)}">
|
||||
${
|
||||
emptyFilter
|
||||
? html`
|
||||
|
@ -46,6 +46,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
}
|
||||
</style>
|
||||
<hass-subpage
|
||||
hass="[[hass]]"
|
||||
header="[[localize('ui.panel.config.cloud.forgot_password.title')]]"
|
||||
>
|
||||
<div class="content">
|
||||
|
@ -237,9 +237,9 @@ class CloudGoogleAssistant extends LitElement {
|
||||
}
|
||||
|
||||
return html`
|
||||
<hass-subpage header="${this.hass!.localize(
|
||||
"ui.panel.config.cloud.google.title"
|
||||
)}">
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.header=${this.hass!.localize("ui.panel.config.cloud.google.title")}>
|
||||
${
|
||||
emptyFilter
|
||||
? html`
|
||||
|
@ -76,7 +76,7 @@ class CloudLogin extends LocalizeMixin(
|
||||
left: 8px;
|
||||
}
|
||||
</style>
|
||||
<hass-subpage header="Home Assistant Cloud">
|
||||
<hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
|
@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<hass-subpage header="[[localize('ui.panel.config.cloud.register.title')]]">
|
||||
<hass-subpage hass="[[hass]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
|
||||
|
@ -143,9 +143,10 @@ export class HaConfigDevicePage extends LitElement {
|
||||
if (!device) {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
error="${this.hass.localize(
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize(
|
||||
"ui.panel.config.devices.device_not_found"
|
||||
)}"
|
||||
)}
|
||||
></hass-error-screen>
|
||||
`;
|
||||
}
|
||||
|
@ -41,7 +41,7 @@ class HaPanelDevMqtt extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<hass-subpage>
|
||||
<hass-subpage .hass=${this.hass}>
|
||||
<div class="content">
|
||||
<ha-card header="MQTT settings">
|
||||
<div class="card-actions">
|
||||
|
@ -58,9 +58,10 @@ class OZWConfigDashboard extends LitElement {
|
||||
|
||||
if (this._instances.length === 0) {
|
||||
return html`<hass-error-screen
|
||||
.error="${this.hass.localize(
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize(
|
||||
"ui.panel.config.ozw.select_instance.none_found"
|
||||
)}"
|
||||
)}
|
||||
></hass-error-screen>`;
|
||||
}
|
||||
|
||||
|
@ -68,9 +68,10 @@ class OZWNodeConfig extends LitElement {
|
||||
if (this._error) {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
.error="${this.hass.localize(
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize(
|
||||
"ui.panel.config.ozw.node." + this._error
|
||||
)}"
|
||||
)}
|
||||
></hass-error-screen>
|
||||
`;
|
||||
}
|
||||
|
@ -64,7 +64,8 @@ class OZWNodeDashboard extends LitElement {
|
||||
if (this._not_found) {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
.error="${this.hass.localize("ui.panel.config.ozw.node.not_found")}"
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize("ui.panel.config.ozw.node.not_found")}
|
||||
></hass-error-screen>
|
||||
`;
|
||||
}
|
||||
|
@ -67,6 +67,7 @@ export class ZHAAddGroupPage extends LitElement {
|
||||
protected render() {
|
||||
return html`
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.header=${this.hass.localize("ui.panel.config.zha.groups.create_group")}
|
||||
>
|
||||
<ha-config-section .isWide=${!this.narrow}>
|
||||
|
@ -94,15 +94,16 @@ export class ZHAGroupPage extends LitElement {
|
||||
if (!this.group) {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
error="${this.hass.localize(
|
||||
.hass=${this.hass}
|
||||
.error=${this.hass.localize(
|
||||
"ui.panel.config.zha.groups.group_not_found"
|
||||
)}"
|
||||
)}
|
||||
></hass-error-screen>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<hass-subpage .header=${this.group.name}>
|
||||
<hass-subpage .hass=${this.hass} .header=${this.group.name}>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:delete"
|
||||
|
@ -93,6 +93,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
<app-header slot="header" fixed="">
|
||||
<app-toolbar>
|
||||
<ha-icon-button-arrow-prev
|
||||
hass="[[hass]]"
|
||||
on-click="_backTapped"
|
||||
></ha-icon-button-arrow-prev>
|
||||
<div main-title="">
|
||||
|
@ -148,7 +148,7 @@ export class HuiDialogEditView extends LitElement {
|
||||
case "tab-visibility":
|
||||
content = html`
|
||||
<hui-view-visibility-editor
|
||||
.hass="${this.hass}"
|
||||
.hass=${this.hass}
|
||||
.config="${this._config}"
|
||||
@view-visibility-changed="${this._viewVisibilityChanged}"
|
||||
></hui-view-visibility-editor>
|
||||
|
@ -109,6 +109,7 @@ class LovelacePanel extends LitElement {
|
||||
if (state === "error") {
|
||||
return html`
|
||||
<hass-error-screen
|
||||
.hass=${this.hass}
|
||||
title="${domainToName(this.hass!.localize, "lovelace")}"
|
||||
.error="${this._errorMsg}"
|
||||
>
|
||||
|
@ -405,7 +405,11 @@ class HUIRoot extends LitElement {
|
||||
${this._editMode
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
title="${this.hass!.localize(
|
||||
.hass=${this.hass}
|
||||
.title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_left"
|
||||
)}"
|
||||
.label="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_left"
|
||||
)}"
|
||||
class="edit-icon view"
|
||||
@ -433,7 +437,11 @@ class HUIRoot extends LitElement {
|
||||
@click="${this._editView}"
|
||||
></ha-svg-icon>
|
||||
<ha-icon-button-arrow-next
|
||||
title="${this.hass!.localize(
|
||||
.hass=${this.hass}
|
||||
.title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_right"
|
||||
)}"
|
||||
.label="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_right"
|
||||
)}"
|
||||
class="edit-icon view"
|
||||
|
Loading…
x
Reference in New Issue
Block a user