Accessibility improvements for circular progress indicators (#18506)

demo/src/custom-cards/ha-demo-card.ts

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

gallery/src/pages/components/ha-circular-progress.markdown

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

gallery/src/pages/components/ha-circular-progress.ts

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

hassio/src/addon-view/config/hassio-addon-config-tab.ts

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

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

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

hassio/src/addon-view/info/hassio-addon-info-tab.ts

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

hassio/src/addon-view/log/hassio-addon-log-tab.ts

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

hassio/src/dialogs/backup/dialog-hassio-backup.ts

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

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

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

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -71,7 +71,11 @@ class HassioDatadiskDialog extends LitElement {
         ?hideActions=${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>
               <p class="progress-text">
                 ${this.dialogParams.supervisor.localize(

hassio/src/dialogs/network/dialog-hassio-network.ts

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

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

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

hassio/src/update-available/update-available-card.ts

@@ -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>
                   <p class="progress-text">
                     ${this.supervisor.localize("update_available.updating", {

package.json

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

src/components/buttons/ha-progress-button.ts

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

src/components/ha-circular-progress.ts

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

src/components/media-player/dialog-media-manage.ts

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

src/components/media-player/ha-media-player-browse.ts

@@ -332,7 +332,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
 
     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;

src/components/media-player/ha-media-upload-button.ts

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

src/dialogs/config-flow/step-flow-form.ts

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

src/dialogs/config-flow/step-flow-loading.ts

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

src/dialogs/config-flow/step-flow-progress.ts

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

src/dialogs/more-info/controls/more-info-configurator.ts

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

src/dialogs/more-info/controls/more-info-update.ts

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

src/dialogs/quick-bar/ha-quick-bar.ts

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

src/dialogs/restart/dialog-restart.ts

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

src/dialogs/tts-try/dialog-tts-try.ts

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

src/layouts/ha-init-page.ts

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

src/layouts/hass-loading-screen.ts

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

src/onboarding/onboarding-core-config.ts

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

src/onboarding/onboarding-location.ts

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

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

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

src/panels/config/automation/blueprint-automation-editor.ts

@@ -101,7 +101,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
               : this.hass.localize(
                   "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>
 
         ${this.config.use_blueprint.path

src/panels/config/backup/ha-config-backup.ts

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

src/panels/config/blueprint/dialog-import-blueprint.ts

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

src/panels/config/cloud/account/cloud-webhooks.ts

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

src/panels/config/dashboard/ha-config-updates.ts

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

src/panels/config/helpers/dialog-helper-detail.ts

@@ -164,7 +164,9 @@ export class DialogHelperDetail extends LitElement {
         </mwc-button>
       `;
     } 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 {
       const items: [string, string][] = [];
 

src/panels/config/integrations/dialog-add-integration.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

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

src/panels/config/logs/system-log-card.ts

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

src/panels/config/network/supervisor-hostname.ts

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

src/panels/config/network/supervisor-network.ts

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

src/panels/config/repairs/dialog-system-information.ts

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

src/panels/config/script/blueprint-script-editor.ts

@@ -80,7 +80,7 @@ export class HaBlueprintScriptEditor extends LitElement {
               : this.hass.localize(
                   "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>
 
         ${this.config.use_blueprint.path

src/panels/config/storage/dialog-move-datadisk.ts

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

src/panels/config/users/dialog-add-user.ts

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

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

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

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

@@ -131,7 +131,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
     let stats: TemplateResult;
 
     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) {
       stats = html`<p>
         ${this.hass.localize(

src/panels/developer-tools/template/developer-tools-template.ts

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

src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts

@@ -77,7 +77,7 @@ export class DeveloperYamlConfig extends LitElement {
                 ? html`<div
                     class="validate-container layout vertical center-center"
                   >
-                    <ha-circular-progress active></ha-circular-progress>
+                    <ha-circular-progress indeterminate></ha-circular-progress>
                   </div> `
                 : nothing
               : html`
@@ -94,7 +94,7 @@ export class DeveloperYamlConfig extends LitElement {
                               )
                         }
                     </div>
-                  
+
                     ${
                       this._validateResult.errors
                         ? html`<ha-alert

src/panels/history/ha-panel-history.ts

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

src/panels/logbook/ha-logbook.ts

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

src/panels/lovelace/cards/hui-starting-card.ts

@@ -46,7 +46,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <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")}
       </div>
     `;

src/panels/lovelace/components/hui-image.ts

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

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

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

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

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

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

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

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

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

src/panels/lovelace/editor/hui-element-editor.ts

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

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

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

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

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

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

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

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

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

src/panels/media-browser/ha-bar-media-player.ts

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

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

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

src/panels/profile/ha-change-password-card.ts

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