@simplybusiness/mobius 10.1.2 → 10.3.0

package/src/components/Drawer/Drawer.css

@@ -5,6 +5,7 @@
     --drawer-transition-duration: 0;
     /* Backdrop colour fallback */
     --backdrop-color: #18181d;
+    --backdrop-blur: 4px;
   }
 
   /* Enable transitions only if reduce motion flag is off */
@@ -39,9 +40,9 @@
     }
 
     &::backdrop {
-      background-color: var(--backdrop-color);
-      opacity: 0;
-      transition: opacity var(--drawer-transition-duration) ease-in-out;
+      background-color: transparent;
+      transition: background-color var(--drawer-transition-duration) ease-in-out;
+      backdrop-filter: blur(var(--backdrop-blur));
     }
 
     /* Injected by "dialog-polyfill" */
@@ -54,6 +55,16 @@
       left: 0;
       background-color: var(--backdrop-color);
       opacity: 0.3;
+      backdrop-filter: blur(var(--backdrop-blur));
+
+      @supports (background-color: color-mix(in srgb, red 50%, blue)) {
+        background-color: color-mix(
+          in srgb,
+          var(--backdrop-color) 30%,
+          transparent
+        );
+        opacity: 1;
+      }
 
       & + ._dialog_overlay {
         position: fixed;
@@ -133,7 +144,17 @@
     &.--should-transition {
       &.--transition {
         &::backdrop {
+          background-color: var(--backdrop-color);
           opacity: 0.3;
+
+          @supports (background-color: color-mix(in srgb, red 50%, blue)) {
+            background-color: color-mix(
+              in srgb,
+              var(--backdrop-color) 30%,
+              transparent
+            );
+            opacity: 1;
+          }
         }
       }
 

package/src/components/Flex/Flex.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Flex } from ".";
 
@@ -73,4 +74,10 @@ describe("Test for Flex", () => {
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Flex ref={ref}>Text</Flex>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
 });

package/src/components/Grid/Grid.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Grid } from ".";
 
@@ -14,6 +15,35 @@ describe("Test for Grid", () => {
     expect(view).toBeTruthy();
   });
 
+  it("forwards ref to the grid container", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Grid ref={ref}>
+        <Grid.Item>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("forwards ref to the grid item", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Grid>
+        <Grid.Item ref={ref}>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("uses mobius class on Grid.Item", () => {
+    render(
+      <Grid>
+        <Grid.Item>Item</Grid.Item>
+      </Grid>,
+    );
+    expect(screen.getByText("Item")).toHaveClass("mobius");
+  });
+
   describe("given the span prop is an array", () => {
     it("should render default as fallback", () => {
       const span = [1, 2, 3];

package/src/components/Grid/Grid.tsx

@@ -40,7 +40,7 @@ export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
   style?: React.CSSProperties;
 }
 
-const Grid = ({ ref: _ref, ...props }: GridProps) => {
+const Grid = ({ ref, ...props }: GridProps) => {
   const {
     columns = 12,
     gap,
@@ -70,7 +70,7 @@ const Grid = ({ ref: _ref, ...props }: GridProps) => {
     ...style,
   });
 
-  return <div style={styles} className={classes} {...rest} />;
+  return <div ref={ref} style={styles} className={classes} {...rest} />;
 };
 
 Grid.displayName = "Grid";

package/src/components/Grid/Item.tsx

@@ -43,7 +43,7 @@ export const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>
 
 export const DEFAULT_SPAN = 12;
 
-const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
+const GridItem = ({ ref, ...props }: GridItemProps) => {
   const {
     breakpoint: { size: breakpointSize },
   } = useBreakpoint();
@@ -69,7 +69,7 @@ const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
     xxl,
   });
   const [responsiveSpan, setResponsiveSpan] = useState<number | undefined>();
-  const classes = classNames("mobius-grid__item", className);
+  const classes = classNames("mobius", "mobius-grid__item", className);
 
   useEffect(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
@@ -81,7 +81,7 @@ const GridItem = ({ ref: _ref, ...props }: GridItemProps) => {
     justifySelf,
   };
 
-  return <div style={{ ...styles }} className={classes} {...rest} />;
+  return <div ref={ref} style={{ ...styles }} className={classes} {...rest} />;
 };
 
 GridItem.displayName = "GridItem";

package/src/components/Icon/Icon.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { chevronLeft } from "@simplybusiness/icons";
 import { Icon } from ".";
@@ -34,6 +35,32 @@ describe("Test for Icon", () => {
       render(<Icon icon={chevronLeft} data-testid="test" />);
       expect(screen.getByTestId("test")).toHaveClass(XS_SIZE_CLASS_NAME);
     });
+
+    it.each(["xs", "sm", "md", "lg"] as const)(
+      "applies --size-%s class",
+      size => {
+        render(<Icon icon={chevronLeft} size={size} data-testid="test" />);
+        expect(screen.getByTestId("test")).toHaveClass(`--size-${size}`);
+      },
+    );
+
+    it("applies mobius-icon-fw class when fixedWidth is true", () => {
+      render(<Icon icon={chevronLeft} fixedWidth data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass("mobius-icon-fw");
+    });
+
+    it("applies mobius-icon-spin class when spin is true", () => {
+      render(<Icon icon={chevronLeft} spin data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass("mobius-icon-spin");
+    });
+
+    it("applies mobius-icon-spin-reverse class when spinReverse is true", () => {
+      render(<Icon icon={chevronLeft} spinReverse data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass(
+        "mobius-icon-spin-reverse",
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius-icon-spin");
+    });
   });
 
   describe("SVG title attribute", () => {
@@ -55,4 +82,10 @@ describe("Test for Icon", () => {
       expect(svgTitleTag).toBeInTheDocument();
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<Icon ref={ref} icon={chevronLeft} />);
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+  });
 });

package/src/components/Image/Image.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Image } from ".";
 
@@ -41,4 +42,10 @@ describe("Test for Image", () => {
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLImageElement>();
+    render(<Image ref={ref} alt="test" src="test.png" />);
+    expect(ref.current).toBeInstanceOf(HTMLImageElement);
+  });
 });

package/src/components/Label/Label.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { Label } from ".";
 
@@ -47,4 +48,10 @@ describe("Test for Label", () => {
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLLabelElement>();
+    render(<Label ref={ref}>Text</Label>);
+    expect(ref.current).toBeInstanceOf(HTMLLabelElement);
+  });
 });

package/src/components/Link/Link.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Link } from ".";
@@ -43,6 +44,25 @@ describe("Test for Link", () => {
     });
   });
 
