@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/badge/_badge.scss

@@ -22,50 +22,91 @@ $typography: map.merge(
   )
 ) !default;
 
-$greyscale-background-color: rgba(colors.$black, 0.2) !default;
-$greyscale-color: a11y.contrast-color($greyscale-background-color) !default;
+$light-theme-greyscale-background-color: #ccc !default;
+$light-theme-greyscale-color: a11y.contrast-color(
+  $light-theme-greyscale-background-color
+) !default;
+$dark-theme-greyscale-background-color: colors.$grey-700 !default;
+$dark-theme-greyscale-color: a11y.contrast-color(
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-background-color: theme.get-default-color(
+  $light-theme-greyscale-background-color,
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-color: theme.get-default-color(
+  $light-theme-greyscale-color,
+  $dark-theme-greyscale-color
+) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-badge-size,
-    value: $size,
-  ),
-  offset: (
-    var: --rmd-badge-offset,
-    value: 0,
-  ),
-  offset-top: (
-    var: --rmd-badge-offset-top,
-    value: var(--rmd-badge-offset, $offset-top),
-  ),
-  offset-right: (
-    var: --rmd-badge-offset-right,
-    value: var(--rmd-badge-offset, $offset-right),
-  ),
+$variables: (
+  greyscale-background-color,
+  greyscale-color,
+  size,
+  offset,
+  offset-top,
+  offset-right
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "badge var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "badge");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "badge var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "badge")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin use-light-theme {
+  @if $light-theme-greyscale-background-color !=
+    $dark-theme-greyscale-background-color
+  {
+    @include set-var(
+      greyscale-background-color,
+      $light-theme-greyscale-background-color
+    );
+  }
+  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  }
+}
+
+@mixin use-dark-theme {
+  @if $light-theme-greyscale-background-color !=
+    $dark-theme-greyscale-background-color
+  {
+    @include set-var(
+      greyscale-background-color,
+      $dark-theme-greyscale-background-color
+    );
+  }
+
+  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+  }
+}
+
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(greyscale-background-color, $greyscale-background-color);
+    @include set-var(greyscale-color, $greyscale-color);
+    @include set-var(size, $size);
+    @include set-var(offset, 0);
+    @include set-var(offset-top, get-var(offset));
+    @include set-var(offset-right, get-var(offset));
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-badge {
@@ -84,22 +125,8 @@ $var-lookup: (
 
       @if not $disable-greyscale-theme {
         &--greyscale {
-          background-color: $greyscale-background-color;
-          color: $greyscale-color;
-        }
-      }
-
-      @if not $disable-primary-theme {
-        &--primary {
-          @include theme.theme-use-var(background-color, primary-color);
-          @include theme.theme-use-var(color, on-primary-color);
-        }
-      }
-
-      @if not $disable-secondary-theme {
-        &--secondary {
-          @include theme.theme-use-var(background-color, secondary-color);
-          @include theme.theme-use-var(color, on-secondary-color);
+          @include use-var(background-color, greyscale-background-color);
+          @include use-var(color, greyscale-color);
         }
       }
     }

package/src/box/_box.scss

@@ -33,41 +33,21 @@ $item-min-size: 8rem !default;
 /// ```
 $grids: () !default;
 
-$var-lookup: (
-  gap: (
-    var: --rmd-box-gap,
-    value: $gap,
-  ),
-  padding: (
-    var: --rmd-box-padding,
-    value: $padding,
-  ),
-  min-size: (
-    var: --rmd-box-item-min-size,
-    value: $item-min-size,
-  ),
-  columns: (
-    var: --rmd-box-columns,
-    value: auto-fit,
-  ),
-);
+$variables: (gap, padding, item-min-size, columns);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "box var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "box");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "box var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "box")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -94,6 +74,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(gap, $gap);
+    @include set-var(padding, $padding);
+    @include set-var(item-min-size, $item-min-size);
+    @include set-var(columns, auto-fit);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-box {
@@ -149,7 +138,7 @@ $var-lookup: (
           display: grid;
           grid-template-columns: repeat(
             get-var(columns),
-            minmax(get-var(min-size), 1fr)
+            minmax(get-var(item-min-size), 1fr)
           );
         }
 
@@ -159,7 +148,7 @@ $var-lookup: (
 
         @if not $disable-grid-columns {
           &--grid-columns {
-            @include set-var(min-size, 0);
+            @include set-var(item-min-size, 0);
           }
         }
 

package/src/button/AsyncButton.tsx

@@ -3,10 +3,18 @@ import { cnb } from "cnbuilder";
 import { forwardRef, type MouseEvent, type ReactNode } from "react";
 import { type BoxAlignItems } from "../box/styles.js";
 import { overlay } from "../overlay/overlayStyles.js";
-import { CircularProgress } from "../progress/CircularProgress.js";
-import { LinearProgress } from "../progress/LinearProgress.js";
+import {
+  CircularProgress,
+  type CircularProgressProps,
+} from "../progress/CircularProgress.js";
+import {
+  LinearProgress,
+  type LinearProgressProps,
+} from "../progress/LinearProgress.js";
 import { type ProgressTheme } from "../progress/types.js";
+import { type PropsWithRef } from "../types.js";
 import { useAsyncAction } from "../useAsyncAction.js";
+import { useEnsuredId } from "../useEnsuredId.js";
 import { Button, type ButtonProps } from "./Button.js";
 
 const noop = (): void => {
@@ -27,6 +35,12 @@ export type AsyncButtonLoadingType =
  * @remarks \@since 6.0.0
  */
 export interface AsyncButtonProps extends ButtonProps {
+  /**
+   * @see {@link progressAriaLabelledBy}
+   * @defaultValue `"async-button" + useId()`
+   */
+  id?: string;
+
   /**
    * When this is defined and returns a `Promise`, the loading indicator will
    * display until the promise has resolved.
@@ -88,6 +102,31 @@ export interface AsyncButtonProps extends ButtonProps {
    * the button, and the loading indicator should replace the icon.
    */
   afterAddon?: ReactNode;
+
+  /**
+   * An optional label to provide to the progressbar.
+   *
+   * @see {@link progressAriaLabelledBy}
+   */
+  progressAriaLabel?: string;
+
+  /**
+   * @see {@link id}
+   * @defaultValue `id`
+   */
+  progressAriaLabelledBy?: string;
+
+  /**
+   * Any additional props to pass to the `CircularProgress` bar when the
+   * {@link loadingType} is one of the circular types.
+   */
+  linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;
+
+  /**
+   * Any additional props to pass to the `LinearProgress` bar when the
+   * {@link loadingType} is one of the linear types.
+   */
+  circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;
 }
 
 /**
@@ -155,6 +194,7 @@ export interface AsyncButtonProps extends ButtonProps {
 export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
   function AsyncButton(props, ref) {
     const {
+      id: propId,
       onClick = noop,
       children,
       floating = null,
@@ -169,8 +209,13 @@ export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
       loadingDisabledTheme = false,
       afterAddon: propAfterAddon,
       beforeAddon: propBeforeAddon,
+      linearProgressProps,
+      circularProgressProps,
+      progressAriaLabel,
+      progressAriaLabelledBy: propProgressAriaLabelledBy,
       ...remaining
     } = props;
+    const id = useEnsuredId(propId, "async-button");
     const { handleAsync, pending } = useAsyncAction({ disabled });
     const loading = pending || propLoading;
 
@@ -179,10 +224,31 @@ export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
       progressTheme = "primary";
     }
 
+    let progressAriaLabelledBy = propProgressAriaLabelledBy;
+    if (
+      !progressAriaLabel &&
+      !linearProgressProps?.["aria-label"] &&
+      !linearProgressProps?.["aria-labelledby"] &&
+      !circularProgressProps?.["aria-label"] &&
+      !circularProgressProps?.["aria-labelledby"]
+    ) {
+      progressAriaLabelledBy = id;
+    }
+
     const progress = loadingType.includes("linear") ? (
-      <LinearProgress theme={progressTheme} />
+      <LinearProgress
+        aria-label={progressAriaLabel}
+        aria-labelledby={progressAriaLabelledBy as string}
+        {...linearProgressProps}
+        theme={progressTheme}
+      />
     ) : (
-      <CircularProgress theme={progressTheme} />
+      <CircularProgress
+        aria-label={progressAriaLabel}
+        aria-labelledby={progressAriaLabelledBy as string}
+        {...circularProgressProps}
+        theme={progressTheme}
+      />
     );
 
     let afterAddon = propAfterAddon;
@@ -228,6 +294,7 @@ export const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
       <Button
         {...remaining}
         aria-disabled={loading || undefined}
+        id={id}
         ref={ref}
         disabled={disabled}
         floating={floating}

package/src/button/__tests__/AsyncButton.tsx

@@ -69,6 +69,8 @@ describe("AsyncButton", () => {
     });
     await waitFor(() => {
       expect(button).not.toHaveAttribute("aria-disabled");
+    });
+    await waitFor(() => {
       expect(button).not.toHaveAttribute("disabled");
     });
     expect(() => within(button).getByRole("progressbar")).toThrow();

package/src/button/__tests__/Button.tsx

@@ -18,9 +18,9 @@ describe("Button", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByRole, rerender } = render(<Button {...props} />);
+    const { rerender } = render(<Button {...props} />);
 
-    const button = getByRole("button", { name: "Content" });
+    const button = screen.getByRole("button", { name: "Content" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(button);
     expect(button).toMatchSnapshot();
@@ -39,9 +39,9 @@ describe("Button", () => {
     const higherContrastMock = jest
       .spyOn(INTERACTION_CONFIG, "higherContrast", "get")
       .mockReturnValue(false);
-    const { getByRole, rerender } = render(<Button>Content</Button>);
+    const { rerender } = render(<Button>Content</Button>);
 
-    const button = getByRole("button", { name: "Content" });
+    const button = screen.getByRole("button", { name: "Content" });
     expect(button).toMatchSnapshot();
 
     rerender(
@@ -70,8 +70,8 @@ describe("Button", () => {
       "contained",
     ];
 
-    const { getByRole, rerender } = render(<Button>Content</Button>);
-    const button = getByRole("button");
+    const { rerender } = render(<Button>Content</Button>);
+    const button = screen.getByRole("button");
     expect(button).toMatchSnapshot();
 
     buttonTypes.forEach((buttonType) => {
@@ -91,12 +91,12 @@ describe("Button", () => {
 
   it("should not fire the onClick event handler when the theme is set to disabled", () => {
     const onClick = jest.fn();
-    const { getByRole } = render(
+    render(
       <Button onClick={onClick} theme="disabled">
         Button
       </Button>
     );
-    const button = getByRole("button");
+    const button = screen.getByRole("button");
 
     fireEvent.click(button);
     expect(onClick).not.toHaveBeenCalled();
@@ -104,11 +104,11 @@ describe("Button", () => {
 
   describe("floating action buttons", () => {
     it("should default to a secondary themed contained icon button if the floating behavior is enabled", () => {
-      const { getByRole, rerender } = render(
+      const { rerender } = render(
         <Button aria-label="Button" floating="bottom-right" />
       );
 
-      const button = getByRole("button", { name: "Button" });
+      const button = screen.getByRole("button", { name: "Button" });
       expect(button).toHaveClass("rmd-button--icon");
       expect(button.parentElement).toHaveClass("rmd-fab");
       expect(button.parentElement).toMatchSnapshot();
@@ -147,7 +147,7 @@ describe("Button", () => {
 
     it("should allow for custom props to be passed to the wrapper span element", () => {
       const ref = createRef<HTMLSpanElement>();
-      const { getByRole } = render(
+      render(
         <Button
           aria-label="Button"
           floating="bottom-left"
@@ -159,7 +159,7 @@ describe("Button", () => {
         />
       );
 
-      const button = getByRole("button", { name: "Button" });
+      const button = screen.getByRole("button", { name: "Button" });
       const fab = button.parentElement;
       expect(ref.current).toBeInstanceOf(HTMLSpanElement);
       expect(ref.current).toBe(fab);

package/src/button/__tests__/ButtonUnstyled.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "@jest/globals";
 import { createRef } from "react";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
 import { ButtonUnstyled } from "../ButtonUnstyled.js";
 import { buttonUnstyled } from "../buttonUnstyledStyles.js";
@@ -12,9 +12,9 @@ describe("ButtonUnstyled", () => {
       ref,
       children: "Content",
     } as const;
-    const { getByRole, rerender } = render(<ButtonUnstyled {...props} />);
+    const { rerender } = render(<ButtonUnstyled {...props} />);
 
-    const button = getByRole("button", { name: "Content" });
+    const button = screen.getByRole("button", { name: "Content" });
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
     expect(ref.current).toBe(button);
     expect(button).toMatchSnapshot();

package/src/button/__tests__/__snapshots__/AsyncButton.tsx.snap

@@ -3,6 +3,7 @@
 exports[`AsyncButton should allow for custom children to be displayed only while loading 1`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:re:"
   type="button"
 >
   <span
@@ -27,6 +28,7 @@ exports[`AsyncButton should allow for custom children to be displayed only while
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async rmd-button--async-overlay"
+  id="async-button-:re:"
   type="button"
 >
   <span
@@ -48,10 +50,11 @@ exports[`AsyncButton should allow for custom children to be displayed only while
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:re:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
-      id="circular-progress-:r8:"
+      id="circular-progress-:rf:"
       role="progressbar"
     >
       <svg
@@ -73,6 +76,7 @@ exports[`AsyncButton should allow for custom children to be displayed only while
 exports[`AsyncButton should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:r0:"
   type="button"
 >
   <span>
@@ -84,6 +88,7 @@ exports[`AsyncButton should apply the correct styling, HTMLAttributes, and allow
 exports[`AsyncButton should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async custom-class-name"
+  id="async-button-:r0:"
   style="color: white;"
   type="button"
 >
@@ -96,6 +101,7 @@ exports[`AsyncButton should apply the correct styling, HTMLAttributes, and allow
 exports[`AsyncButton should be able to render a circular progress bar before or after and replacing the optional addon 1`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:rb:"
   type="button"
 >
   <span
@@ -120,13 +126,15 @@ exports[`AsyncButton should be able to render a circular progress bar before or
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:rb:"
   type="button"
 >
   <span
+    aria-labelledby="async-button-:rb:"
     aria-valuemax="100"
     aria-valuemin="0"
     class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
-    id="circular-progress-:r6:"
+    id="circular-progress-:rc:"
     role="progressbar"
   >
     <svg
@@ -156,6 +164,7 @@ exports[`AsyncButton should be able to render a circular progress bar before or
 exports[`AsyncButton should be able to render a circular progress bar before or after and replacing the optional addon 3`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:rb:"
   type="button"
 >
   <span
@@ -180,6 +189,7 @@ exports[`AsyncButton should be able to render a circular progress bar before or
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:rb:"
   type="button"
 >
   <span
@@ -192,10 +202,11 @@ exports[`AsyncButton should be able to render a circular progress bar before or
     Button
   </span>
   <span
+    aria-labelledby="async-button-:rb:"
     aria-valuemax="100"
     aria-valuemin="0"
     class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
-    id="circular-progress-:r7:"
+    id="circular-progress-:rd:"
     role="progressbar"
   >
     <svg
@@ -216,6 +227,7 @@ exports[`AsyncButton should be able to render a circular progress bar before or
 exports[`AsyncButton should default to using the same theme while loading but can use the disabled theme by enabling the loadingDisabledTheme prop 1`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:rj:"
   type="button"
 >
   <span>
@@ -228,6 +240,7 @@ exports[`AsyncButton should default to using the same theme while loading but ca
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-button--disabled rmd-text-disabled-color rmd-interaction-surface rmd-button--async rmd-button--async-overlay"
+  id="async-button-:rj:"
   type="button"
 >
   <span>
@@ -237,10 +250,11 @@ exports[`AsyncButton should default to using the same theme while loading but ca
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:rj:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
-      id="circular-progress-:rb:"
+      id="circular-progress-:rk:"
       role="progressbar"
     >
       <svg
@@ -262,6 +276,7 @@ exports[`AsyncButton should default to using the same theme while loading but ca
 exports[`AsyncButton should render a progressbar until the onClick's promise has been resolved if it returns a promise 1`] = `
 <button
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:r1:"
   type="button"
 >
   <span>
@@ -274,6 +289,7 @@ exports[`AsyncButton should render a progressbar until the onClick's promise has
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async rmd-button--async-overlay"
+  id="async-button-:r1:"
   type="button"
 >
   <span>
@@ -283,10 +299,11 @@ exports[`AsyncButton should render a progressbar until the onClick's promise has
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:r1:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
-      id="circular-progress-:r0:"
+      id="circular-progress-:r2:"
       role="progressbar"
     >
       <svg
@@ -309,6 +326,7 @@ exports[`AsyncButton should should be able to render a linear progress bar above
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:r9:"
   type="button"
 >
   <span>
@@ -318,10 +336,11 @@ exports[`AsyncButton should should be able to render a linear progress bar above
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-start rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:r9:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
-      id="linear-progress-:r5:"
+      id="linear-progress-:ra:"
       role="progressbar"
     >
       <span
@@ -336,6 +355,7 @@ exports[`AsyncButton should should be able to render a linear progress bar above
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--text rmd-interaction-surface rmd-button--async"
+  id="async-button-:r9:"
   type="button"
 >
   <span>
@@ -345,10 +365,11 @@ exports[`AsyncButton should should be able to render a linear progress bar above
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-end rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:r9:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
-      id="linear-progress-:r5:"
+      id="linear-progress-:ra:"
       role="progressbar"
     >
       <span
@@ -363,6 +384,7 @@ exports[`AsyncButton should use the current-color as the progress bar's color wh
 <button
   aria-disabled="true"
   class="rmd-button rmd-button--icon rmd-button--contained rmd-background-container rmd-secondary-container rmd-interaction-surface rmd-button--async rmd-button--async-overlay"
+  id="async-button-:rg:"
   type="button"
 >
   <span>
@@ -372,10 +394,11 @@ exports[`AsyncButton should use the current-color as the progress bar's color wh
     class="rmd-overlay rmd-overlay--active rmd-overlay--visible rmd-overlay--absolute rmd-box rmd-box--wrap rmd-box--align-center rmd-box--justify-center"
   >
     <span
+      aria-labelledby="async-button-:rg:"
       aria-valuemax="100"
       aria-valuemin="0"
       class="rmd-circular-progress rmd-circular-progress--centered"
-      id="circular-progress-:ra:"
+      id="circular-progress-:ri:"
       role="progressbar"
     >
       <svg