@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/teste/List.test.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { faInbox } from "@fortawesome/free-solid-svg-icons";
+import List from "../components/List/List";
+import ListItem from "../components/List/ListItem";
+describe("ListItem", () => {
+    it("sem as nem href é um button dentro de um li", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025" }) }));
+        const botao = screen.getByRole("button", { name: /Memorando 114\/2025/ });
+        expect(botao.tagName).toBe("BUTTON");
+        expect(botao).toHaveAttribute("type", "button");
+        expect(botao.parentElement?.tagName).toBe("LI");
+        expect(container.querySelectorAll("li")).toHaveLength(1);
+    });
+    it("com href vira link; target _blank ganha rel seguro", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Of\u00EDcio", href: "/oficios/31", target: "_blank" }) }));
+        const link = screen.getByRole("link", { name: /Ofício/ });
+        expect(link).toHaveAttribute("href", "/oficios/31");
+        expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    });
+    it("as='div' sem onClick é só leitura: sem role nem tabindex", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Somente leitura" }) }));
+        const linha = container.querySelector(".umds-list-item");
+        expect(linha.tagName).toBe("DIV");
+        expect(linha).not.toHaveAttribute("role");
+        expect(linha).not.toHaveAttribute("tabindex");
+        expect(linha).not.toHaveClass("umds-list-item--interactive");
+    });
+    it("as='div' com onClick é acionável por Enter e Espaço", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { as: "div", title: "Acion\u00E1vel", onClick: aoClicar }) }));
+        const linha = screen.getByRole("button", { name: /Acionável/ });
+        linha.focus();
+        await usuario.keyboard("{Enter}");
+        await usuario.keyboard(" ");
+        expect(aoClicar).toHaveBeenCalledTimes(2);
+    });
+    it("monta título, subtítulo, meta, início e fim nos lugares certos", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025", subtitle: "Novo contrato - Governo", meta: "23 de agosto de 2025", start: _jsx("span", { "data-testid": "inicio", children: "AV" }), end: _jsx("span", { "data-testid": "fim", children: "novo" }), children: _jsx("span", { "data-testid": "livre", children: "conte\u00FAdo livre" }) }) }));
+        expect(container.querySelector(".umds-list-item__title")).toHaveTextContent("Memorando 114/2025");
+        expect(container.querySelector(".umds-list-item__subtitle")).toHaveTextContent("Novo contrato - Governo");
+        expect(container.querySelector(".umds-list-item__meta")).toHaveTextContent("23 de agosto de 2025");
+        expect(container.querySelector(".umds-list-item__start")).toContainElement(screen.getByTestId("inicio"));
+        expect(container.querySelector(".umds-list-item__end")).toContainElement(screen.getByTestId("fim"));
+        expect(container.querySelector(".umds-list-item__body")).toContainElement(screen.getByTestId("livre"));
+    });
+    it("title aceita nó e não vira o atributo title do HTML", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: _jsx("b", { "data-testid": "rico", children: "Rico" }) }) }));
+        expect(screen.getByTestId("rico")).toBeInTheDocument();
+        expect(container.querySelector("[title]")).toBeNull();
+    });
+    it("sem start, end e textos, não desenha as regiões vazias", () => {
+        const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "S\u00F3 t\u00EDtulo" }) }));
+        expect(container.querySelector(".umds-list-item__start")).toBeNull();
+        expect(container.querySelector(".umds-list-item__end")).toBeNull();
+        expect(container.querySelector(".umds-list-item__subtitle")).toBeNull();
+        expect(container.querySelector(".umds-list-item__meta")).toBeNull();
+    });
+    it("selected marca aria-current e a classe de seleção", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Atual", selected: true }) }));
+        const botao = screen.getByRole("button", { name: /Atual/ });
+        expect(botao).toHaveAttribute("aria-current", "true");
+        expect(botao).toHaveClass("umds-list-item--selected");
+    });
+    it("disabled bloqueia o clique e o foco do botão", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Bloqueada", disabled: true, onClick: aoClicar }) }));
+        const botao = screen.getByRole("button", { name: /Bloqueada/ });
+        expect(botao).toBeDisabled();
+        await usuario.click(botao);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("link disabled perde o href e declara aria-disabled", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Link bloqueado", href: "/x", disabled: true }) }));
+        const link = screen.getByText("Link bloqueado").closest("a");
+        expect(link).not.toHaveAttribute("href");
+        expect(link).toHaveAttribute("aria-disabled", "true");
+    });
+    it("clique chama onClick com o evento", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx("ul", { children: _jsx(ListItem, { title: "Abrir", onClick: aoClicar }) }));
+        await usuario.click(screen.getByRole("button", { name: /Abrir/ }));
+        expect(aoClicar).toHaveBeenCalledTimes(1);
+    });
+    it("repassa aria-label, id, data-* e style ao elemento interativo", () => {
+        render(_jsx("ul", { children: _jsx(ListItem, { "aria-label": "Abrir memorando", id: "item-1", "data-origem": "home", style: { marginTop: 4 } }) }));
+        const botao = screen.getByRole("button", { name: "Abrir memorando" });
+        expect(botao).toHaveAttribute("id", "item-1");
+        expect(botao).toHaveAttribute("data-origem", "home");
+        expect(botao).toHaveStyle({ marginTop: "4px" });
+    });
+});
+describe("List", () => {
+    it("é uma ul com role list, nome acessível e gap padrão", () => {
+        render(_jsxs(List, { ariaLabel: "Documentos n\u00E3o lidos", children: [_jsx(ListItem, { title: "A" }), _jsx(ListItem, { title: "B" })] }));
+        const lista = screen.getByRole("list", { name: "Documentos não lidos" });
+        expect(lista.tagName).toBe("UL");
+        expect(lista).toHaveClass("umds-list--gap-quarck");
+        expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    });
+    it("as='ol' e gap trocam o elemento e a classe", () => {
+        render(_jsx(List, { as: "ol", gap: "nano", ariaLabel: "Passos", children: _jsx(ListItem, { title: "A" }) }));
+        const lista = screen.getByRole("list", { name: "Passos" });
+        expect(lista.tagName).toBe("OL");
+        expect(lista).toHaveClass("umds-list--gap-nano");
+    });
+    it("ariaLabelledby aponta para o título visível", () => {
+        render(_jsxs(_Fragment, { children: [_jsx("h2", { id: "titulo", children: "Prazos a vencer" }), _jsx(List, { ariaLabelledby: "titulo", children: _jsx(ListItem, { title: "A" }) })] }));
+        expect(screen.getByRole("list", { name: "Prazos a vencer" })).toBeInTheDocument();
+    });
+    it("sem isEmpty mostra os itens e nunca o estado vazio", () => {
+        render(_jsx(List, { ariaLabel: "Lista", emptyTitle: "Nada aqui", children: _jsx(ListItem, { title: "A" }) }));
+        expect(screen.queryByText("Nada aqui")).toBeNull();
+    });
+    it("isEmpty troca os itens pelo EmptyState dentro da própria lista", () => {
+        const aoAgir = vi.fn();
+        const { container } = render(_jsx(List, { ariaLabel: "Lista", isEmpty: true, emptyTitle: "Nenhum documento", emptyDescription: "Tudo em dia.", emptyIcon: faInbox, emptyActionLabel: "Atualizar", onEmptyAction: aoAgir, children: _jsx(ListItem, { title: "N\u00E3o aparece" }) }));
+        expect(screen.queryByRole("list")).toBeNull();
+        expect(screen.queryByText("Não aparece")).toBeNull();
+        const raiz = container.firstElementChild;
+        expect(raiz).toHaveAttribute("role", "status");
+        expect(raiz).toHaveClass("umds-list--empty");
+        expect(raiz.querySelector(".umds-empty-state")).not.toBeNull();
+        expect(screen.getByText("Nenhum documento")).toBeInTheDocument();
+        expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
+        expect(raiz.querySelector(".umds-empty-state--sm")).not.toBeNull();
+        screen.getByRole("button", { name: "Atualizar" }).click();
+        expect(aoAgir).toHaveBeenCalledTimes(1);
+    });
+    it("isEmpty sem título usa o texto padrão", () => {
+        render(_jsx(List, { ariaLabel: "Lista", isEmpty: true }));
+        expect(screen.getByText("Nenhum item encontrado")).toBeInTheDocument();
+    });
+    it("o conteúdo ao redor da lista não é desmontado ao esvaziar", () => {
+        const Tela = ({ vazia }) => (_jsxs("section", { children: [_jsx("h2", { children: "Documentos" }), _jsx("input", { "aria-label": "Buscar" }), _jsx(List, { ariaLabel: "Documentos", isEmpty: vazia, children: _jsx(ListItem, { title: "A" }) }), _jsx("nav", { "aria-label": "Pagina\u00E7\u00E3o", children: "p\u00E1g. 1" })] }));
+        const { rerender } = render(_jsx(Tela, { vazia: false }));
+        const busca = screen.getByLabelText("Buscar");
+        rerender(_jsx(Tela, { vazia: true }));
+        expect(screen.getByLabelText("Buscar")).toBe(busca);
+        expect(screen.getByRole("heading", { name: "Documentos" })).toBeInTheDocument();
+        expect(screen.getByRole("navigation", { name: "Paginação" })).toBeInTheDocument();
+    });
+    it("slot empty (prop empty no React) substitui o EmptyState", () => {
+        render(_jsx(List, { ariaLabel: "Lista", isEmpty: true, empty: _jsx("p", { "data-testid": "vazio", children: "Nada por aqui" }) }));
+        expect(screen.getByTestId("vazio")).toBeInTheDocument();
+        expect(document.querySelector(".umds-empty-state")).toBeNull();
+    });
+});

