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

Ensure "next" and "prev" buttons always have ARIA label (#7588)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2020-11-10 11:39:09 +01:00 committed by GitHub
parent b7bcf97365
commit 8275ac5853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 108 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hassio/src/ingress-view/hassio-ingress-view.ts
View File

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

10
src/components/ha-icon-button-arrow-next.ts
View File

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

16
src/components/ha-icon-button-arrow-prev.ts
View File

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

16
src/components/ha-icon-button-next.ts
View File

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

16
src/components/ha-icon-button-prev.ts
View File

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

5
src/dialogs/notifications/notification-drawer.js
View File

@ -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)]]">

4
src/layouts/hass-error-screen.ts
View File

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

1
src/layouts/hass-loading-screen.ts
View File

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

14
src/layouts/hass-subpage.ts
View File

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

2
src/layouts/hass-tabs-subpage.ts
View File

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

3
src/panels/config/areas/ha-config-area-page.ts
View File

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

2
src/panels/config/cloud/account/cloud-account.js
View File

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

6
src/panels/config/cloud/alexa/cloud-alexa.ts
View File

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

1
src/panels/config/cloud/forgot-password/cloud-forgot-password.js
View File

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

6
src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
View File

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

2
src/panels/config/cloud/login/cloud-login.js
View File

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

2
src/panels/config/cloud/register/cloud-register.js
View File

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

5
src/panels/config/devices/ha-config-device-page.ts
View File

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

2
src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
View File

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

5
src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
View File

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

5
src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
View File

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

3
src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
View File

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

1
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

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

7
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

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

1
src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
View File

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

2
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

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

1
src/panels/lovelace/ha-panel-lovelace.ts
View File

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

12
src/panels/lovelace/hui-root.ts
View File

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