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

package/src/menu/__tests__/MenuBar.tsx

@@ -4,11 +4,13 @@ import {
   act,
   fireEvent,
   rmdRender,
+  screen,
   userEvent,
   waitFor,
   within,
 } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { DropdownMenu } from "../DropdownMenu.js";
 import { MenuBar } from "../MenuBar.js";
 import { MenuItem } from "../MenuItem.js";
@@ -61,58 +63,63 @@ function Test(props: TestProps): ReactElement {
 describe("MenuBar", () => {
   beforeEach(() => {
     jest.useRealTimers();
+    TRANSITION_CONFIG.disabled = false;
   });
 
   it("should support a click-first hover mode behavior by default", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
     expect(menubarItems).toHaveLength(4);
     expect(menubar).toMatchSnapshot();
 
     await user.hover(menubarItems[0]);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     await user.unhover(menubarItems[0]);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     await user.click(menubarItems[1]);
     await waitFor(() => {
-      const menu = getByRole("menu", { name: "Style" });
+      const menu = screen.getByRole("menu", { name: "Style" });
       expect(menu).not.toHaveClass("rmd-scale-transition--enter");
     });
 
     await user.hover(menubarItems[2]);
     await waitFor(() => {
-      expect(() => getByRole("menu", { name: "Style" })).toThrow();
-      expect(() => getByRole("menu", { name: "Text Align" })).not.toThrow();
+      expect(() => screen.getByRole("menu", { name: "Style" })).toThrow();
+    });
+    await waitFor(() => {
+      expect(() =>
+        screen.getByRole("menu", { name: "Text Align" })
+      ).not.toThrow();
     });
 
     await user.click(document.body);
     await waitFor(() => {
-      expect(() => getByRole("menu")).toThrow();
+      expect(() => screen.getByRole("menu")).toThrow();
     });
   });
 
   it("should support immediate hover mode behavior by setting the hoverTimeout to 0", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test hoverTimeout={0} />);
-    const item1 = getByRole("menuitem", { name: "Font" });
-    const item4 = getByRole("menuitem", { name: "Size" });
+    rmdRender(<Test hoverTimeout={0} />);
+    const item1 = screen.getByRole("menuitem", { name: "Font" });
+    const item4 = screen.getByRole("menuitem", { name: "Size" });
 
     await user.hover(item1);
     // added timeouts to these since it might fail when running in watch mode
     // with a lot of tests
     await waitFor(
       () => {
-        expect(() => getByRole("menu", { name: "Font" })).not.toThrow();
+        expect(() => screen.getByRole("menu", { name: "Font" })).not.toThrow();
       },
       { timeout: 10 }
     );
     await waitFor(() => {
-      expect(getByRole("menu", { name: "Font" })).not.toHaveClass(
+      expect(screen.getByRole("menu", { name: "Font" })).not.toHaveClass(
         "rmd-scale-transition--enter"
       );
     });
@@ -120,77 +127,79 @@ describe("MenuBar", () => {
     await user.hover(item4);
     await waitFor(
       () => {
-        expect(() => getByRole("menu", { name: "Size" })).not.toThrow();
+        expect(() => screen.getByRole("menu", { name: "Size" })).not.toThrow();
       },
       { timeout: 10 }
     );
     await user.click(document.body);
     await waitFor(() => {
-      expect(() => getByRole("menu")).toThrow();
+      expect(() => screen.getByRole("menu")).toThrow();
     });
   });
 
   it("should support a custom hover timeout to start the hover mode", () => {
     jest.useFakeTimers();
-    const { getByRole } = rmdRender(<Test hoverTimeout={1000} />);
+    rmdRender(<Test hoverTimeout={1000} />);
 
-    const font = getByRole("menuitem", { name: "Font" });
-    const style = getByRole("menuitem", { name: "Style" });
+    const font = screen.getByRole("menuitem", { name: "Font" });
+    const style = screen.getByRole("menuitem", { name: "Style" });
     fireEvent.mouseEnter(font);
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
 
     act(() => {
       jest.advanceTimersByTime(800);
     });
-    expect(() => getByRole("menu")).toThrow();
+    expect(() => screen.getByRole("menu")).toThrow();
     act(() => {
       jest.advanceTimersByTime(200);
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     fireEvent.mouseLeave(font);
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
 
     fireEvent.mouseEnter(style);
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
     act(() => {
       jest.runAllTimers();
     });
-    expect(() => getByRole("menu")).not.toThrow();
+    expect(() => screen.getByRole("menu")).not.toThrow();
     // animates into the new menu
-    expect(() => getByRole("menuitem", { name: "Bold" })).not.toThrow();
+    expect(() => screen.getByRole("menuitem", { name: "Bold" })).not.toThrow();
   });
 
   it("should open nested dropdown menus immediately on hover", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
 
     await user.click(menubarItems[3]);
     await waitFor(() => {
-      const menu = getByRole("menu", { name: "Size" });
+      const menu = screen.getByRole("menu", { name: "Size" });
       expect(menu).not.toHaveClass("rmd-scale-transition--enter");
     });
 
-    await user.hover(getByRole("menuitem", { name: "Submenu" }));
+    await user.hover(screen.getByRole("menuitem", { name: "Submenu" }));
     await waitFor(() => {
-      expect(getByRole("menuitem", { name: "Item 1" })).toBeInTheDocument();
+      expect(
+        screen.getByRole("menuitem", { name: "Item 1" })
+      ).toBeInTheDocument();
     });
   });
 
   it("should support keyboard movement correctly", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(
+    rmdRender(
       <>
         <button>before</button>
         <Test />
@@ -198,10 +207,10 @@ describe("MenuBar", () => {
       </>
     );
 
-    const menubar = getByRole("menubar", { name: "Example" });
+    const menubar = screen.getByRole("menubar", { name: "Example" });
     const menubarItems = within(menubar).getAllByRole("menuitem");
-    const before = getByRole("button", { name: "before" });
-    const after = getByRole("button", { name: "after" });
+    const before = screen.getByRole("button", { name: "before" });
+    const after = screen.getByRole("button", { name: "after" });
 
     await user.tab();
     expect(document.activeElement).toBe(before);
@@ -240,24 +249,24 @@ describe("MenuBar", () => {
     });
 
     await user.keyboard("{Enter}");
-    const sizeMenu = getByRole("menu", { name: "Size" });
+    const sizeMenu = screen.getByRole("menu", { name: "Size" });
     await waitFor(() => {
       expect(sizeMenu).not.toHaveClass("rmd-scale-transition--enter");
     });
     expect(document.activeElement).toBe(
-      getByRole("menuitem", { name: "Normal" })
+      screen.getByRole("menuitem", { name: "Normal" })
     );
 
     await user.keyboard("{End}");
     expect(document.activeElement).toBe(
-      getByRole("menuitem", { name: "Submenu" })
+      screen.getByRole("menuitem", { name: "Submenu" })
     );
 
     // arrow right should open nested dropdown menus
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Item 1" })
+        screen.getByRole("menuitem", { name: "Item 1" })
       );
     });
 
@@ -265,7 +274,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Submenu" })
+        screen.getByRole("menuitem", { name: "Submenu" })
       );
     });
 
@@ -273,7 +282,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Left" })
+        screen.getByRole("menuitem", { name: "Left" })
       );
     });
 
