Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Accessibility improvements for circular progress indicators (#18506)

pull/18706/head^2
Simon Lamon 2023-12-04 14:06:25 +01:00 committed by GitHub
parent c5f15ee6ba
commit ccada33caf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
79 changed files with 685 additions and 537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/src/custom-cards/ha-demo-card.ts
View File

@ -39,7 +39,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
<div class="picker"> <div class="picker">
<div class="label"> <div class="label">
${this._switching ${this._switching
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress
indeterminate
></ha-circular-progress>`
: until( : until(
selectedDemoConfig.then( selectedDemoConfig.then(
(conf) => html` (conf) => html`

4
gallery/src/pages/components/ha-circular-progress.markdown Normal file
View File

@ -0,0 +1,4 @@
---
title: Circular Progress
subtitle: Can be used to indicate an ongoing task.
---

64
gallery/src/pages/components/ha-circular-progress.ts Normal file
View File

@ -0,0 +1,64 @@
import { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../../src/components/ha-bar";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-circular-progress";
import "@material/web/progress/circular-progress";
import { HomeAssistant } from "../../../../src/types";
@customElement("demo-components-ha-circular-progress")
export class DemoHaCircularProgress extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant;
protected render(): TemplateResult {
return html`<ha-card header="Basic circular progress">
<div class="card-content">
<ha-circular-progress indeterminate></ha-circular-progress></div
></ha-card>
<ha-card header="Different circular progress sizes">
<div class="card-content">
<ha-circular-progress
indeterminate
size="tiny"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="medium"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="large"
></ha-circular-progress></div
></ha-card>
<ha-card header="Circular progress with an aria-label">
<div class="card-content">
<ha-circular-progress
indeterminate
aria-label="Doing something..."
></ha-circular-progress>
<ha-circular-progress
indeterminate
.ariaLabel=${"Doing something..."}
></ha-circular-progress></div
></ha-card>`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-circular-progress": DemoHaCircularProgress;
}
}

2
hassio/src/addon-view/config/hassio-addon-config-tab.ts
View File

@ -20,7 +20,7 @@ class HassioAddonConfigDashboard extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.addon) { if (!this.addon) {
return html`<ha-circular-progress active></ha-circular-progress>`; return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
} }
const hasConfiguration = const hasConfiguration =
(this.addon.options && Object.keys(this.addon.options).length) || (this.addon.options && Object.keys(this.addon.options).length) ||

2
hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
View File

@ -34,7 +34,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.addon) { if (!this.addon) {
return html`<ha-circular-progress active></ha-circular-progress>`; return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
} }
return html` return html`
<div class="content"> <div class="content">

2
hassio/src/addon-view/info/hassio-addon-info-tab.ts
View File

@ -22,7 +22,7 @@ class HassioAddonInfoDashboard extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.addon) { if (!this.addon) {
return html`<ha-circular-progress active></ha-circular-progress>`; return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
} }
return html` return html`

4
hassio/src/addon-view/log/hassio-addon-log-tab.ts
View File

@ -18,7 +18,9 @@ class HassioAddonLogDashboard extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.addon) { if (!this.addon) {
return html` <ha-circular-progress active></ha-circular-progress> `; return html`
<ha-circular-progress indeterminate></ha-circular-progress>
`;
} }
return html` return html`
<div class="content"> <div class="content">

2
hassio/src/dialogs/backup/dialog-hassio-backup.ts
View File

@ -95,7 +95,7 @@ class HassioBackupDialog
</ha-header-bar> </ha-header-bar>
</div> </div>
${this._restoringBackup ${this._restoringBackup
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
: html` : html`
<supervisor-backup-content <supervisor-backup-content
.hass=${this.hass} .hass=${this.hass}

2
hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
View File

@ -57,7 +57,7 @@ class HassioCreateBackupDialog extends LitElement {
)} )}
> >
${this._creatingBackup ${this._creatingBackup
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
: html`<supervisor-backup-content : html`<supervisor-backup-content
.hass=${this.hass} .hass=${this.hass}
.supervisor=${this._dialogParams.supervisor} .supervisor=${this._dialogParams.supervisor}

6
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -71,7 +71,11 @@ class HassioDatadiskDialog extends LitElement {
?hideActions=${this.moving} ?hideActions=${this.moving}
> >
${this.moving ${this.moving
? html` <ha-circular-progress alt="Moving" size="large" active> ? html` <ha-circular-progress
aria-label="Moving"
size="large"
indeterminate
>
</ha-circular-progress> </ha-circular-progress>
<p class="progress-text"> <p class="progress-text">
${this.dialogParams.supervisor.localize( ${this.dialogParams.supervisor.localize(

8
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -155,7 +155,11 @@ export class DialogHassioNetwork
.disabled=${this._scanning} .disabled=${this._scanning}
> >
${this._scanning ${this._scanning
? html`<ha-circular-progress active size="small"> ? html`<ha-circular-progress
aria-label="Scanning"
indeterminate
size="small"
>
</ha-circular-progress>` </ha-circular-progress>`
: this.supervisor.localize("dialog.network.scan_ap")} : this.supervisor.localize("dialog.network.scan_ap")}
</mwc-button> </mwc-button>
@ -274,7 +278,7 @@ export class DialogHassioNetwork
</mwc-button> </mwc-button>
<mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}> <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing ${this._processing
? html`<ha-circular-progress active size="small"> ? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>` </ha-circular-progress>`
: this.supervisor.localize("common.save")} : this.supervisor.localize("common.save")}
</mwc-button> </mwc-button>

2
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -158,7 +158,7 @@ class HassioRepositoriesDialog extends LitElement {
<mwc-button @click=${this._addRepository}> <mwc-button @click=${this._addRepository}>
${this._processing ${this._processing
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
></ha-circular-progress>` ></ha-circular-progress>`
: this._dialogParams!.supervisor.localize( : this._dialogParams!.supervisor.localize(

6
hassio/src/update-available/update-available-card.ts
View File

@ -174,7 +174,11 @@ class UpdateAvailableCard extends LitElement {
` `
: ""} : ""}
` `
: html`<ha-circular-progress alt="Updating" size="large" active> : html`<ha-circular-progress
aria-label="Updating"
size="large"
indeterminate
>
</ha-circular-progress> </ha-circular-progress>
<p class="progress-text"> <p class="progress-text">
${this.supervisor.localize("update_available.updating", { ${this.supervisor.localize("update_available.updating", {

1
package.json
View File

@ -60,7 +60,6 @@
"@material/mwc-base": "0.27.0", "@material/mwc-base": "0.27.0",
"@material/mwc-button": "0.27.0", "@material/mwc-button": "0.27.0",
"@material/mwc-checkbox": "0.27.0", "@material/mwc-checkbox": "0.27.0",
"@material/mwc-circular-progress": "0.27.0",
"@material/mwc-dialog": "0.27.0", "@material/mwc-dialog": "0.27.0",
"@material/mwc-drawer": "0.27.0", "@material/mwc-drawer": "0.27.0",
"@material/mwc-fab": "0.27.0", "@material/mwc-fab": "0.27.0",

2
src/components/buttons/ha-progress-button.ts
View File

@ -45,7 +45,7 @@ export class HaProgressButton extends LitElement {
? html` ? html`
<ha-circular-progress <ha-circular-progress
size="small" size="small"
active indeterminate
></ha-circular-progress> ></ha-circular-progress>
` `
: ""} : ""}

58
src/components/ha-circular-progress.ts
View File

@ -1,54 +1,44 @@
import { CircularProgress } from "@material/mwc-circular-progress"; import "element-internals-polyfill";
import { CSSResultGroup, css } from "lit"; import { MdCircularProgress } from "@material/web/progress/circular-progress";
import { CSSResult, PropertyValues, css } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@customElement("ha-circular-progress") @customElement("ha-circular-progress")
// @ts-ignore export class HaCircularProgress extends MdCircularProgress {
export class HaCircularProgress extends CircularProgress { @property({ attribute: "aria-label", type: String }) public ariaLabel =
@property({ type: Boolean }) "Loading";
public active = false;
@property() @property() public size: "tiny" | "small" | "medium" | "large" = "medium";
public alt = "Loading";
@property() protected updated(changedProps: PropertyValues) {
public size: "tiny" | "small" | "medium" | "large" = "medium"; super.updated(changedProps);
// @ts-ignore if (changedProps.has("size")) {
public set density(_) {
// just a dummy
}
public get density() {
switch (this.size) { switch (this.size) {
case "tiny": case "tiny":
return -8; this.style.setProperty("--md-circular-progress-size", "16px");
break;
case "small": case "small":
return -5; this.style.setProperty("--md-circular-progress-size", "28px");
break;
// medium is default size
case "medium": case "medium":
return 0; this.style.setProperty("--md-circular-progress-size", "48px");
break;
case "large": case "large":
return 5; this.style.setProperty("--md-circular-progress-size", "68px");
default: break;
return 0; }
} }
} }
// @ts-ignore static get styles(): CSSResult[] {
public set indeterminate(_) {
// just a dummy
}
public get indeterminate() {
return this.active;
}
static get styles(): CSSResultGroup {
return [ return [
super.styles, ...super.styles,
css` css`
:host { :host {
overflow: hidden; --md-sys-color-primary: var(--primary-color);
--md-circular-progress-size: 48px;
} }
`, `,
]; ];

2
src/components/media-player/dialog-media-manage.ts
View File

@ -147,7 +147,7 @@ class DialogMediaManage extends LitElement {
${!this._currentItem ${!this._currentItem
? html` ? html`
<div class="refresh"> <div class="refresh">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: !children.length : !children.length

2
src/components/media-player/ha-media-player-browse.ts
View File

@ -332,7 +332,7 @@ export class HaMediaPlayerBrowse extends LitElement {
} }
if (!this._currentItem) { if (!this._currentItem) {
return html`<ha-circular-progress active></ha-circular-progress>`; return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
} }
const currentItem = this._currentItem; const currentItem = this._currentItem;

4
src/components/media-player/ha-media-upload-button.ts
View File

@ -54,8 +54,8 @@ class MediaUploadButton extends LitElement {
? html` ? html`
<ha-circular-progress <ha-circular-progress
size="tiny" size="tiny"
active indeterminate
alt="" area-label="Uploading"
slot="icon" slot="icon"
></ha-circular-progress> ></ha-circular-progress>
` `

2
src/dialogs/config-flow/step-flow-form.ts
View File

@ -90,7 +90,7 @@ class StepFlowForm extends LitElement {
${this._loading ${this._loading
? html` ? html`
<div class="submit-spinner"> <div class="submit-spinner">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: html` : html`

2
src/dialogs/config-flow/step-flow-loading.ts
View File

@ -27,7 +27,7 @@ class StepFlowLoading extends LitElement {
return html` return html`
<div class="init-spinner"> <div class="init-spinner">
${description ? html`<div>${description}</div>` : ""} ${description ? html`<div>${description}</div>` : ""}
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
`; `;
} }

2
src/dialogs/config-flow/step-flow-progress.ts
View File

@ -24,7 +24,7 @@ class StepFlowProgress extends LitElement {
${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)} ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
</h2> </h2>
<div class="content"> <div class="content">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
${this.flowConfig.renderShowFormProgressDescription( ${this.flowConfig.renderShowFormProgressDescription(
this.hass, this.hass,
this.step this.step

4
src/dialogs/more-info/controls/more-info-configurator.ts
View File

@ -53,8 +53,8 @@ export class MoreInfoConfigurator extends LitElement {
> >
${this._isConfiguring ${this._isConfiguring
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
alt="Configuring" aria-label="Configuring"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}
${this.stateObj.attributes.submit_caption} ${this.stateObj.attributes.submit_caption}

2
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -104,7 +104,7 @@ class MoreInfoUpdate extends LitElement {
${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) && ${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
!this._error !this._error
? this._releaseNotes === undefined ? this._releaseNotes === undefined
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
: html`<hr /> : html`<hr />
<ha-faded> <ha-faded>
<ha-markdown .content=${this._releaseNotes}></ha-markdown> <ha-markdown .content=${this._releaseNotes}></ha-markdown>

4
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -214,7 +214,7 @@ export class QuickBar extends LitElement {
${!items ${!items
? html`<ha-circular-progress ? html`<ha-circular-progress
size="small" size="small"
active indeterminate
></ha-circular-progress>` ></ha-circular-progress>`
: items.length === 0 : items.length === 0
? html` ? html`
@ -375,7 +375,7 @@ export class QuickBar extends LitElement {
const spinner = document.createElement("ha-circular-progress"); const spinner = document.createElement("ha-circular-progress");
spinner.size = "small"; spinner.size = "small";
spinner.slot = "meta"; spinner.slot = "meta";
spinner.active = true; spinner.indeterminate = true;
this._getItemAtIndex(index)?.appendChild(spinner); this._getItemAtIndex(index)?.appendChild(spinner);
} }

2
src/dialogs/restart/dialog-restart.ts
View File

@ -91,7 +91,7 @@ class DialogRestart extends LitElement {
${this._loadingHostInfo ${this._loadingHostInfo
? html` ? html`
<div class="loader"> <div class="loader">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: html` : html`

3
src/dialogs/tts-try/dialog-tts-try.ts
View File

@ -85,8 +85,7 @@ export class TTSTryDialog extends LitElement {
? html` ? html`
<ha-circular-progress <ha-circular-progress
size="small" size="small"
active indeterminate
alt=""
slot="primaryAction" slot="primaryAction"
class="loading" class="loading"
></ha-circular-progress> ></ha-circular-progress>

2
src/layouts/ha-init-page.ts
View File

@ -35,7 +35,7 @@ class HaInitPage extends LitElement {
` `
: html` : html`
<div id="progress-indicator-wrapper"> <div id="progress-indicator-wrapper">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
<div id="loading-text"> <div id="loading-text">
${this.migration ${this.migration

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

@ -46,7 +46,7 @@ class HassLoadingScreen extends LitElement {
`} `}
</div>`} </div>`}
<div class="content"> <div class="content">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
${this.message ${this.message
? html`<div id="loading-text">${this.message}</div>` ? html`<div id="loading-text">${this.message}</div>`
: nothing} : nothing}

2
src/onboarding/onboarding-core-config.ts
View File

@ -57,7 +57,7 @@ class OnboardingCoreConfig extends LitElement {
} }
if (this._skipCore) { if (this._skipCore) {
return html`<div class="row center"> return html`<div class="row center">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div>`; </div>`;
} }
return html` return html`

2
src/onboarding/onboarding-location.ts
View File

@ -123,7 +123,7 @@ class OnboardingLocation extends LitElement {
? html` ? html`
<ha-circular-progress <ha-circular-progress
slot="trailingIcon" slot="trailingIcon"
active indeterminate
size="small" size="small"
></ha-circular-progress> ></ha-circular-progress>
` `

2
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -227,7 +227,7 @@ export class DialogAddApplicationCredential extends LitElement {
${this._loading ${this._loading
? html` ? html`
<div slot="primaryAction" class="submit-spinner"> <div slot="primaryAction" class="submit-spinner">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: html` : html`

2
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -101,7 +101,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
: this.hass.localize( : this.hass.localize(
"ui.panel.config.automation.editor.blueprint.no_blueprints" "ui.panel.config.automation.editor.blueprint.no_blueprints"
) )
: html`<ha-circular-progress active></ha-circular-progress>`} : html`<ha-circular-progress indeterminate></ha-circular-progress>`}
</div> </div>
${this.config.use_blueprint.path ${this.config.use_blueprint.path

2
src/panels/config/backup/ha-config-backup.ts
View File

@ -158,7 +158,7 @@ class HaConfigBackup extends LitElement {
${this._backupData.backing_up ${this._backupData.backing_up
? html`<ha-circular-progress ? html`<ha-circular-progress
slot="icon" slot="icon"
active indeterminate
></ha-circular-progress>` ></ha-circular-progress>`
: html`<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>`} : html`<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>`}
</ha-fab> </ha-fab>

8
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@ -163,9 +163,9 @@ class DialogImportBlueprint extends LitElement {
> >
${this._importing ${this._importing
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
.title=${this.hass.localize( .ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.importing" "ui.panel.config.blueprint.add.importing"
)} )}
></ha-circular-progress>` ></ha-circular-progress>`
@ -183,9 +183,9 @@ class DialogImportBlueprint extends LitElement {
> >
${this._saving ${this._saving
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
.title=${this.hass.localize( .ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.saving" "ui.panel.config.blueprint.add.saving"
)} )}
></ha-circular-progress>` ></ha-circular-progress>`

2
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -93,7 +93,7 @@ export class CloudWebhooks extends LitElement {
? html` ? html`
<div class="progress"> <div class="progress">
<ha-circular-progress <ha-circular-progress
active indeterminate
></ha-circular-progress> ></ha-circular-progress>
</div> </div>
` `

4
src/panels/config/dashboard/ha-config-updates.ts
View File

@ -108,7 +108,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
></state-badge> ></state-badge>
${this.narrow && entity.attributes.in_progress ${this.narrow && entity.attributes.in_progress
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
slot="graphic" slot="graphic"
class="absolute" class="absolute"
@ -128,7 +128,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
${!this.narrow ${!this.narrow
? entity.attributes.in_progress ? entity.attributes.in_progress
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
slot="meta" slot="meta"
></ha-circular-progress>` ></ha-circular-progress>`

4
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -164,7 +164,9 @@ export class DialogHelperDetail extends LitElement {
</mwc-button> </mwc-button>
`; `;
} else if (this._loading || this._helperFlows === undefined) { } else if (this._loading || this._helperFlows === undefined) {
content = html`<ha-circular-progress active></ha-circular-progress>`; content = html`<ha-circular-progress
indeterminate
></ha-circular-progress>`;
} else { } else {
const items: [string, string][] = []; const items: [string, string][] = [];

2
src/panels/config/integrations/dialog-add-integration.ts
View File

@ -449,7 +449,7 @@ class AddIntegrationDialog extends LitElement {
> >
</lit-virtualizer> </lit-virtualizer>
</mwc-list>` </mwc-list>`
: html`<ha-circular-progress active></ha-circular-progress>`} `; : html`<ha-circular-progress indeterminate></ha-circular-progress>`} `;
} }
private _keyFunction = (integration: IntegrationListItem) => private _keyFunction = (integration: IntegrationListItem) =>

2
src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
View File

@ -57,7 +57,7 @@ class DialogMatterAddDevice extends LitElement {
) )
: html`<ha-circular-progress : html`<ha-circular-progress
size="large" size="large"
active indeterminate
></ha-circular-progress>`} ></ha-circular-progress>`}
</div> </div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}> <mwc-button slot="primaryAction" @click=${this.closeDialog}>

2
src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
View File

@ -102,7 +102,7 @@ class DialogZHAReconfigureDevice extends LitElement {
${this._status === "started" ${this._status === "started"
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>
<b> <b>

4
src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
View File

@ -98,8 +98,8 @@ class ZHAAddDevicesPage extends LitElement {
)} )}
</h1> </h1>
<ha-circular-progress <ha-circular-progress
active indeterminate
alt="Searching" aria-label="Searching"
></ha-circular-progress> ></ha-circular-progress>
` `
: html` : html`

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

@ -98,9 +98,9 @@ export class ZHAAddGroupPage extends LitElement {
> >
${this._processingAdd ${this._processingAdd
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
.title=${this.hass!.localize( .ariaLabel=${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group" "ui.panel.config.zha.groups.creating_group"
)} )}
></ha-circular-progress>` ></ha-circular-progress>`

3
src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts
View File

@ -120,9 +120,8 @@ class ZHADeviceNeighbors extends LitElement {
return html` return html`
${!this._devices ${!this._devices
? html`<ha-circular-progress ? html`<ha-circular-progress
alt="Loading"
size="large" size="large"
active indeterminate
></ha-circular-progress>` ></ha-circular-progress>`
: html`<ha-data-table : html`<ha-data-table
.hass=${this.hass} .hass=${this.hass}

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

@ -169,12 +169,14 @@ export class ZHAGroupPage extends LitElement {
@click=${this._removeMembersFromGroup} @click=${this._removeMembersFromGroup}
class="button" class="button"
> >
<ha-circular-progress ${this._processingRemove
?active=${this._processingRemove} ? html`<ha-circular-progress
alt=${this.hass.localize( indeterminate
.ariaLabel=${this.hass.localize(
"ui.panel.config.zha.groups.removing_members" "ui.panel.config.zha.groups.removing_members"
)} )}
></ha-circular-progress> ></ha-circular-progress>`
: nothing}
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.config.zha.groups.remove_members" "ui.panel.config.zha.groups.remove_members"
)}</mwc-button )}</mwc-button
@ -208,7 +210,7 @@ export class ZHAGroupPage extends LitElement {
? html`<ha-circular-progress ? html`<ha-circular-progress
active active
size="small" size="small"
title="Saving" aria-label="Saving"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}
${this.hass!.localize( ${this.hass!.localize(

13
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
View File

@ -116,7 +116,10 @@ class DialogZWaveJSAddNode extends LitElement {
> >
${this._status === "loading" ${this._status === "loading"
? html`<div style="display: flex; justify-content: center;"> ? html`<div style="display: flex; justify-content: center;">
<ha-circular-progress size="large" active></ha-circular-progress> <ha-circular-progress
size="large"
indeterminate
></ha-circular-progress>
</div>` </div>`
: this._status === "choose_strategy" : this._status === "choose_strategy"
? html`<h3>Choose strategy</h3> ? html`<h3>Choose strategy</h3>
@ -288,7 +291,9 @@ class DialogZWaveJSAddNode extends LitElement {
"ui.panel.config.zwave_js.add_node.searching_device" "ui.panel.config.zwave_js.add_node.searching_device"
)} )}
</h3> </h3>
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress
indeterminate
></ha-circular-progress>
<p> <p>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.zwave_js.add_node.follow_device_instructions" "ui.panel.config.zwave_js.add_node.follow_device_instructions"
@ -304,7 +309,7 @@ class DialogZWaveJSAddNode extends LitElement {
)} )}
</h2> </h2>
<ha-circular-progress <ha-circular-progress
active indeterminate
></ha-circular-progress> ></ha-circular-progress>
<p> <p>
${this.hass.localize( ${this.hass.localize(
@ -358,7 +363,7 @@ class DialogZWaveJSAddNode extends LitElement {
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress <ha-circular-progress
active indeterminate
></ha-circular-progress> ></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>

2
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
View File

@ -97,7 +97,7 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
${this._status === "started" ${this._status === "started"
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>
${this.hass.localize( ${this.hass.localize(

2
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
View File

@ -68,7 +68,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
${this._status === "started" ${this._status === "started"
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>
<b> <b>

2
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
View File

@ -91,7 +91,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
${this._status === "started" ${this._status === "started"
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>
<b> <b>

2
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
View File

@ -71,7 +71,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
${this._status === "started" ${this._status === "started"
? html` ? html`
<div class="flex-container"> <div class="flex-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
<div class="status"> <div class="status">
<p> <p>
<b <b

4
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -171,7 +171,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
<div class="icon"> <div class="icon">
${this._status === "disconnected" ${this._status === "disconnected"
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
></ha-circular-progress>` ></ha-circular-progress>`
: html` : html`
<ha-svg-icon <ha-svg-icon
@ -457,7 +457,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
: html` : html`
<ha-circular-progress <ha-circular-progress
size="small" size="small"
active indeterminate
></ha-circular-progress> ></ha-circular-progress>
`} `}
</div> </div>

2
src/panels/config/logs/system-log-card.ts
View File

@ -97,7 +97,7 @@ export class SystemLogCard extends LitElement {
${this._items === undefined ${this._items === undefined
? html` ? html`
<div class="loading-container"> <div class="loading-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: html` : html`

2
src/panels/config/network/supervisor-hostname.ts
View File

@ -69,7 +69,7 @@ export class HassioHostname extends LitElement {
<div class="card-actions"> <div class="card-actions">
<mwc-button @click=${this._save} .disabled=${this._processing}> <mwc-button @click=${this._save} .disabled=${this._processing}>
${this._processing ${this._processing
? html`<ha-circular-progress active size="small"> ? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>` </ha-circular-progress>`
: this.hass.localize("ui.common.save")} : this.hass.localize("ui.common.save")}
</mwc-button> </mwc-button>

4
src/panels/config/network/supervisor-network.ts
View File

@ -126,7 +126,7 @@ export class HassioNetwork extends LitElement {
.disabled=${this._scanning} .disabled=${this._scanning}
> >
${this._scanning ${this._scanning
? html`<ha-circular-progress active size="small"> ? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>` </ha-circular-progress>`
: this.hass.localize( : this.hass.localize(
"ui.panel.config.network.supervisor.scan_ap" "ui.panel.config.network.supervisor.scan_ap"
@ -242,7 +242,7 @@ export class HassioNetwork extends LitElement {
<div class="card-actions"> <div class="card-actions">
<mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}> <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing ${this._processing
? html`<ha-circular-progress active size="small"> ? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>` </ha-circular-progress>`
: this.hass.localize("ui.common.save")} : this.hass.localize("ui.common.save")}
</mwc-button> </mwc-button>

7
src/panels/config/repairs/dialog-system-information.ts
View File

@ -304,7 +304,7 @@ class DialogSystemInformation extends LitElement {
if (!this._systemInfo) { if (!this._systemInfo) {
sections.push(html` sections.push(html`
<div class="loading-container"> <div class="loading-container">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
`); `);
} else { } else {
@ -324,7 +324,10 @@ class DialogSystemInformation extends LitElement {
if (info.type === "pending") { if (info.type === "pending") {
value = html` value = html`
<ha-circular-progress active size="tiny"></ha-circular-progress> <ha-circular-progress
indeterminate
size="tiny"
></ha-circular-progress>
`; `;
} else if (info.type === "failed") { } else if (info.type === "failed") {
value = html` value = html`

2
src/panels/config/script/blueprint-script-editor.ts
View File

@ -80,7 +80,7 @@ export class HaBlueprintScriptEditor extends LitElement {
: this.hass.localize( : this.hass.localize(
"ui.panel.config.automation.editor.blueprint.no_blueprints" "ui.panel.config.automation.editor.blueprint.no_blueprints"
) )
: html`<ha-circular-progress active></ha-circular-progress>`} : html`<ha-circular-progress indeterminate></ha-circular-progress>`}
</div> </div>
${this.config.use_blueprint.path ${this.config.use_blueprint.path

6
src/panels/config/storage/dialog-move-datadisk.ts
View File

@ -106,7 +106,11 @@ class MoveDatadiskDialog extends LitElement {
> >
${this._moving ${this._moving
? html` ? html`
<ha-circular-progress alt="Moving" size="large" active> <ha-circular-progress
aria-label="Moving"
size="large"
indeterminate
>
</ha-circular-progress> </ha-circular-progress>
<p class="progress-text"> <p class="progress-text">
${this.hass.localize( ${this.hass.localize(

2
src/panels/config/users/dialog-add-user.ts
View File

@ -194,7 +194,7 @@ export class DialogAddUser extends LitElement {
${this._loading ${this._loading
? html` ? html`
<div slot="primaryAction" class="submit-spinner"> <div slot="primaryAction" class="submit-spinner">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
: html` : html`

2
src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
View File

@ -90,7 +90,7 @@ const renderProgress = (
return html`❌`; return html`❌`;
} }
return html` return html`
<ha-circular-progress size="tiny" active></ha-circular-progress> <ha-circular-progress size="tiny" indeterminate></ha-circular-progress>
`; `;
} }

2
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@ -131,7 +131,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
let stats: TemplateResult; let stats: TemplateResult;
if (!this._stats5min || !this._statsHour) { if (!this._stats5min || !this._statsHour) {
stats = html`<ha-circular-progress active></ha-circular-progress>`; stats = html`<ha-circular-progress indeterminate></ha-circular-progress>`;
} else if (this._statsHour.length < 1 && this._stats5min.length < 1) { } else if (this._statsHour.length < 1 && this._stats5min.length < 1) {
stats = html`<p> stats = html`<p>
${this.hass.localize( ${this.hass.localize(

2
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -156,7 +156,7 @@ class HaPanelDevTemplate extends LitElement {
${this._rendering ${this._rendering
? html`<ha-circular-progress ? html`<ha-circular-progress
class="render-spinner" class="render-spinner"
active indeterminate
size="small" size="small"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}

2
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@ -77,7 +77,7 @@ export class DeveloperYamlConfig extends LitElement {
? html`<div ? html`<div
class="validate-container layout vertical center-center" class="validate-container layout vertical center-center"
> >
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> ` </div> `
: nothing : nothing
: html` : html`

5
src/panels/history/ha-panel-history.ts
View File

@ -193,10 +193,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
</div> </div>
${this._isLoading ${this._isLoading
? html`<div class="progress-wrapper"> ? html`<div class="progress-wrapper">
<ha-circular-progress <ha-circular-progress indeterminate></ha-circular-progress>
active
alt=${this.hass.localize("ui.common.loading")}
></ha-circular-progress>
</div>` </div>`
: !this._targetPickerValue : !this._targetPickerValue
? html`<div class="start-search"> ? html`<div class="start-search">

5
src/panels/logbook/ha-logbook.ts
View File

@ -107,10 +107,7 @@ export class HaLogbook extends LitElement {
if (this._logbookEntries === undefined) { if (this._logbookEntries === undefined) {
return html` return html`
<div class="progress-wrapper"> <div class="progress-wrapper">
<ha-circular-progress <ha-circular-progress indeterminate></ha-circular-progress>
active
alt=${this.hass.localize("ui.common.loading")}
></ha-circular-progress>
</div> </div>
`; `;
} }

2
src/panels/lovelace/cards/hui-starting-card.ts
View File

@ -46,7 +46,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
return html` return html`
<div class="content"> <div class="content">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
${this.hass.localize("ui.panel.lovelace.cards.starting.description")} ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
</div> </div>
`; `;

2
src/panels/lovelace/components/hui-image.ts
View File

@ -263,7 +263,7 @@ export class HuiImage extends LitElement {
> >
<ha-circular-progress <ha-circular-progress
class="render-spinner" class="render-spinner"
active indeterminate
size="small" size="small"
></ha-circular-progress> ></ha-circular-progress>
</div>` </div>`

5
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -142,8 +142,7 @@ export class HuiCardPicker extends LitElement {
html` html`
<div class="card spinner"> <div class="card spinner">
<ha-circular-progress <ha-circular-progress
active indeterminate
alt="Loading"
></ha-circular-progress> ></ha-circular-progress>
</div> </div>
` `
@ -238,7 +237,7 @@ export class HuiCardPicker extends LitElement {
this._renderCardElement(card), this._renderCardElement(card),
html` html`
<div class="card spinner"> <div class="card spinner">
<ha-circular-progress active alt="Loading"></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div> </div>
` `
)}`, )}`,

8
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -235,8 +235,8 @@ export class HuiDialogEditCard
${this._error ${this._error
? html` ? html`
<ha-circular-progress <ha-circular-progress
active indeterminate
alt="Can't update card" aria-label="Can't update card"
></ha-circular-progress> ></ha-circular-progress>
` `
: ``} : ``}
@ -271,8 +271,8 @@ export class HuiDialogEditCard
${this._saving ${this._saving
? html` ? html`
<ha-circular-progress <ha-circular-progress
active indeterminate
title="Saving" aria-label="Saving"
size="small" size="small"
></ha-circular-progress> ></ha-circular-progress>
` `

4
src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
View File

@ -110,8 +110,8 @@ export class HuiDialogSuggestCard extends LitElement {
${this._saving ${this._saving
? html` ? html`
<ha-circular-progress <ha-circular-progress
active indeterminate
title="Saving" aria-label="Saving"
size="small" size="small"
></ha-circular-progress> ></ha-circular-progress>
` `

4
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -132,9 +132,9 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
> >
${this._saving ${this._saving
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
title="Saving" aria-label="Saving"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}
${this.hass!.localize( ${this.hass!.localize(

3
src/panels/lovelace/editor/hui-element-editor.ts
View File

@ -207,8 +207,7 @@ export abstract class HuiElementEditor<T, C = any> extends LitElement {
${this._loading ${this._loading
? html` ? html`
<ha-circular-progress <ha-circular-progress
active indeterminate
alt="Loading"
class="center margin-bot" class="center margin-bot"
></ha-circular-progress> ></ha-circular-progress>
` `

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

@ -63,9 +63,9 @@ export class HuiDialogEditLovelace extends LitElement {
> >
${this._saving ${this._saving
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
title="Saving" aria-label="Saving"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}
${this.hass!.localize("ui.common.save")}</mwc-button ${this.hass!.localize("ui.common.save")}</mwc-button

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

@ -323,9 +323,9 @@ export class HuiDialogEditView extends LitElement {
> >
${this._saving ${this._saving
? html`<ha-circular-progress ? html`<ha-circular-progress
active indeterminate
size="small" size="small"
title="Saving" aria-label="Saving"
></ha-circular-progress>` ></ha-circular-progress>`
: ""} : ""}
${this.hass!.localize("ui.common.save")}</mwc-button ${this.hass!.localize("ui.common.save")}</mwc-button
@ -528,7 +528,7 @@ export class HuiDialogEditView extends LitElement {
ha-circular-progress { ha-circular-progress {
display: none; display: none;
} }
ha-circular-progress[active] { ha-circular-progress[indeterminate] {
display: block; display: block;
} }
.selected_menu_item { .selected_menu_item {

5
src/panels/lovelace/header-footer/hui-graph-header-footer.ts
View File

@ -111,7 +111,10 @@ export class HuiGraphHeaderFooter
if (!this._coordinates) { if (!this._coordinates) {
return html` return html`
<div class="container"> <div class="container">
<ha-circular-progress active size="small"></ha-circular-progress> <ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>
</div> </div>
`; `;
} }

2
src/panels/mailbox/ha-dialog-show-audio-message.ts
View File

@ -37,7 +37,7 @@ class HaDialogShowAudioMessage extends LitElement {
heading=${this.hass.localize("ui.panel.mailbox.playback_title")} heading=${this.hass.localize("ui.panel.mailbox.playback_title")}
> >
${this._loading ${this._loading
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress indeterminate></ha-circular-progress>`
: html`<div class="icon"> : html`<div class="icon">
<ha-icon-button id="delicon" @click=${this._openDeleteDialog}> <ha-icon-button id="delicon" @click=${this._openDeleteDialog}>
<ha-icon icon="hass:delete"></ha-icon> <ha-icon icon="hass:delete"></ha-icon>

7
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -168,7 +168,10 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
new Promise((resolve) => { new Promise((resolve) => {
setTimeout(resolve, 500); setTimeout(resolve, 500);
}).then( }).then(
() => html`<ha-circular-progress active></ha-circular-progress>` () =>
html`<ha-circular-progress
indeterminate
></ha-circular-progress>`
) )
)} )}
</div> </div>
@ -254,7 +257,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
: ""}" : ""}"
> >
${stateObj.state === "buffering" ${stateObj.state === "buffering"
? html`<ha-circular-progress active></ha-circular-progress>` ? html`<ha-circular-progress indeterminate></ha-circular-progress> `
: html` : html`
<div class="controls"> <div class="controls">
${controls === undefined ${controls === undefined

2
src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
View File

@ -83,7 +83,7 @@ class HaMfaModuleSetupFlow extends LitElement {
: ""} : ""}
${!this._step ${!this._step
? html`<div class="init-spinner"> ? html`<div class="init-spinner">
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div>` </div>`
: html`${this._step.type === "abort" : html`${this._step.type === "abort"
? html` <ha-markdown ? html` <ha-markdown

2
src/panels/profile/ha-change-password-card.ts
View File

@ -96,7 +96,7 @@ class HaChangePasswordCard extends LitElement {
<div class="card-actions"> <div class="card-actions">
${this._loading ${this._loading
? html`<div> ? html`<div>
<ha-circular-progress active></ha-circular-progress> <ha-circular-progress indeterminate></ha-circular-progress>
</div>` </div>`
: html`<mwc-button : html`<mwc-button
@click=${this._changePassword} @click=${this._changePassword}

823
yarn.lock
View File

File diff suppressed because it is too large Load Diff