@simplybusiness/mobius 10.2.0 → 10.3.1

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.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 };
 };

package/src/components/Option/Option.test.tsx

@@ -0,0 +1,67 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { Option } from "./Option";
+
+describe("Option", () => {
+  it("renders an <option> element", () => {
+    render(
+      <select>
+        <Option>Test</Option>
+      </select>,
+    );
+
+    expect(screen.getByRole("option")).toBeInTheDocument();
+  });
+
+  it("passes value prop", () => {
+    render(
+      <select>
+        <Option value="foo">Foo</Option>
+      </select>,
+    );
+
+    expect(screen.getByRole("option")).toHaveValue("foo");
+  });
+
+  it("renders children as text content", () => {
+    render(
+      <select>
+        <Option>Hello world</Option>
+      </select>,
+    );
+
+    expect(screen.getByRole("option")).toHaveTextContent("Hello world");
+  });
+
+  it("maps isDisabled to disabled attribute", () => {
+    render(
+      <select>
+        <Option isDisabled>Disabled</Option>
+      </select>,
+    );
+
+    expect(screen.getByRole("option")).toBeDisabled();
+  });
+
+  it("does not have disabled attribute when not disabled", () => {
+    render(
+      <select>
+        <Option>Enabled</Option>
+      </select>,
+    );
+
+    expect(screen.getByRole("option")).toBeEnabled();
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLOptionElement>();
+
+    render(
+      <select>
+        <Option ref={ref}>With ref</Option>
+      </select>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLOptionElement);
+  });
+});

package/src/components/Progress/Progress.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render } from "@testing-library/react";
 import { Progress } from ".";
 
@@ -141,4 +142,10 @@ describe("Progress", () => {
       );
     });
   });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Progress ref={ref} label="Progress" value={50} />);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
 });

package/src/components/SVG/SVG.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { SVG } from ".";
 
@@ -35,4 +36,43 @@ describe("Test for SVG", () => {
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
   });
+
+  describe("semantic HTML and accessibility", () => {
+    it("renders an <svg> element", () => {
+      const { container } = render(<SVG>{SvgImage}</SVG>);
+      expect(container.firstChild?.nodeName).toBe("svg");
+    });
+
+    it("preserves the viewBox attribute from the child SVG", () => {
+      render(<SVG data-testid="test">{SvgImage}</SVG>);
+      expect(screen.getByTestId("test")).toHaveAttribute(
+        "viewBox",
+        "0 0 299.8 85",
+      );
+    });
+
+    it("preserves the xmlns attribute from the child SVG", () => {
+      render(<SVG data-testid="test">{SvgImage}</SVG>);
+      expect(screen.getByTestId("test")).toHaveAttribute(
+        "xmlns",
+        "http://www.w3.org/2000/svg",
+      );
+    });
+
+    // Note: SVG component does not set role="img" or support a title prop.
+    // For decorative SVGs this is acceptable, but meaningful SVGs should
+    // have role="img" and an accessible label (aria-label or <title>).
+    // The component's type interface (SVGProps) also does not accept role or
+    // aria-label, so consumers cannot pass these props without a type error.
+    it("does not set role='img' by default", () => {
+      render(<SVG data-testid="test">{SvgImage}</SVG>);
+      expect(screen.getByTestId("test")).not.toHaveAttribute("role");
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<SVGSVGElement>();
+    render(<SVG ref={ref}>{SvgImage}</SVG>);
+    expect(ref.current).toBeInstanceOf(SVGSVGElement);
+  });
 });

package/src/components/SVG/SVG.tsx

@@ -7,6 +7,10 @@ export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
   children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
   className?: string;
   style?: React.CSSProperties;
+  role?: React.AriaRole;
+  "aria-label"?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+  "aria-labelledby"?: string;
 }
 const SVG = ({ ref, ...props }: SVGProps) => {
   const { children, className, ...otherProps } = props;

package/src/components/Segment/Segment.test.tsx

@@ -0,0 +1,72 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { Segment } from "./Segment";
+
+describe("Segment", () => {
+  it("applies mobius and mobius-segment classes", () => {
+    render(<Segment data-testid="segment" />);
+
+    const el = screen.getByTestId("segment");
+    expect(el).toHaveClass("mobius");
+    expect(el).toHaveClass("mobius-segment");
+  });
+
+  it("forwards custom className", () => {
+    render(<Segment data-testid="segment" className="custom" />);
+
+    expect(screen.getByTestId("segment")).toHaveClass("custom");
+  });
+
+  it("applies subtle colour class", () => {
+    render(<Segment data-testid="segment" colour="subtle" />);
+
+    expect(screen.getByTestId("segment")).toHaveClass("subtle");
+  });
+
+  it("applies primary colour class", () => {
+    render(<Segment data-testid="segment" colour="primary" />);
+
+    expect(screen.getByTestId("segment")).toHaveClass("primary");
+  });
+
+  it("applies secondary colour class", () => {
+    render(<Segment data-testid="segment" colour="secondary" />);
+
+    expect(screen.getByTestId("segment")).toHaveClass("secondary");
+  });
+
+  it("applies inverted class when prop is true", () => {
+    render(<Segment data-testid="segment" inverted />);
+
+    expect(screen.getByTestId("segment")).toHaveClass("inverted");
+  });
+
+  it("renders heading when provided", () => {
+    render(<Segment heading="My Heading" />);
+
+    const heading = screen.getByText("My Heading");
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveClass("mobius-segment__heading");
+  });
+
+  it("does not render heading when not provided", () => {
+    const { container } = render(<Segment>Content</Segment>);
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- no role/text to query when heading is absent
+    expect(container.querySelector(".mobius-segment__heading")).toBeNull();
+  });
+
+  it("renders children", () => {
+    render(<Segment>Child content</Segment>);
+
+    expect(screen.getByText("Child content")).toBeInTheDocument();
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+
+    render(<Segment ref={ref}>With ref</Segment>);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/src/components/Segment/Segment.tsx

@@ -1,9 +1,12 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefAttributes } from "react";
 import classNames from "classnames/dedupe";
 import type { DOMProps } from "../../types/dom";
 import "./Segment.css";
 
-export interface SegmentProps extends DOMProps {
+export type SegmentElementType = HTMLDivElement;
+
+export interface SegmentProps
+  extends DOMProps, RefAttributes<SegmentElementType> {
   className?: string;
   heading?: string;
   /** Background colour for Segment */
@@ -13,7 +16,7 @@ export interface SegmentProps extends DOMProps {
   children?: ReactNode;
 }
 
-const Segment = (props: SegmentProps) => {
+const Segment = ({ ref, ...props }: SegmentProps) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
 
   const classes = classNames(
@@ -25,7 +28,7 @@ const Segment = (props: SegmentProps) => {
   );
 
   return (
-    <div className={classes} {...rest}>
+    <div ref={ref} className={classes} {...rest}>
       {heading && <div className="mobius-segment__heading">{heading}</div>}
       {children}
     </div>