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

package/src/progress/LinearProgress.tsx

@@ -6,6 +6,7 @@ import {
   type HTMLAttributes,
 } from "react";
 import { cssUtils } from "../cssUtils.js";
+import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
@@ -15,7 +16,7 @@ import { type ProgressProps } from "./types.js";
  * @remarks \@since 6.0.0 Added the `theme` prop
  */
 export interface LinearProgressProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "id">,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">,
     ProgressProps {
   /**
    * An optional style to apply to the progress bar. This will be merged with
@@ -71,7 +72,7 @@ const styles = bem("rmd-linear-progress");
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <LinearProgress />;
+ *   return <LinearProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -85,105 +86,106 @@ const styles = bem("rmd-linear-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <LinearProgress value={progress} />;
+ *   return <LinearProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@since 6.0.0 Supports rendering as any of the theme colors and
+ * requires a label for accessibility.
  */
-export const LinearProgress = forwardRef<HTMLSpanElement, LinearProgressProps>(
-  function LinearProgress(props, ref) {
-    const {
-      id: propId,
-      style: propStyle,
-      className,
-      barStyle: propBarStyle,
-      barClassName,
-      min = 0,
-      max = 100,
-      value,
-      reverse = false,
-      theme = "primary",
-      disableTransition = false,
-      vertical = false,
-      verticalHeight = 240,
-      ...remaining
-    } = props;
+export const LinearProgress = forwardRef<
+  HTMLSpanElement,
+  LabelRequiredForA11y<LinearProgressProps>
+>(function LinearProgress(props, ref) {
+  const {
+    id: propId,
+    style: propStyle,
+    className,
+    barStyle: propBarStyle,
+    barClassName,
+    min = 0,
+    max = 100,
+    value,
+    reverse = false,
+    theme = "primary",
+    disableTransition = false,
+    vertical = false,
+    verticalHeight = 240,
+    ...remaining
+  } = props;
 
-    const id = useEnsuredId(propId, "linear-progress");
-    const style = useMemo(() => {
-      if (!vertical || verticalHeight === null) {
-        return propStyle;
-      }
+  const id = useEnsuredId(propId, "linear-progress");
+  const style = useMemo(() => {
+    if (!vertical || verticalHeight === null) {
+      return propStyle;
+    }
 
-      return {
-        ...propStyle,
-        height: verticalHeight,
-      };
-    }, [propStyle, vertical, verticalHeight]);
+    return {
+      ...propStyle,
+      height: verticalHeight,
+    };
+  }, [propStyle, vertical, verticalHeight]);
 
-    let progress: number | undefined;
-    if (typeof value === "number") {
-      progress = getPercentage({ min, max, value, validate: true });
+  let progress: number | undefined;
+  if (typeof value === "number") {
+    progress = getPercentage({ min, max, value, validate: true });
+  }
+  const barStyle = useMemo(() => {
+    if (typeof progress !== "number") {
+      return propBarStyle;
     }
-    const barStyle = useMemo(() => {
-      if (typeof progress !== "number") {
-        return propBarStyle;
-      }
 
-      const key = vertical ? "height" : "width";
-      return {
-        ...propBarStyle,
-        [key]: `${progress * 100}%`,
-      };
-    }, [progress, propBarStyle, vertical]);
+    const key = vertical ? "height" : "width";
+    return {
+      ...propBarStyle,
+      [key]: `${progress * 100}%`,
+    };
+  }, [progress, propBarStyle, vertical]);
 
-    const determinate = typeof progress === "number";
-    const indeterminate = !determinate;
-    return (
+  const determinate = typeof progress === "number";
+  const indeterminate = !determinate;
+  return (
+    <span
+      {...remaining}
+      id={id}
+      ref={ref}
+      style={style}
+      role="progressbar"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      className={cnb(
+        styles({
+          vertical,
+          horizontal: !vertical,
+          determinate,
+          indeterminate,
+        }),
+        theme !== "current-color" && cssUtils({ textColor: theme }),
+        className
+      )}
+    >
       <span
-        {...remaining}
-        id={id}
-        ref={ref}
-        style={style}
-        role="progressbar"
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={value}
+        style={barStyle}
         className={cnb(
-          styles({
+          styles("bar", {
             vertical,
+            "vertical-reverse": vertical && reverse,
             horizontal: !vertical,
+            "horizontal-reverse": !vertical && reverse,
+            animate: !disableTransition && determinate,
             determinate,
             indeterminate,
+            "determinate-reverse": determinate && reverse && !vertical,
+            "determinate-vertical-reverse": determinate && reverse && vertical,
+            "indeterminate-reverse": indeterminate && reverse && !vertical,
+            "indeterminate-vertical": indeterminate && vertical,
+            "indeterminate-vertical-reverse":
+              indeterminate && reverse && vertical,
           }),
-          theme !== "current-color" && cssUtils({ textColor: theme }),
-          className
+          barClassName
         )}
-      >
-        <span
-          style={barStyle}
-          className={cnb(
-            styles("bar", {
-              vertical,
-              "vertical-reverse": vertical && reverse,
-              horizontal: !vertical,
-              "horizontal-reverse": !vertical && reverse,
-              animate: !disableTransition && determinate,
-              determinate,
-              indeterminate,
-              "determinate-reverse": determinate && reverse && !vertical,
-              "determinate-vertical-reverse":
-                determinate && reverse && vertical,
-              "indeterminate-reverse": indeterminate && reverse && !vertical,
-              "indeterminate-vertical": indeterminate && vertical,
-              "indeterminate-vertical-reverse":
-                indeterminate && reverse && vertical,
-            }),
-            barClassName
-          )}
-        />
-      </span>
-    );
-  }
-);
+      />
+    </span>
+  );
+});

package/src/progress/__tests__/CircularProgress.tsx

@@ -8,12 +8,13 @@ describe("CircularProgress", () => {
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const ref = createRef<HTMLSpanElement>();
     const props = {
+      "aria-label": "Progressbar",
       ref,
     } as const;
 
     const { rerender } = render(<CircularProgress {...props} />);
 
-    const element = screen.getByRole("progressbar");
+    const element = screen.getByRole("progressbar", { name: "Progressbar" });
 
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(element);
@@ -48,84 +49,105 @@ describe("CircularProgress", () => {
   });
 
   it("should allow the id to be overridden", () => {
-    render(<CircularProgress id="custom-id" />);
-    const progress = screen.getByRole("progressbar");
+    render(<CircularProgress id="custom-id" aria-label="Progressbar" />);
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toHaveAttribute("id", "custom-id");
   });
 
   it("should default to being centered but can be removed by enabling the disableCentered prop", () => {
-    const { rerender } = render(<CircularProgress />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(<CircularProgress aria-label="Progressbar" />);
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress disableCentered />);
+    rerender(<CircularProgress aria-label="Progressbar" disableCentered />);
     expect(progress).toMatchSnapshot();
   });
 
   it("should be able to render as a dense size", () => {
-    const { getByRole, rerender } = render(<CircularProgress dense />);
-    const progress = getByRole("progressbar");
+    const { rerender } = render(
+      <CircularProgress aria-label="Progressbar" dense />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress dense disableCentered />);
+    rerender(
+      <CircularProgress aria-label="Progressbar" dense disableCentered />
+    );
     expect(progress).toMatchSnapshot();
   });
 
   it("should render as a determinate progress bar when the value is provided", () => {
-    const { rerender } = render(<CircularProgress value={30} />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <CircularProgress aria-label="Progressbar" value={30} />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toHaveAttribute("aria-valuenow", "30");
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress value={50} />);
+    rerender(<CircularProgress aria-label="Progressbar" value={50} />);
     expect(progress).toHaveAttribute("aria-valuenow", "50");
     expect(progress).toMatchSnapshot();
   });
 
   it("should allow the transition to be disabled for determinate progress bars", () => {
     const { rerender } = render(
-      <CircularProgress value={30} disableTransition />
+      <CircularProgress aria-label="Progressbar" value={30} disableTransition />
     );
-    const progress = screen.getByRole("progressbar");
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress disableTransition />);
+    rerender(<CircularProgress aria-label="Progressbar" disableTransition />);
     expect(progress).toMatchSnapshot();
   });
 
   it("should allow the animation to be simplified when the disableShrink prop is enabled", () => {
-    const { rerender } = render(<CircularProgress disableShrink />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <CircularProgress aria-label="Progressbar" disableShrink />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress disableShrink value={100} />);
+    rerender(
+      <CircularProgress aria-label="Progressbar" disableShrink value={100} />
+    );
     expect(progress).toMatchSnapshot();
   });
 
   it("should be able to render as any of the theme colors", () => {
-    const { rerender } = render(<CircularProgress theme="primary" />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <CircularProgress aria-label="Progressbar" theme="primary" />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress theme="secondary" />);
+    rerender(<CircularProgress aria-label="Progressbar" theme="secondary" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress theme="warning" />);
+    rerender(<CircularProgress aria-label="Progressbar" theme="warning" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress theme="success" />);
+    rerender(<CircularProgress aria-label="Progressbar" theme="success" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress theme="error" />);
+    rerender(<CircularProgress aria-label="Progressbar" theme="error" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<CircularProgress theme="current-color" />);
+    rerender(
+      <CircularProgress aria-label="Progressbar" theme="current-color" />
+    );
     expect(progress).toMatchSnapshot();
   });
 
   it("should support customizing the svg through the radio, center, and dashoffset props even though I don't know what they do", () => {
-    render(<CircularProgress dashoffset={100} center={20} radius={5} />);
-    const progress = screen.getByRole("progressbar");
+    render(
+      <CircularProgress
+        aria-label="Progressbar"
+        dashoffset={100}
+        center={20}
+        radius={5}
+      />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
   });
 });

package/src/progress/__tests__/LinearProgress.tsx

@@ -8,12 +8,13 @@ describe("LinearProgress", () => {
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const ref = createRef<HTMLSpanElement>();
     const props = {
+      "aria-label": "Progressbar",
       ref,
     } as const;
 
     const { rerender } = render(<LinearProgress {...props} />);
 
-    const element = screen.getByRole("progressbar");
+    const element = screen.getByRole("progressbar", { name: "Progressbar" });
 
     expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     expect(ref.current).toBe(element);
@@ -39,78 +40,92 @@ describe("LinearProgress", () => {
   });
 
   it("should allow the id to be overridden", () => {
-    render(<LinearProgress id="custom-id" />);
-    const progress = screen.getByRole("progressbar");
+    render(<LinearProgress aria-label="Progressbar" id="custom-id" />);
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toHaveAttribute("id", "custom-id");
   });
 
   it("should be able to render vertically", () => {
-    const { rerender } = render(<LinearProgress vertical />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <LinearProgress aria-label="Progressbar" vertical />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress vertical verticalHeight={null} />);
+    rerender(
+      <LinearProgress aria-label="Progressbar" vertical verticalHeight={null} />
+    );
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress vertical verticalHeight={500} />);
+    rerender(
+      <LinearProgress aria-label="Progressbar" vertical verticalHeight={500} />
+    );
     expect(progress).toMatchSnapshot();
   });
 
   it("should be able to reverse the animation by enabling the reverse prop", () => {
-    const { rerender } = render(<LinearProgress reverse />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <LinearProgress aria-label="Progressbar" reverse />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress reverse vertical />);
+    rerender(<LinearProgress aria-label="Progressbar" reverse vertical />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress reverse value={50} />);
+    rerender(<LinearProgress aria-label="Progressbar" reverse value={50} />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress reverse value={50} vertical />);
+    rerender(
+      <LinearProgress aria-label="Progressbar" reverse value={50} vertical />
+    );
     expect(progress).toMatchSnapshot();
   });
 
   it("should render as a determinate progress bar when the value is provided", () => {
-    const { rerender } = render(<LinearProgress value={30} />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <LinearProgress aria-label="Progressbar" value={30} />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toHaveAttribute("aria-valuenow", "30");
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress value={50} />);
+    rerender(<LinearProgress aria-label="Progressbar" value={50} />);
     expect(progress).toHaveAttribute("aria-valuenow", "50");
     expect(progress).toMatchSnapshot();
   });
 
   it("should allow the transition to be disabled for determinate progress bars", () => {
     const { rerender } = render(
-      <LinearProgress value={30} disableTransition />
+      <LinearProgress aria-label="Progressbar" value={30} disableTransition />
     );
-    const progress = screen.getByRole("progressbar");
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress disableTransition />);
+    rerender(<LinearProgress aria-label="Progressbar" disableTransition />);
     expect(progress).toMatchSnapshot();
   });
 
   it("should be able to render as any of the theme colors", () => {
-    const { rerender } = render(<LinearProgress theme="primary" />);
-    const progress = screen.getByRole("progressbar");
+    const { rerender } = render(
+      <LinearProgress aria-label="Progressbar" theme="primary" />
+    );
+    const progress = screen.getByRole("progressbar", { name: "Progressbar" });
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress theme="secondary" />);
+    rerender(<LinearProgress aria-label="Progressbar" theme="secondary" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress theme="warning" />);
+    rerender(<LinearProgress aria-label="Progressbar" theme="warning" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress theme="success" />);
+    rerender(<LinearProgress aria-label="Progressbar" theme="success" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress theme="error" />);
+    rerender(<LinearProgress aria-label="Progressbar" theme="error" />);
     expect(progress).toMatchSnapshot();
 
-    rerender(<LinearProgress theme="current-color" />);
+    rerender(<LinearProgress aria-label="Progressbar" theme="current-color" />);
     expect(progress).toMatchSnapshot();
   });
 });

package/src/progress/__tests__/__snapshots__/CircularProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -24,6 +25,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="100"
@@ -48,6 +50,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -72,6 +75,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -95,6 +99,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -117,6 +122,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color custom-class-name"
@@ -140,6 +146,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -164,6 +171,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -189,6 +197,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should be able to render as a dense size 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color"
@@ -211,6 +220,7 @@ exports[`CircularProgress should be able to render as a dense size 1`] = `
 
 exports[`CircularProgress should be able to render as a dense size 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-primary-color"
@@ -233,6 +243,7 @@ exports[`CircularProgress should be able to render as a dense size 2`] = `
 
 exports[`CircularProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -255,6 +266,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 1`
 
 exports[`CircularProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-secondary-color"
@@ -277,6 +289,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 2`
 
 exports[`CircularProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-warning-color"
@@ -299,6 +312,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 3`
 
 exports[`CircularProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-success-color"
@@ -321,6 +335,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 4`
 
 exports[`CircularProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-error-color"
@@ -343,6 +358,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 5`
 
 exports[`CircularProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered"
@@ -365,6 +381,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 6`
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -387,6 +404,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-primary-color"
@@ -409,6 +427,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -433,6 +452,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -457,6 +477,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should support customizing the svg through the radio, center, and dashoffset props even though I don't know what they do 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"