diff --git a/site/src/components/Alert/Alert.test.tsx b/site/src/components/Alert/Alert.test.tsx new file mode 100644 index 0000000000..ff52cc6197 --- /dev/null +++ b/site/src/components/Alert/Alert.test.tsx @@ -0,0 +1,20 @@ +import { render, screen } from "@testing-library/react"; +import { Alert, AlertDescription, AlertTitle } from "./Alert"; + +describe("AlertTitle", () => { + it("renders as an h2 heading", () => { + render( + + Deployment warning + Something needs your attention. + , + ); + + expect( + screen.getByRole("heading", { level: 2, name: "Deployment warning" }), + ).toBeInTheDocument(); + expect( + screen.queryByRole("heading", { level: 1, name: "Deployment warning" }), + ).not.toBeInTheDocument(); + }); +}); diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx index faf16ddc66..62d5329e11 100644 --- a/site/src/components/Alert/Alert.tsx +++ b/site/src/components/Alert/Alert.tsx @@ -135,9 +135,9 @@ export const AlertDescription: React.FC = ({ ); }; -export const AlertTitle: React.FC> = ({ +export const AlertTitle: React.FC> = ({ className, ...props }) => { - return

; + return

; }; diff --git a/site/src/components/Loader/Loader.test.tsx b/site/src/components/Loader/Loader.test.tsx new file mode 100644 index 0000000000..40af194659 --- /dev/null +++ b/site/src/components/Loader/Loader.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from "@testing-library/react"; +import { Loader } from "./Loader"; + +describe("Loader", () => { + it("announces loading status politely", () => { + render(); + + expect(screen.getByRole("status")).toHaveAttribute("aria-live", "polite"); + expect(screen.getByLabelText("Loading")).toBeInTheDocument(); + }); + + it("applies custom spinner labels when provided", () => { + render(); + + expect( + screen.getByLabelText("Loading workspace resources"), + ).toBeInTheDocument(); + }); +}); diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index f46bf7a38c..2688d94b58 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -14,21 +14,25 @@ interface LoaderProps extends HTMLAttributes { export const Loader: FC = ({ fullscreen, size = "lg", - label = "Loading...", + label, className, ...attrs }) => { + const resolvedLabel = label ?? "Loading"; + return (
- +
); }; diff --git a/site/src/components/Tabs/Tabs.test.tsx b/site/src/components/Tabs/Tabs.test.tsx new file mode 100644 index 0000000000..b0bb195005 --- /dev/null +++ b/site/src/components/Tabs/Tabs.test.tsx @@ -0,0 +1,40 @@ +import { render, screen } from "@testing-library/react"; +import { MemoryRouter } from "react-router"; +import { TabLink, Tabs, TabsList } from "./Tabs"; + +const renderTabs = (active = "overview") => { + render( + + + + + Overview + + + Settings + + + + , + ); +}; + +describe("Tabs", () => { + it("does not expose tablist semantics for link navigation", () => { + renderTabs(); + + expect(screen.queryByRole("tablist")).not.toBeInTheDocument(); + }); + + it("marks only the active tab link as the current page", () => { + renderTabs("overview"); + + expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute( + "aria-current", + "page", + ); + expect(screen.getByRole("link", { name: "Settings" })).not.toHaveAttribute( + "aria-current", + ); + }); +}); diff --git a/site/src/components/Tabs/Tabs.tsx b/site/src/components/Tabs/Tabs.tsx index ec823d0afe..de4a1d3581 100644 --- a/site/src/components/Tabs/Tabs.tsx +++ b/site/src/components/Tabs/Tabs.tsx @@ -96,11 +96,7 @@ export const TabsList: FC = ({ className, ...props }) => { return (
-
+
= ({ return ( { + render( + , + ); + + const trigger = screen.getByRole("combobox"); + + expect(trigger.className).not.toContain("focus:ring-0"); + expect(trigger.className).not.toContain("focus-visible:ring-0"); +}); diff --git a/site/src/components/ai-elements/model-selector.tsx b/site/src/components/ai-elements/model-selector.tsx index 5f7d2f5148..bc2f8dfcce 100644 --- a/site/src/components/ai-elements/model-selector.tsx +++ b/site/src/components/ai-elements/model-selector.tsx @@ -93,7 +93,7 @@ export const ModelSelector: FC = ({