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

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,

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();
   });
 });