- onExpand(config.id)} />
+ onExpand(config.id)}
+ grouped
+ />
);
}
diff --git a/app/components/showcase/ProjectActions.paths.test.tsx b/app/components/showcase/ProjectActions.paths.test.tsx
new file mode 100644
index 0000000..c19565f
--- /dev/null
+++ b/app/components/showcase/ProjectActions.paths.test.tsx
@@ -0,0 +1,168 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { getFeaturedProjects } from "@/lib/portfolio-data";
+import { canOpenSite, ProjectActions } from "./ProjectActions";
+import { buildShowcaseItems, type ShowcaseItem } from "./ShowcaseProvider";
+
+/**
+ * Testes de caminhos-base de ProjectActions (CC 7) e canOpenSite (CC 2).
+ * Sem `grouped` (a lista): "Ver case", "Ampliar vídeo" (só com onExpand) e "Abrir site" (só com site no ar) são três
+ * paradas do Tab cada uma. Com `grouped` (a vitrine fixa): uma barra de ferramentas e UMA parada, o roving tabindex:
+ * a parada é "Ver case" até o foco passar a outra ação que ainda exista; as setas e Home/End movem o foco.
+ * Combinações: grouped x (com | sem onExpand) x (com | sem site).
+ */
+
+jest.mock("next/link", () => ({
+ __esModule: true,
+ default: ({
+ children,
+ prefetch: _prefetch,
+ ...props
+ }: { children?: React.ReactNode; prefetch?: unknown } & Record<
+ string,
+ unknown
+ >) => {children},
+}));
+
+const base = buildShowcaseItems(getFeaturedProjects(null)).find(
+ ({ project }) => project.demoUrl,
+) as ShowcaseItem;
+
+function item(overrides: Partial): ShowcaseItem {
+ return { ...base, project: { ...base.project, ...overrides } };
+}
+
+const withSite = item({
+ demoUrl: "https://exemplo.com.br",
+ demoAvailability: "available",
+});
+const withoutSite = item({ demoUrl: null, demoAvailability: "unknown" });
+const siteDown = item({
+ demoUrl: "https://exemplo.com.br",
+ demoAvailability: "unavailable",
+});
+
+const link = (name: RegExp) => screen.getByRole("link", { name });
+const tabindexes = () =>
+ Array.from(document.querySelectorAll("[data-roving]")).map(
+ (element) => `${element.getAttribute("data-roving")}:${element.tabIndex}`,
+ );
+const press = (key: string) =>
+ fireEvent.keyDown(document.activeElement as Element, { key });
+
+describe("canOpenSite", () => {
+ it.each([
+ ["site no ar", withSite, true],
+ ["sem endereço", withoutSite, false],
+ ["endereço dado como fora do ar", siteDown, false],
+ ])("path: %s -> %s", (_name, project, expected) => {
+ expect(canOpenSite(project.project)).toBe(expected);
+ });
+});
+
+describe("ProjectActions sem grouped (a lista)", () => {
+ it("path: expand and a live site -> three actions, no toolbar, no roving attributes (each is its own Tab stop)", () => {
+ const { container } = render(
+ ,
+ );
+
+ expect(link(/Ver case/)).toBeVisible();
+ expect(screen.getByRole("button", { name: /Ampliar/ })).toBeVisible();
+ expect(link(/Abrir site/)).toHaveAttribute("target", "_blank");
+ expect(screen.queryByRole("toolbar")).toBeNull();
+ expect(container.querySelector("[data-roving]")).toBeNull();
+ expect(container.querySelector("[tabindex]")).toBeNull();
+ });
+
+ it("path: no onExpand (before the page mounts) and no site -> only 'Ver case'", () => {
+ render();
+
+ expect(link(/Ver case/)).toBeVisible();
+ expect(screen.queryByRole("button")).toBeNull();
+ expect(screen.queryByRole("link", { name: /Abrir site/ })).toBeNull();
+ });
+
+ it("path: a site declared down -> no 'Abrir site' even with an address", () => {
+ render();
+
+ expect(screen.queryByRole("link", { name: /Abrir site/ })).toBeNull();
+ });
+
+ it("path: the expand button runs onExpand", () => {
+ const onExpand = jest.fn();
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: /Ampliar/ }));
+
+ expect(onExpand).toHaveBeenCalledTimes(1);
+ });
+});
+
+describe("ProjectActions com grouped (a vitrine fixa)", () => {
+ it("path: all three actions -> one toolbar named after the project, one Tab stop ('Ver case'), the others at -1", () => {
+ render();
+
+ expect(
+ screen.getByRole("toolbar", {
+ name: `Ações de ${withSite.project.title}`,
+ }),
+ ).toBeInTheDocument();
+ expect(tabindexes()).toEqual(["case:0", "expand:-1", "site:-1"]);
+ });
+
+ it("path: the arrows walk the three actions in order and stop at the ends; Home and End jump; Tab is left alone", () => {
+ render();
+ const expand = screen.getByRole("button", { name: /Ampliar/ });
+
+ act(() => link(/Ver case/).focus());
+ press("ArrowRight");
+ expect(expand).toHaveFocus();
+ press("ArrowRight");
+ expect(link(/Abrir site/)).toHaveFocus();
+ press("ArrowRight");
+ expect(link(/Abrir site/)).toHaveFocus();
+ press("Home");
+ expect(link(/Ver case/)).toHaveFocus();
+ press("End");
+ expect(link(/Abrir site/)).toHaveFocus();
+ // o Tab sai do grupo em vez de andar dentro dele: não é cancelado
+ expect(press("Tab")).toBe(true);
+ });
+
+ it("path: the Tab stop follows the last focused action, so Shift+Tab and Tab come back to it", () => {
+ render();
+
+ act(() => link(/Abrir site/).focus());
+
+ expect(tabindexes()).toEqual(["case:-1", "expand:-1", "site:0"]);
+ });
+
+ it("path: no site -> the toolbar has two actions and the arrows never reach a missing 'Abrir site'", () => {
+ render();
+
+ expect(tabindexes()).toEqual(["case:0", "expand:-1"]);
+ act(() => screen.getByRole("button", { name: /Ampliar/ }).focus());
+ press("ArrowRight");
+ expect(screen.getByRole("button", { name: /Ampliar/ })).toHaveFocus();
+ });
+
+ it("path: no onExpand and no site -> a toolbar of one action, which is the Tab stop", () => {
+ render();
+
+ expect(tabindexes()).toEqual(["case:0"]);
+ expect(screen.getByRole("toolbar")).toBeInTheDocument();
+ });
+
+ it("path: the stop was on 'Abrir site' and the next render has no site -> back to 'Ver case', never a missing stop", () => {
+ const { rerender } = render(
+ ,
+ );
+ act(() => link(/Abrir site/).focus());
+ expect(tabindexes()).toContain("site:0");
+
+ rerender(
+ ,
+ );
+
+ expect(tabindexes()).toEqual(["case:0", "expand:-1"]);
+ });
+});
diff --git a/app/components/showcase/ProjectActions.tsx b/app/components/showcase/ProjectActions.tsx
index e7af463..49322cf 100644
--- a/app/components/showcase/ProjectActions.tsx
+++ b/app/components/showcase/ProjectActions.tsx
@@ -1,5 +1,8 @@
+"use client";
+
import Link from "next/link";
import type { ShowcaseItem } from "./ShowcaseProvider";
+import { useRovingTabindex } from "./useRovingTabindex";
/** O site publicado abre em nova aba quando existe e não foi dado como fora do ar. */
export function canOpenSite(project: ShowcaseItem["project"]) {
@@ -10,19 +13,49 @@ export function canOpenSite(project: ShowcaseItem["project"]) {
* Ações de um projeto na vitrine: "Ver case" (contorno) leva ao estudo de caso; "Ampliar vídeo" (contorno,
* com ícone) abre a janela ampliada; "Abrir site" (link de texto, nova aba) só existe com `demoUrl`.
* Nenhuma é verde-limão: o preenchido de destaque é só da ação de contato.
+ *
+ * Com `grouped`, as ações são UMA parada no Tab (barra de ferramentas com roving tabindex: as setas e Home/End movem o
+ * foco entre elas): na vitrine fixa só o projeto em cena existe, e sem isto eram três paradas a mais por projeto.
*/
export function ProjectActions({
item,
onExpand,
+ grouped = false,
}: {
item: ShowcaseItem;
/** Sem a janela ampliada (antes de o navegador montar a página) o botão nem aparece. */
onExpand?: () => void;
+ /** As ações viram uma parada só no Tab (a vitrine fixa); na lista, cada uma é a sua. */
+ grouped?: boolean;
}) {
const { project } = item;
+ const site = canOpenSite(project);
+ // só as ações que existem podem ser a parada do grupo (um projeto sem site não tem "Abrir site")
+ const present = [
+ "case",
+ ...(onExpand ? ["expand"] : []),
+ ...(site ? ["site"] : []),
+ ];
+ const { groupProps, itemProps } = useRovingTabindex("case", (key) =>
+ present.includes(key),
+ );
+ const roving = (key: string) => (grouped ? itemProps(key) : {});
return (
-
-
+
+
Ver case
de {project.title}
@@ -32,6 +65,7 @@ export function ProjectActions({
className="ds-link ds-link-muted ds-reel-expand"
onClick={onExpand}
aria-haspopup="dialog"
+ {...roving("expand")}
>