package/dist/teste/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/Modal.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Modal from "../components/Modal/Modal";
+/**
+ * Modal sem `title` saía com `role="dialog"` anônimo: o leitor de tela dizia
+ * só "diálogo". Com título, quem nomeia é o `aria-labelledby`; sem título,
+ * `ariaLabel`; sem nenhum dos dois, o genérico "Diálogo".
+ */
+describe("Modal · nome acessível", () => {
+    it("com title, é nomeado pelo título e ignora ariaLabel", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "Admitir colaborador", ariaLabel: "Outro nome" }));
+        const dialogo = screen.getByRole("dialog", { name: "Admitir colaborador" });
+        expect(dialogo).toHaveAttribute("aria-labelledby");
+        expect(dialogo).not.toHaveAttribute("aria-label");
+    });
+    it("sem title, usa ariaLabel", () => {
+        render(_jsx(Modal, { open: true, inline: true, ariaLabel: "Pr\u00E9-visualiza\u00E7\u00E3o do documento" }));
+        const dialogo = screen.getByRole("dialog", { name: "Pré-visualização do documento" });
+        expect(dialogo).not.toHaveAttribute("aria-labelledby");
+    });
+    it("sem title e sem ariaLabel, nunca sai anônimo", () => {
+        render(_jsx(Modal, { open: true, inline: true }));
+        expect(screen.getByRole("dialog", { name: "Diálogo" })).toBeInTheDocument();
+    });
+});