@@ -281,7 +290,7 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
@@ -289,14 +298,14 @@ describe("MenuBar", () => {
     await user.keyboard("{ArrowRight}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Roboto" })
+        screen.getByRole("menuitem", { name: "Roboto" })
       );
     });
 
     await user.keyboard("{ArrowLeft}");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
@@ -318,27 +327,27 @@ describe("MenuBar", () => {
 
   it("should refocus the top-level menuitem when the tab key is pressed", async () => {
     const user = userEvent.setup();
-    const { getByRole } = rmdRender(<Test />);
+    rmdRender(<Test />);
 
     await user.tab();
     await user.keyboard("[End][Space]");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Normal" })
+        screen.getByRole("menuitem", { name: "Normal" })
       );
     });
 
     await user.keyboard("[End][Enter]");
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Item 1" })
+        screen.getByRole("menuitem", { name: "Item 1" })
       );
     });
 
     await user.tab();
     await waitFor(() => {
       expect(document.activeElement).toBe(
-        getByRole("menuitem", { name: "Size" })
+        screen.getByRole("menuitem", { name: "Size" })
       );
     });
   });

package/src/menu/__tests__/MenuVisibilityProvider.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { fireEvent, render } from "../../test-utils/index.js";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
 
 import { Button } from "../../button/Button.js";
 import { useMenuVisibility } from "../MenuVisibilityProvider.js";