+  describe("when disabled", () => {
+    it("has aria-disabled attribute", () => {
+      render(
+        <Link href="#" isDisabled>
+          Click
+        </Link>,
+      );
+      expect(screen.getByRole("link")).toHaveAttribute("aria-disabled", "true");
+    });
+  });
+
+  describe("focus", () => {
+    it("is focusable via Tab", async () => {
+      render(<Link href="#">Click</Link>);
+      await userEvent.tab();
+      expect(screen.getByRole("link")).toHaveFocus();
+    });
+  });
+
   describe("uses correct class names", () => {
     it("uses Mobius class", () => {
       render(
@@ -81,6 +101,20 @@ describe("Test for Link", () => {
       await userEvent.tab();
       expect(screen.getByTestId("test")).toHaveClass("--is-disabled");
     });
+
+    it.each(["primary", "secondary"] as const)(
+      "applies mobius-link--%s class",
+      variant => {
+        render(
+          <Link href="#test" data-testid="test" variant={variant}>
+            Sample text
+          </Link>,
+        );
+        expect(screen.getByTestId("test")).toHaveClass(
+          `mobius-link--${variant}`,
+        );
+      },
+    );
   });
 
   describe("given the the link has disabled prop", () => {
@@ -94,4 +128,14 @@ describe("Test for Link", () => {
       expect(screen.getByTestId("test")).toBeEnabled();
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <Link ref={ref} href="#">
+        Text
+      </Link>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+  });
 });

package/src/components/List/List.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import type { ListStyleType } from ".";
 import { List, ListItem } from ".";
@@ -167,4 +168,14 @@ describe("List", () => {
       expect(screen.getByText("✅")).toHaveClass(LIST_ICON_CLASS_NAME);
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLOListElement & HTMLUListElement>();
+    render(
+      <List ref={ref}>
+        <ListItem>item</ListItem>
+      </List>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLUListElement);
+  });
 });

package/src/components/List/List.tsx

@@ -21,7 +21,7 @@ export interface ListProps extends DOMProps {
   liststyletype?: ListStyleType;
   icon?: ReactNode;
   className?: string;
-  ref?: Ref<HTMLOListElement & HTMLUListElement>;
+  ref?: Ref<HTMLElement>;
 }
 
 const List = ({ ref, ...props }: ListProps) => {
@@ -48,7 +48,11 @@ const List = ({ ref, ...props }: ListProps) => {
   );
 
   return (
-    <Component ref={ref} {...mappedProps} className={classes}>
+    <Component
+      ref={ref as React.Ref<HTMLOListElement & HTMLUListElement>}
+      {...mappedProps}
+      className={classes}
+    >
       {Children.map(children, child => {
         if (isValidElement(child)) {
           // List items accept a parentIcon prop which is not part of standard HTML

package/src/components/Logo/Logo.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render } from "@testing-library/react";
 import { Logo } from ".";
 
@@ -25,4 +26,39 @@ describe("Logo", () => {
       expect(container.firstChild).toHaveClass(customClassName);
     });
   });
+
+  describe("semantic HTML and accessibility", () => {
+    it("renders an <svg> element", () => {
+      const { container } = render(<Logo />);
+      expect(container.firstChild?.nodeName).toBe("svg");
+    });
+
+    it("has a viewBox attribute for proper scaling", () => {
+      const { container } = render(<Logo />);
+      expect(container.firstChild).toHaveAttribute("viewBox", "0 0 144 37");
+    });
+
+    it("applies custom width and height", () => {
+      const { container } = render(<Logo width="200" height="50" />);
+      expect(container.firstChild).toHaveAttribute("width", "200");
+      expect(container.firstChild).toHaveAttribute("height", "50");
+    });
+
+    // Note: Logo does not set role="img", aria-label, or <title> by default.
+    // Screen readers may not announce this SVG meaningfully. Consider adding
+    // role="img" and aria-label="Simply Business" for better accessibility.
+    // The component's type interface (LogoProps) also does not accept role or
+    // aria-label, so consumers cannot pass these props without a type error.
+    it("does not set an accessible label by default", () => {
+      const { container } = render(<Logo />);
+      expect(container.firstChild).not.toHaveAttribute("role");
+      expect(container.firstChild).not.toHaveAttribute("aria-label");
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<Logo ref={ref} />);
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+  });
 });

package/src/components/Logo/Logo.tsx

@@ -11,6 +11,14 @@ export interface LogoProps extends DOMProps, RefAttributes<LogoElementType> {
   width?: string;
   /** Custom height. When defined along with width, it will scale proportionally */
   height?: string;
+  /** ARIA role for the SVG element */
+  role?: React.AriaRole;
+  /** Accessible label for the logo */
+  "aria-label"?: string;
+  /** Whether the logo is hidden from screen readers */
+  "aria-hidden"?: boolean | "true" | "false";
+  /** ID of an element that labels the logo */
+  "aria-labelledby"?: string;
 }
 
 export const Logo = ({ ref, ...props }: LogoProps) => {

package/src/components/Modal/Header.tsx

@@ -1,4 +1,5 @@
 import type { PropsWithChildren, RefAttributes } from "react";
+import { useEffect, useId } from "react";
 
 import { cross } from "@simplybusiness/icons";
 import type { DOMProps } from "../../types/dom";
@@ -12,10 +13,20 @@ export interface HeaderProps
   extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {}
 
 const Header = ({ ref, children, ...otherProps }: HeaderProps) => {
-  const { onClose, closeLabel } = useModal();
+  const { onClose, closeLabel, setTitleId } = useModal();
+  const titleId = useId();
+
+  useEffect(() => {
+    setTitleId(titleId);
+  }, [titleId, setTitleId]);
 
   return (
-    <header ref={ref} {...otherProps} className="mobius-modal__header">
+    <header
+      ref={ref}
+      {...otherProps}
+      className="mobius-modal__header"
+      id={titleId}
+    >
       {children}
       <Button
         aria-label="Close"

package/src/components/Modal/Modal.css

@@ -1,4 +1,13 @@
 @layer atoms {
+  :root,
+  :host,
+  ::backdrop {
+    /* Backdrop fallbacks — ::backdrop doesn't inherit from :root */
+    --backdrop-color: #18181d;
+    --backdrop-blur: 4px;
+    --modal-transition-duration: 300ms;
+  }
+
   /* Disable transitions if reduce motion flag is on */
   @media (prefers-reduced-motion: reduce) {
     :root,
@@ -34,9 +43,9 @@
     }
 
     &::backdrop {
-      background-color: var(--backdrop-color);
-      opacity: 0;
-      transition: opacity var(--modal-transition-duration) ease-in-out;
+      background-color: transparent;
+      transition: background-color var(--modal-transition-duration) ease-in-out;
+      backdrop-filter: blur(var(--backdrop-blur));
     }
 
     /* Injected by "dialog-polyfill" */
@@ -49,6 +58,16 @@
       left: 0;
       background-color: var(--backdrop-color);
       opacity: 0.3;
+      backdrop-filter: blur(var(--backdrop-blur));
+
+      @supports (background-color: color-mix(in srgb, red 50%, blue)) {
+        background-color: color-mix(
+          in srgb,
+          var(--backdrop-color) 30%,
+          transparent
+        );
+        opacity: 1;
+      }
 
       & + ._dialog_overlay {
         position: fixed;
@@ -83,7 +102,17 @@
       }
 
       &::backdrop {
+        background-color: var(--backdrop-color);
         opacity: 0.3;
+
+        @supports (background-color: color-mix(in srgb, red 50%, blue)) {
+          background-color: color-mix(
+            in srgb,
+            var(--backdrop-color) 30%,
+            transparent
+          );
+          opacity: 1;
+        }
       }
     }
 
@@ -98,7 +127,17 @@
     &.--should-transition {
       &.--transition {
         &::backdrop {
+          background-color: var(--backdrop-color);
           opacity: 0.3;
+
+          @supports (background-color: color-mix(in srgb, red 50%, blue)) {
+            background-color: color-mix(
+              in srgb,
+              var(--backdrop-color) 30%,
+              transparent
+            );
+            opacity: 1;
+          }
         }
       }
 

package/src/components/Modal/Modal.test.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { createRef, useState } from "react";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Modal } from ".";
@@ -96,6 +96,17 @@ describe("Modal", () => {
     });
   });
 
+  it("has open attribute when isOpen is true", async () => {
+    render(
+      <Modal isOpen onClose={vi.fn()}>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Content>Content</Modal.Content>
+      </Modal>,
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveAttribute("open");
+  });
+
   describe("pressing close button", () => {
     it("should close the modal", async () => {
       const App = () => {
@@ -190,4 +201,11 @@ describe("Modal", () => {
       expect(onOpen).toHaveBeenCalled();
     });
   });
+
+  it("forwards ref", async () => {
+    const ref = createRef<HTMLDialogElement>();
+    render(<Modal ref={ref} isOpen />);
+    await screen.findByRole("dialog");
+    expect(ref.current).toBeInstanceOf(HTMLDialogElement);
+  });
 });

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDialog } from "../../hooks";
 import { mergeRefs } from "../../utils";
 import { supportsDialog } from "../../utils/polyfill-tests";
@@ -56,12 +56,20 @@ const Modal = ({ ref, ...props }: ModalProps) => {
     className,
   );
 
+  const [titleId, setTitleId] = useState<string | undefined>(undefined);
+
+  const handleSetTitleId = useCallback((id: string) => {
+    setTitleId(id);
+  }, []);
+
   const contextValue = useMemo(
     () => ({
       onClose: close,
       closeLabel,
+      titleId,
+      setTitleId: handleSetTitleId,
     }),
-    [close, closeLabel],
+    [close, closeLabel, titleId, handleSetTitleId],
   );
 
   return (
@@ -69,6 +77,7 @@ const Modal = ({ ref, ...props }: ModalProps) => {
       ref={mergeRefs([dialogRef, ref])}
       onCancel={close}
       className={modalClasses}
+      aria-labelledby={titleId}
       {...rest}
     >
       <ModalContext.Provider value={contextValue}>

package/src/components/Modal/ModalContext.tsx

@@ -4,4 +4,6 @@ import type { ModalContextProps } from "./types";
 export const ModalContext = createContext<ModalContextProps>({
   onClose: () => {},
   closeLabel: undefined,
+  titleId: undefined,
+  setTitleId: () => {},
 });

package/src/components/Modal/types.ts

@@ -15,4 +15,6 @@ export interface ModalProps extends RefAttributes<ModalElementType> {
 export type ModalContextProps = {
   onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
   closeLabel: string | undefined;
+  titleId: string | undefined;
+  setTitleId: (id: string) => void;
 };

package/src/components/Modal/useModal.ts

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { ModalContext } from "./ModalContext";
 
 export const useModal = () => {
-  const { onClose, closeLabel } = useContext(ModalContext);
+  const { onClose, closeLabel, titleId, setTitleId } = useContext(ModalContext);
 
-  return { onClose, closeLabel };
+  return { onClose, closeLabel, titleId, setTitleId };
 };