package/dist/teste/ModalVariantes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/ModalVariantes.test.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Modal from "../components/Modal/Modal";
+import Select from "../components/Select/Select";
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+/** Troca `window.matchMedia` por um que responde `matches` e deixa disparar `change`. */
+function simularTela(matches) {
+    const ouvintes = new Set();
+    vi.stubGlobal("matchMedia", (consulta) => ({
+        matches,
+        media: consulta,
+        addEventListener: (_, fn) => ouvintes.add(fn),
+        removeEventListener: (_, fn) => ouvintes.delete(fn),
+    }));
+    return (novo) => ouvintes.forEach((fn) => fn({ matches: novo }));
+}
+describe("Modal · variant primary", () => {
+    it("fica no modal base (três faixas), com a classe do cabeçalho cheio", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "primary", title: "Resolver tarefa" }));
+        const dialogo = screen.getByRole("dialog", { name: "Resolver tarefa" });
+        expect(dialogo).toHaveClass("umds-modal--primary", "umds-modal--base");
+        expect(dialogo).not.toHaveClass("umds-modal--feedback");
+        expect(dialogo.querySelector(".umds-modal__header")).not.toBeNull();
+        expect(dialogo.querySelector(".umds-modal__icon")).toBeNull();
+    });
+    it("positive continua sendo diálogo de feedback", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "positive", title: "Pronto" }));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--feedback");
+    });
+});
+describe("Modal · width e maxWidth", () => {
+    it("escreve a largura e, sem maxWidth, solta o teto do size", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px" }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo.style.width).toBe("600px");
+        expect(dialogo.style.maxWidth).toBe("100%");
+    });
+    it("maxWidth explícito vale", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "90%", maxWidth: "720px" }));
+        expect(screen.getByRole("dialog").style.maxWidth).toBe("720px");
+    });
+    it("sem width nem maxWidth não escreve style", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog").getAttribute("style")).toBeNull();
+    });
+});
+describe("Modal · Escape", () => {
+    it("fecha com Escape no borbulho", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("não fecha quando outro componente já consumiu a tecla (defaultPrevented)", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        const consumidor = document.createElement("div");
+        consumidor.addEventListener("keydown", (e) => e.preventDefault());
+        document.body.appendChild(consumidor);
+        fireEvent.keyDown(consumidor, { key: "Escape" });
+        expect(aoFechar).not.toHaveBeenCalled();
+        consumidor.remove();
+    });
+    it("Select aberto dentro do modal fecha só a lista, e o modal fica", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar, children: _jsx(Select, { label: "Categoria", options: [{ label: "Administrativa", value: "adm" }] }) }));
+        const gatilho = screen.getByRole("combobox");
+        fireEvent.click(gatilho);
+        expect(gatilho).toHaveAttribute("aria-expanded", "true");
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(gatilho).toHaveAttribute("aria-expanded", "false");
+        expect(aoFechar).not.toHaveBeenCalled();
+        // Com o Select fechado, o Esc seguinte é do modal.
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · controles de janela escolhidos um a um", () => {
+    it("true liga os quatro, como antes", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: true }));
+        for (const nome of ["Modo normal", "Expandir", "Tela cheia", "Minimizar"]) {
+            expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+        }
+    });
+    it("lista escolhe só os pedidos, sem minimizar", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["expand", "fullscreen"] }));
+        expect(screen.getByRole("button", { name: "Expandir" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Tela cheia" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Minimizar" })).toBeNull();
+        expect(screen.queryByRole("button", { name: "Modo normal" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem windowControls só há o ×", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem o botão normal, clicar de novo no modo ativo volta ao normal; e o normal usa o tamanho do modal", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px", windowControls: ["expand"] }));
+        const dialogo = screen.getByRole("dialog");
+        const expandir = screen.getByRole("button", { name: "Expandir" });
+        expect(dialogo).not.toHaveClass("umds-modal--janela-normal");
+        expect(dialogo.style.width).toBe("600px");
+        fireEvent.click(expandir);
+        expect(dialogo).toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("");
+        fireEvent.click(expandir);
+        expect(dialogo).not.toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("600px");
+    });
+    it("minimizar chama onMinimize", () => {
+        const aoMinimizar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["minimize"], onMinimize: aoMinimizar }));
+        fireEvent.click(screen.getByRole("button", { name: "Minimizar" }));
+        expect(aoMinimizar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · responsive", () => {
+    it("em tela larga continua centralizado", () => {
+        simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("em tela estreita vira painel de baixo, sem controles de janela e sem a largura livre", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true, width: "600px", windowControls: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).toHaveClass("umds-modal--sheet");
+        expect(dialogo.style.width).toBe("");
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(dialogo.querySelector(".umds-modal__grabber")).not.toBeNull();
+    });
+    it("acompanha a mudança de tamanho da tela", () => {
+        const mudar = simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).not.toHaveClass("umds-modal--sheet");
+        act(() => mudar(true));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--sheet");
+        act(() => mudar(false));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("sem responsive nunca vira painel", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+});

package/dist/teste/MultiSelectErro.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/MultiSelectErro.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+/**
+ * O foco do MultiSelect cai no trigger `role="combobox"`, não num `<select>`
+ * nativo. Então nada liga a mensagem de erro ao campo de graça: se o
+ * `aria-describedby` não estiver no combobox, o leitor de tela anuncia
+ * "Setor, caixa de combinação" e a pessoa nunca ouve POR QUE o campo está
+ * vermelho.
+ */
+const OPCOES = [
+    { label: "Recursos Humanos", value: "rh" },
+    { label: "Financeiro", value: "fin" },
+];
+describe("MultiSelect · erro e apoio ligados ao campo", () => {
+    it("a mensagem de erro descreve o combobox e o marca inválido", () => {
+        render(_jsx(MultiSelect, { label: "Setor", options: OPCOES, errorMessage: "Escolha um setor" }));
+        const campo = screen.getByRole("combobox", { name: "Setor" });
+        expect(campo).toHaveAccessibleDescription("Escolha um setor");
+        expect(campo).toHaveAttribute("aria-invalid", "true");
+    });
+    it("erro e texto de apoio entram os dois, erro primeiro", () => {
+        render(_jsx(MultiSelect, { label: "Setor", options: OPCOES, errorMessage: "Obrigat\u00F3rio", helperText: "Onde a pessoa trabalha" }));
+        expect(screen.getByRole("combobox")).toHaveAccessibleDescription("Obrigatório Onde a pessoa trabalha");
+    });
+    it("o apelido antigo `description` também é ligado", () => {
+        render(_jsx(MultiSelect, { label: "Setor", options: OPCOES, description: "Opcional" }));
+        expect(screen.getByRole("combobox")).toHaveAccessibleDescription("Opcional");
+    });
+    it("sem erro nem apoio, nada de aria-describedby ou aria-invalid", () => {
+        render(_jsx(MultiSelect, { label: "Setor", options: OPCOES }));
+        const campo = screen.getByRole("combobox");
+        expect(campo).not.toHaveAttribute("aria-describedby");
+        expect(campo).not.toHaveAttribute("aria-invalid");
+    });
+    it("`invalid` sem mensagem também marca aria-invalid", () => {
+        render(_jsx(MultiSelect, { label: "Setor", options: OPCOES, invalid: true }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true");
+    });
+    it("com `id`, os ids internos derivam dele", () => {
+        render(_jsx(MultiSelect, { id: "setor", label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-describedby", "setor-error");
+    });
+});
+describe("MultiSelect · ids na renderização do servidor", () => {
+    /**
+     * Id sorteado no render sai diferente no servidor e no cliente: a
+     * hidratação diverge e o describedby do HTML aponta para o nada. Duas
+     * renderizações de servidor têm de sair byte a byte iguais.
+     */
+    it("o HTML do servidor é determinístico", () => {
+        const html = () => renderToString(_jsx(MultiSelect, { label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(html()).toBe(html());
+    });
+    it("com `id`, o servidor já manda o describedby", () => {
+        const html = renderToString(_jsx(MultiSelect, { id: "setor", label: "Setor", options: OPCOES, errorMessage: "Erro" }));
+        expect(html).toContain('aria-describedby="setor-error"');
+        expect(html).toContain('id="setor-error"');
+    });
+});

package/dist/teste/NomeAcessivelSsr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/NomeAcessivelSsr.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+import Select from "../components/Select/Select";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+/**
+ * Select, MultiSelect e SegmentedControl nascem SEM id automático (utils/id):
+ * o id só é gerado no onMount, para o servidor e a primeira renderização do
+ * cliente saírem idênticos. Só que o nome acessível deles vinha de
+ * `aria-labelledby` apontando para esse id — no HTML do servidor, e até a
+ * hidratação, o combobox ficava sem nome (axe `aria-input-field-name`, visto
+ * no portal Astro com `client:visible`).
+ *
+ * Aqui o HTML sai do `renderToString`, que não dispara o onMount, e vai para
+ * o DOM do jsdom como o navegador receberia. O nome é conferido pelo cálculo
+ * do Testing Library, o mesmo algoritmo de nome acessível que o axe usa.
+ */
+const OPCOES = [
+    { label: "Recursos Humanos", value: "rh" },
+    { label: "Financeiro", value: "fin" },
+];
+const POR_PAGINA = [
+    { label: "10", value: "10" },
+    { label: "25", value: "25" },
+];
+function comoDoServidor(html) {
+    const raiz = document.createElement("div");
+    raiz.innerHTML = html;
+    document.body.appendChild(raiz);
+    return raiz;
+}
+describe("Nome acessível no HTML do servidor", () => {
+    // As raízes são montadas à mão (fora do render), e o cleanup global não as vê.
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+    it("Select: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", options: OPCOES })));
+        const campo = screen.getByRole("combobox", { name: "Setor" });
+        expect(campo).not.toHaveAttribute("aria-labelledby");
+        expect(campo).toHaveAttribute("aria-label", "Setor");
+    });
+    it("Select: `ariaLabel` continua valendo sobre o label", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", ariaLabel: "Setor do servidor", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setor do servidor" })).toBeInTheDocument();
+    });
+    it("Select com `id`: o servidor já liga pelo aria-labelledby", () => {
+        const html = renderToString(_jsx(Select, { id: "setor", label: "Setor", options: OPCOES }));
+        expect(html).toContain('aria-labelledby="setor-label"');
+        expect(html).not.toContain('aria-label="Setor"');
+    });
+    it("MultiSelect: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(MultiSelect, { label: "Setores", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setores" })).toBeInTheDocument();
+    });
+    it("SegmentedControl: grupo e segmentos têm nome antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })));
+        expect(screen.getByRole("radiogroup", { name: "Itens" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "10" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "25" })).toBeInTheDocument();
+    });
+    it("hidrata sem divergência e, montado, volta ao aria-labelledby", async () => {
+        const arvore = (_jsxs("div", { children: [_jsx(Select, { label: "Setor", options: OPCOES }), _jsx(MultiSelect, { label: "Setores", options: OPCOES }), _jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })] }));
+        const raiz = comoDoServidor(renderToString(arvore));
+        const erro = vi.spyOn(console, "error").mockImplementation(() => { });
+        const avisosDeHidratacao = [];
+        await act(async () => {
+            hydrateRoot(raiz, arvore, {
+                onRecoverableError: (e) => avisosDeHidratacao.push(e),
+            });
+        });
+        const chamadas = erro.mock.calls.map((c) => String(c[0]));
+        erro.mockRestore();
+        expect(avisosDeHidratacao).toEqual([]);
+        expect(chamadas.filter((c) => /hydrat|did not match/i.test(c))).toEqual([]);
+        const select = screen.getByRole("combobox", { name: "Setor" });
+        expect(select).toHaveAttribute("aria-labelledby");
+        expect(select).not.toHaveAttribute("aria-label");
+        const multi = screen.getByRole("combobox", { name: "Setores" });
+        expect(multi).toHaveAttribute("aria-labelledby");
+        const grupo = screen.getByRole("radiogroup", { name: "Itens" });
+        expect(grupo).toHaveAttribute("aria-labelledby");
+        expect(screen.getByRole("radio", { name: "10" })).not.toHaveAttribute("aria-label");
+    });
+});

package/dist/teste/OrgChart.test.d.ts

@@ -0,0 +1 @@
+export {};