@@ -24,8 +24,8 @@ describe("MenuVisibilityProvider", () => {
       );
     }
 
-    const { getByRole } = render(<Test />);
-    const button = getByRole("button", { name: "Button" });
+    render(<Test />);
+    const button = screen.getByRole("button", { name: "Button" });
     fireEvent.click(button);
     expect(error instanceof Error && error.message).toBe(
       '"MenuVisibilityProvider" must be a parent component'

package/src/overlay/__tests__/Overlay.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it, jest } from "@jest/globals";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import { createRef, type ReactElement } from "react";
 import {
   fireEvent,
@@ -10,6 +10,7 @@ import {
 
 import { SsrProvider } from "../../SsrProvider.js";
 import { Button } from "../../button/Button.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { useToggle } from "../../useToggle.js";
 import { DISPLAY_NONE_CLASS } from "../../utils/isElementVisible.js";
 import { Overlay, type OverlayProps } from "../Overlay.js";
@@ -30,6 +31,10 @@ function Test({ defaultVisible = false }: TestProps): ReactElement {
 }
 
 describe("Overlay", () => {
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   it("should apply the correct styling, HTMLAttributes, and allow a ref", () => {
     const ref = createRef<HTMLSpanElement>();
     const props = {
@@ -56,25 +61,22 @@ describe("Overlay", () => {
   });
 
   it("should support rendering inline if disablePortal prop is true", () => {
-    const { container, getByTestId } = render(
+    const { container } = render(
       <Overlay data-testid="overlay" visible disablePortal />
     );
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(container.firstElementChild).toBe(overlay);
     expect(container).toMatchSnapshot();
   });
 
   it("should support rendering inline if it was visible by default and rendered through ssr", async () => {
-    const { container, getByRole, getByTestId } = render(
-      <Test defaultVisible />,
-      {
-        wrapper: ({ children }) => <SsrProvider ssr>{children}</SsrProvider>,
-      }
-    );
+    const { container } = render(<Test defaultVisible />, {
+      wrapper: ({ children }) => <SsrProvider ssr>{children}</SsrProvider>,
+    });
 
-    const button = getByRole("button", { name: "Toggle" });
-    const overlay = getByTestId("overlay");
+    const button = screen.getByRole("button", { name: "Toggle" });
+    const overlay = screen.getByTestId("overlay");
     expect(button.nextElementSibling).toBe(overlay);
     expect(container).toMatchSnapshot();
 
@@ -85,7 +87,9 @@ describe("Overlay", () => {
 
     fireEvent.click(button);
     await waitFor(() => {
-      expect(() => getByTestId("overlay")).not.toThrow();
+      expect(() => screen.getByTestId("overlay")).not.toThrow();
+    });
+    await waitFor(() => {
       expect(() => within(container).getByTestId("overlay")).toThrow();
     });
   });
@@ -98,7 +102,7 @@ describe("Overlay", () => {
     const onExiting = jest.fn();
     const onExited = jest.fn();
 
-    const props: Partial<OverlayProps> & { "data-testid": string } = {
+    const props: Partial<OverlayProps> = {
       "data-testid": "overlay",
       onEnter,
       onEntering,
@@ -109,11 +113,9 @@ describe("Overlay", () => {
       temporary: false,
     };
 
-    const { getByTestId, rerender } = render(
-      <Overlay {...props} visible={false} />
-    );
+    const { rerender } = render(<Overlay {...props} visible={false} />);
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
 
@@ -126,25 +128,25 @@ describe("Overlay", () => {
 
     rerender(<Overlay {...props} visible />);
     await waitFor(() => {
-      expect(onEnter).toHaveBeenCalledTimes(1);
-      expect(onEntering).toHaveBeenCalledTimes(1);
       expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).not.toHaveBeenCalled();
-      expect(onExiting).not.toHaveBeenCalled();
-      expect(onExited).not.toHaveBeenCalled();
     });
+    expect(onEnter).toHaveBeenCalledTimes(1);
+    expect(onEntering).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
     expect(overlay).not.toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
 
     rerender(<Overlay {...props} visible={false} />);
     await waitFor(() => {
-      expect(onEnter).toHaveBeenCalledTimes(1);
-      expect(onEntering).toHaveBeenCalledTimes(1);
-      expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).toHaveBeenCalledTimes(1);
-      expect(onExiting).toHaveBeenCalledTimes(1);
       expect(onExited).toHaveBeenCalledTimes(1);
     });
+    expect(onEnter).toHaveBeenCalledTimes(1);
+    expect(onEntering).toHaveBeenCalledTimes(1);
+    expect(onEntered).toHaveBeenCalledTimes(1);
+    expect(onExit).toHaveBeenCalledTimes(1);
+    expect(onExiting).toHaveBeenCalledTimes(1);
     expect(overlay).toHaveClass(DISPLAY_NONE_CLASS);
     expect(overlay).toMatchSnapshot();
   });
@@ -168,20 +170,20 @@ describe("Overlay", () => {
       onExited,
     } as const;
 
-    const { getByTestId, rerender } = render(<Overlay {...props} />);
-    expect(() => getByTestId("overlay")).toThrow();
+    const { rerender } = render(<Overlay {...props} />);
+    expect(() => screen.getByTestId("overlay")).toThrow();
 
     rerender(<Overlay {...props} visible />);
     await waitFor(() => {
-      expect(onEnter).not.toHaveBeenCalled();
-      expect(onEntering).not.toHaveBeenCalled();
       expect(onEntered).toHaveBeenCalledTimes(1);
-      expect(onExit).not.toHaveBeenCalled();
-      expect(onExiting).not.toHaveBeenCalled();
-      expect(onExited).not.toHaveBeenCalled();
     });
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onEntering).not.toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onExiting).not.toHaveBeenCalled();
+    expect(onExited).not.toHaveBeenCalled();
 
-    const overlay = getByTestId("overlay");
+    const overlay = screen.getByTestId("overlay");
     expect(overlay).toMatchSnapshot();
   });
 

package/src/portal/__tests__/PortalContainerProvider.node.tsx

@@ -9,6 +9,7 @@ describe("PortalContainerProvider", () => {
   it("should not render portals server side", () => {
     expect(typeof document).toBe("undefined");
 
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = renderToString(
       <PortalContainerProvider>
         <Portal>

package/src/portal/__tests__/PortalContainerProvider.tsx

@@ -1,15 +1,15 @@
 import { describe, expect, it } from "@jest/globals";
-import { render } from "../../test-utils/index.js";
+import { render, screen } from "../../test-utils/index.js";
 
+import { Portal } from "../Portal.js";
 import {
-  PortalContainerProvider,
   PORTAL_CONTAINER_ID,
+  PortalContainerProvider,
 } from "../PortalContainerProvider.js";
-import { Portal } from "../Portal.js";
 
 describe("PortalContainerProvider", () => {
   it("should portal all child portals to a div that was created as the last child in the document.body", () => {
-    const { container, getByTestId, unmount } = render(
+    const { container, unmount } = render(
       <PortalContainerProvider>
         <Portal>
           <div data-testid="div-1" />
@@ -21,8 +21,8 @@ describe("PortalContainerProvider", () => {
     );
 
     const portalRoot = document.getElementById(PORTAL_CONTAINER_ID);
-    const div1 = getByTestId("div-1");
-    const div2 = getByTestId("div-2");
+    const div1 = screen.getByTestId("div-1");
+    const div2 = screen.getByTestId("div-2");
 
     expect(document.body).toContainElement(portalRoot);
     expect(portalRoot).toContainElement(div1);
@@ -40,7 +40,7 @@ describe("PortalContainerProvider", () => {
   it("should allow for a custom container element", () => {
     const container = document.createElement("div");
     document.body.appendChild(container);
-    const { getByTestId } = render(
+    render(
       <PortalContainerProvider container={container}>
         <Portal>
           <div data-testid="div-1" />
@@ -51,8 +51,8 @@ describe("PortalContainerProvider", () => {
       </PortalContainerProvider>
     );
 
-    const div1 = getByTestId("div-1");
-    const div2 = getByTestId("div-2");
+    const div1 = screen.getByTestId("div-1");
+    const div2 = screen.getByTestId("div-2");
     expect(document.getElementById(PORTAL_CONTAINER_ID)).toBe(null);
     expect(container).toContainElement(div1);
     expect(container).toContainElement(div2);

package/src/positioning/__tests__/useFixedPositioning.tsx

@@ -1,14 +1,16 @@
 import {
   afterEach,
   beforeAll,
+  beforeEach,
   describe,
   expect,
   it,
   jest,
 } from "@jest/globals";
 import { useRef, useState, type ReactElement } from "react";
-import { act, fireEvent, render } from "../../test-utils/index.js";
+import { act, fireEvent, render, screen } from "../../test-utils/index.js";
 
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 import { useScaleTransition } from "../../transition/useScaleTransition.js";
 import { TOP_INNER_RIGHT_ANCHOR } from "../constants.js";
 import {
@@ -60,14 +62,18 @@ describe("useFixedPositioning", () => {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    TRANSITION_CONFIG.disabled = false;
+  });
+
   afterEach(() => {
     jest.clearAllTimers();
   });
 
   it("should default to fixing itself with the BELOW_CENTER_ANCHOR", () => {
-    const { container, getByRole, getByTestId } = render(<Test />);
-    const getElement = (): HTMLElement => getByTestId("element");
-    const button = getByRole("button");
+    const { container } = render(<Test />);
+    const getElement = (): HTMLElement => screen.getByTestId("element");
+    const button = screen.getByRole("button");
 
     expect(getElement).toThrow();
     expect(container).toMatchSnapshot();
@@ -94,8 +100,8 @@ describe("useFixedPositioning", () => {
 
   it("should detect if the fixed element is still visible in the viewport on scroll events", () => {
     const onScroll = jest.fn();
-    const { getByRole } = render(<Test onScroll={onScroll} />);
-    const toggle = getByRole("button");
+    render(<Test onScroll={onScroll} />);
+    const toggle = screen.getByRole("button");
 
     fireEvent.click(toggle);
     act(() => {
@@ -119,8 +125,8 @@ describe("useFixedPositioning", () => {
 
   it("should automatically update the style when the page is resized", () => {
     const onResize = jest.fn();
-    const { getByRole } = render(<Test onResize={onResize} />);
-    const toggle = getByRole("button");
+    render(<Test onResize={onResize} />);
+    const toggle = screen.getByRole("button");
 
     fireEvent.click(toggle);
     act(() => {
@@ -136,8 +142,8 @@ describe("useFixedPositioning", () => {
   });
 
   it("should update the style correctly based on the initialX and initialY so that it can be used for context menus", () => {
-    const { container, getByRole, rerender } = render(<Test />);
-    const toggle = getByRole("button");
+    const { container, rerender } = render(<Test />);
+    const toggle = screen.getByRole("button");
 
     fireEvent.click(toggle);
     act(() => {
@@ -161,8 +167,8 @@ describe("useFixedPositioning", () => {
       onExited,
     };
 
-    const { getByRole } = render(<Test {...props} />);
-    const toggle = getByRole("button");
+    render(<Test {...props} />);
+    const toggle = screen.getByRole("button");
 
     expect(onEnter).not.toHaveBeenCalled();
     expect(onEntering).not.toHaveBeenCalled();
@@ -199,10 +205,10 @@ describe("useFixedPositioning", () => {
   });
 
   it("should allow for configuring the fixed position", () => {
-    const { container, getByRole } = render(
+    const { container } = render(
       <Test transformOrigin anchor={TOP_INNER_RIGHT_ANCHOR} />
     );
-    const toggle = getByRole("button");
+    const toggle = screen.getByRole("button");
 
     fireEvent.click(toggle);
     act(() => {

package/src/progress/CircularProgress.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";
@@ -123,7 +124,7 @@ const styles = bem("rmd-circular-progress");
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return <CircularProgress />;
+ *   return <CircularProgress aria-label="Loading" />;
  * }
  * ```
  *
@@ -137,16 +138,16 @@ const styles = bem("rmd-circular-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return <CircularProgress value={progress} />;
+ *   return <CircularProgress aria-label="File upload" value={progress} />;
  * }
  * ```
  *
  * @remarks \@since 6.0.0 Updated the determinate circular progress to no longer
- * rotate while increasing the value.
+ * rotate while increasing the value and require a label for accessibility.
  */
 export const CircularProgress = forwardRef<
   HTMLSpanElement,
-  CircularProgressProps
+  LabelRequiredForA11y<CircularProgressProps>
 >(function CircularProgress(props, ref) {
   const {
     id: propId,