@griddo/ax 12.10.5 → 12.11.1-rc.0

package/src/__tests__/modules/Redirects/RedirectItem/RedirectItem.test.tsx

@@ -0,0 +1,163 @@
+import { parseTheme } from "@ax/helpers";
+import RedirectItem from "@ax/modules/Redirects/RedirectItem";
+import * as S from "@ax/modules/Redirects/RedirectItem/style";
+import { REDIRECT_TYPE_COLORS } from "@ax/modules/Redirects/utils";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect, RedirectType } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const redirect: IRedirect = {
+	id: 1,
+	from: "/about/team",
+	to: { pageId: 7, url: "/about/people" },
+	site: { siteId: 2, siteName: "UST School", siteUrl: "/ust" },
+	domain: "https://ust.edu",
+	date: "2021-10-15T00:00:00.000Z",
+};
+
+const renderItem = (overrides: Partial<IRedirect> = {}, isSiteItem = false, setFormValues = vi.fn()) =>
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RedirectItem
+				redirect={{ ...redirect, ...overrides }}
+				isSelected={false}
+				onChange={vi.fn()}
+				toggleToast={vi.fn()}
+				setFormValues={setFormValues}
+				formValues={redirect}
+				addRedirect={vi.fn()}
+				currentFilter=""
+				isSiteItem={isSiteItem}
+				hoverCheck={false}
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+describe("[UC-AX-manage-redirects] RedirectItem redirection type tag", () => {
+	it("AC8 · paints the redirect type on the row", () => {
+		renderItem({ type: "301" });
+
+		expect(screen.getByTestId("tag-square").textContent).toEqual("301");
+	});
+
+	it("AC8 · leaves the cell empty, not absent, when the redirect has no type", () => {
+		renderItem();
+
+		expect(screen.queryByTestId("tag-square")).toBeNull();
+		// La celda tiene que seguir ocupando su hueco o la fila se descuadra
+		// respecto a la cabecera y a las filas que sí traen tipo.
+		expect(screen.getAllByRole("cell")[1].textContent).toEqual("");
+	});
+
+	it("AC8 · keeps the column in place whether or not there is a type", () => {
+		// El recuento por sí solo no basta: borrar la columna baja los dos lados
+		// por igual. Hay que fijar también cuántas celdas tiene la fila.
+		const cellsInGlobalScope = 7;
+
+		const { unmount } = renderItem({ type: "301" });
+		expect(screen.getAllByRole("cell")).toHaveLength(cellsInGlobalScope);
+		unmount();
+
+		renderItem();
+
+		expect(screen.getAllByRole("cell")).toHaveLength(cellsInGlobalScope);
+	});
+
+	it("AC8 · keeps the type column in site scope, without the site one", () => {
+		renderItem({ type: "301" }, true);
+
+		expect(screen.getByTestId("tag-square")).toBeTruthy();
+		expect(screen.queryByText("UST School")).toBeNull();
+	});
+});
+
+describe("[UC-AX-manage-redirects] TypeTag colours", () => {
+	const renderTag = (type: RedirectType) =>
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<S.TypeTag type="square" text={type} color={REDIRECT_TYPE_COLORS[type]} />
+			</ThemeProvider>,
+			{ store },
+		);
+
+	it("AC8 · paints 301 with the permanent colour", () => {
+		renderTag("301");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule("background-color", "#C9EFFF");
+	});
+
+	it("AC8 · paints 302 with the temporary colour", () => {
+		renderTag("302");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule("background-color", "#DBB9FF");
+	});
+
+	it("AC8 · keeps the text readable over the pastel background", () => {
+		// Tag paints a near-white text whenever `color` is set, unreadable on these
+		// backgrounds. TypeTag lo revierte con un `&&`, que duplica especificidad;
+		// hay que pedirle al matcher ese mismo selector, porque jsdom no aplica la
+		// cascada y sin `modifier` devuelve la regla plana de TagSquare.
+		renderTag("301");
+
+		expect(screen.getByTestId("tag-square")).toHaveStyleRule(
+			"color",
+			parseTheme(globalTheme).color.textMediumEmphasis,
+			{ modifier: "&&" },
+		);
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectItem editing", () => {
+	it("AC7 · seeds the form with 301 when the row carries no type", () => {
+		const setFormValues = vi.fn();
+		renderItem({}, false, setFormValues);
+
+		fireEvent.click(screen.getByText("/about/team"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "301" }));
+	});
+
+	it("should open the row from the type cell too", () => {
+		// Todas las celdas de la fila abren la edición; si la del tipo se queda sin
+		// onClick, clicar el tag no hace nada y las demás sí.
+		const setFormValues = vi.fn();
+		renderItem({ type: "301" }, false, setFormValues);
+
+		fireEvent.click(screen.getByTestId("tag-square"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "301" }));
+	});
+
+	it("AC7 · keeps the type the row already has", () => {
+		const setFormValues = vi.fn();
+		renderItem({ type: "302" }, false, setFormValues);
+
+		fireEvent.click(screen.getByText("/about/team"));
+
+		expect(setFormValues).toHaveBeenCalledWith(expect.objectContaining({ type: "302" }));
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectItem type normalisation", () => {
+	it("should paint the tag when the API sends the type as a number", () => {
+		// El store normaliza a string (containers/Redirects/actions), pero la fila
+		// no debe depender de ello para pintar.
+		renderItem({ type: 301 as never });
+
+		expect(screen.getByTestId("tag-square").textContent).toEqual("301");
+	});
+});

package/src/__tests__/modules/Redirects/RedirectPanel/RedirectPanel.test.tsx

@@ -0,0 +1,134 @@
+// `connect` captura el action creator al cargar el módulo, así que hay que
+// sustituirlo antes de que se importe el panel (vi.mock se iza).
+const updateRedirectSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		updateRedirect: (...args: unknown[]) => {
+			updateRedirectSpy(...args);
+			return () => Promise.resolve();
+		},
+	},
+}));
+
+import { parseTheme } from "@ax/helpers";
+import RedirectPanel from "@ax/modules/Redirects/RedirectPanel";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+const mockStore = configureStore([thunk]);
+// El panel monta el UrlField, que arrastra el PageFinder conectado:
+// necesita sites.currentSiteInfo/sites y app.lang/globalLangs.
+const store = mockStore({
+	app: { isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+});
+
+const formValues: IRedirect = {
+	from: "/about/team",
+	to: { pageId: undefined, url: "/about/people" },
+	type: "301",
+};
+
+const renderPanel = (overrides: Partial<IRedirect> = {}, setFormValues = vi.fn()) => {
+	render(
+		<ThemeProvider theme={parseTheme(globalTheme)}>
+			<RedirectPanel
+				isOpen={true}
+				isOpenedSecond={false}
+				toggleModal={vi.fn()}
+				toggleSecondaryPanel={vi.fn()}
+				formValues={{ ...formValues, ...overrides }}
+				setFormValues={setFormValues}
+				addRedirect={vi.fn()}
+				currentFilter=""
+			/>
+		</ThemeProvider>,
+		{ store },
+	);
+
+	return { setFormValues };
+};
+
+describe("[UC-AX-manage-redirects] RedirectPanel redirection type", () => {
+	it("AC7 · offers both types with their descriptions", () => {
+		renderPanel();
+
+		expect(screen.getByText("301 - Permanent")).toBeTruthy();
+		expect(screen.getByText("302 - Temporary")).toBeTruthy();
+		expect(screen.getByText("Keeps SEO. Use for definitive redirects.")).toBeTruthy();
+		expect(screen.getByText("Doesn’t keep SEO. Use for short-lived changes.")).toBeTruthy();
+	});
+
+	it("AC7 · preselects the type held in the form", () => {
+		renderPanel();
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(true);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("should not preselect anything when the type is not a string", () => {
+		// Documenta por qué el store normaliza: RadioGroup compara con ===, así que
+		// un 301 numérico no casa con la opción "301" y el panel sale en blanco.
+		renderPanel({ type: 301 as never });
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(false);
+		expect(temporary.checked).toBe(false);
+	});
+
+	it("AC7 · preselects 302 when the form holds it", () => {
+		renderPanel({ type: "302" });
+
+		const [permanent, temporary] = screen.getAllByTestId<HTMLInputElement>("radio-field-input");
+		expect(permanent.checked).toBe(false);
+		expect(temporary.checked).toBe(true);
+	});
+
+	it("AC7 · reports the chosen type without touching the rest of the form", () => {
+		const { setFormValues } = renderPanel();
+
+		const [, temporary] = screen.getAllByTestId("radio-field-input");
+		fireEvent.click(temporary);
+
+		expect(setFormValues).toHaveBeenCalledWith({ ...formValues, type: "302" });
+	});
+});
+
+describe("[UC-AX-manage-redirects] RedirectPanel update payload", () => {
+	it("AC7 · sends the chosen type on update (PUT)", async () => {
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<RedirectPanel
+					isOpen={true}
+					isOpenedSecond={false}
+					toggleModal={vi.fn()}
+					toggleSecondaryPanel={vi.fn()}
+					redirect={{ ...formValues, id: 7 }}
+					formValues={{ ...formValues, id: 7, type: "302" }}
+					setFormValues={vi.fn()}
+					addRedirect={vi.fn()}
+					currentFilter="&sites=1"
+				/>
+			</ThemeProvider>,
+			{ store },
+		);
+
+		// "Update Redirect" es también el título del panel; hay que ir al botón.
+		fireEvent.click(screen.getByRole("button", { name: "Update Redirect" }));
+
+		expect(updateRedirectSpy).toHaveBeenCalledWith(
+			{ from: "/about/team", to: "/about/people", type: "302" },
+			7,
+			"&sites=1",
+		);
+	});
+});

package/src/__tests__/modules/Redirects/Redirects/Redirects.create.test.tsx

@@ -0,0 +1,69 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+const addRedirectSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: () => () => Promise.resolve(),
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: (...args: unknown[]) => {
+			addRedirectSpy(...args);
+			return () => Promise.resolve();
+		},
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const store = configureStore([thunk])({
+	redirects: { redirects: [], totalItems: 0, totalImports: 0, imports: null },
+	sites: { currentSiteInfo: null, sites: [{ id: 1, name: "UST School" }] },
+	app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+describe("[UC-AX-manage-redirects] Redirects — crear con tipo", () => {
+	it("AC7 · creates as 301 when the author does not touch the type (POST)", () => {
+		render(
+			<MemoryRouter>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+				</ThemeProvider>
+			</MemoryRouter>,
+			{ store },
+		);
+
+		fireEvent.click(screen.getByText("New Redirect"));
+		// Hay varios inputs en pantalla (el buscador del MainWrapper incluido);
+		// el autoComplete del panel es el que identifica el campo "Old URL".
+		const oldUrl = document.querySelector('input[autocomplete="redirect-old"]') as HTMLInputElement;
+		fireEvent.change(oldUrl, { target: { value: "/old" } });
+		fireEvent.click(screen.getByRole("button", { name: "Add Redirect" }));
+
+		expect(addRedirectSpy).toHaveBeenCalledWith(
+			expect.objectContaining({ type: "301" }),
+			expect.any(Function),
+			undefined,
+			expect.any(String),
+		);
+	});
+});

package/src/__tests__/modules/Redirects/Redirects/Redirects.edit.test.tsx

@@ -0,0 +1,91 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: () => () => Promise.resolve(),
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: () => () => Promise.resolve(),
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen, within } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const redirect: IRedirect = {
+	id: 1,
+	from: "/about/team",
+	to: { url: "https://example.com/team" },
+	type: "302",
+	site: { siteId: 2, siteName: "UST School", siteUrl: "/ust" },
+	date: "2021-10-15T00:00:00.000Z",
+};
+
+const store = configureStore([thunk])({
+	redirects: { redirects: [redirect], totalItems: 1, totalImports: 0, imports: null },
+	sites: { currentSiteInfo: null, sites: [{ id: 2, name: "UST School" }] },
+	app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+// El panel de alta sigue montado, cerrado, mientras se edita una fila, y pinta
+// los mismos radios: el aserto se acota al único panel abierto.
+const OPEN_PANEL = "[data-testid='floating-panel'][data-is-open='true']";
+
+const openPanel = () => {
+	expect(document.querySelectorAll(OPEN_PANEL)).toHaveLength(1);
+	return document.querySelector(OPEN_PANEL) as HTMLElement;
+};
+
+// El grupo de un radio, como lo define el HTML: mismo `name` y mismo form owner.
+const radioGroupOf = (radio: HTMLInputElement) =>
+	Array.from(document.querySelectorAll<HTMLInputElement>('input[type="radio"]')).filter(
+		(other) => other.name === radio.name && other.form === radio.form,
+	);
+
+describe("[UC-AX-manage-redirects] Redirects — editar el tipo", () => {
+	it("AC10 · checks the row's type in the open panel while the add panel stays mounted", () => {
+		render(
+			<MemoryRouter>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+				</ThemeProvider>
+			</MemoryRouter>,
+			{ store },
+		);
+
+		fireEvent.click(screen.getByTestId("redirect-type"));
+
+		// Primero la causa: si el grupo incluyera los radios del panel cerrado, el
+		// `checked` sería del panel que se re-renderice el último, y en el
+		// navegador eso cambia según el orden en que lleguen las peticiones del
+		// panel (medido en el e2e de QA `sites/edit/011`).
+		const radio302 = within(openPanel()).getByRole("radio", { name: "302 - Temporary" }) as HTMLInputElement;
+		expect(radioGroupOf(radio302)).toHaveLength(2);
+
+		expect(radio302).toBeChecked();
+
+		fireEvent.click(within(openPanel()).getByText("301 - Permanent"));
+
+		expect(within(openPanel()).getByRole("radio", { name: "301 - Permanent" })).toBeChecked();
+	});
+});

package/src/__tests__/modules/Redirects/Redirects/Redirects.filter.test.tsx

@@ -0,0 +1,131 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+const getRedirectsSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: (...args: unknown[]) => {
+			getRedirectsSpy(...args);
+			return () => Promise.resolve();
+		},
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: () => () => Promise.resolve(),
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	getRedirectsSpy.mockClear();
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+// `totalItems` por encima de los 50 por página para que el paginador tenga más
+// de una página y se pueda comprobar el reseteo.
+const renderScreen = (currentSiteInfo: { id: number; name: string } | null) => {
+	const store = configureStore([thunk])({
+		redirects: { redirects: [], totalItems: 120, totalImports: 0, imports: null },
+		sites: { currentSiteInfo, sites: [{ id: 5, name: "UST School" }] },
+		app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	});
+
+	return render(
+		<MemoryRouter>
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+			</ThemeProvider>
+		</MemoryRouter>,
+		{ store },
+	);
+};
+
+const chooseType = (type: string) => {
+	fireEvent.click(screen.getByTestId("redirect-type-filter"));
+
+	const option = screen.getAllByTestId("list-item").find((item) => item.textContent === type);
+	fireEvent.click(option as HTMLElement);
+};
+
+const lastCall = () => getRedirectsSpy.mock.lastCall as [{ page: number }, string];
+
+describe("[UC-AX-manage-redirects] Redirects — filtrar por tipo", () => {
+	it("AC9 · sends the chosen type in the listing query", () => {
+		renderScreen(null);
+
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("&type=302");
+	});
+
+	it("AC9 · keeps the site scope when filtering by type", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("&sites=5&type=302");
+	});
+
+	it("AC9 · goes back to the first page", () => {
+		renderScreen(null);
+
+		const pageInput = screen.getByTestId("pagination-text-input");
+		fireEvent.change(pageInput, { target: { value: "2" } });
+		fireEvent.blur(pageInput);
+		expect(lastCall()[0].page).toBe(2);
+
+		chooseType("302");
+
+		expect(lastCall()[0].page).toBe(1);
+	});
+
+	it("AC9 · tags the chosen type, in site scope too", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+
+		expect(screen.getByText("Type: 302")).toBeTruthy();
+	});
+
+	it("AC9 · replaces the type instead of adding to it — the filter is single choice", () => {
+		renderScreen(null);
+
+		chooseType("302");
+		chooseType("301");
+
+		expect(lastCall()[1]).toBe("&type=301");
+	});
+
+	it("AC9 · clears the type when the chosen one is picked again", () => {
+		renderScreen(null);
+
+		chooseType("302");
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("");
+	});
+
+	it("AC9 · Clear All returns the listing to its site, not to the global catalogue", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+		fireEvent.click(screen.getByText("Clear All"));
+
+		expect(lastCall()[1]).toBe("&sites=5");
+	});
+});

package/src/components/Fields/ConditionalField/style.tsx

@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
 export const Content = styled.div`
   transition: all 0.5s ease-in-out;
   margin-top: ${(p) => p.theme.spacing.m};
-  div:last-child {
+  > div:last-child {
     margin-bottom: 0;
   }
 `;

package/src/components/Fields/RadioField/index.tsx

@@ -1,7 +1,7 @@
 import * as S from "./style";
 
 const RadioField = (props: IRadioFieldProps): JSX.Element => {
-	const { name, title, value, checked, error, disabled, tabIndex, onChange } = props;
+	const { name, title, description, value, checked, error, disabled, tabIndex, onChange } = props;
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		if (onChange) {
@@ -9,10 +9,24 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 		}
 	};
 
+	// Con descripción, el título va en su propio nodo y el input apunta a él con
+	// aria-labelledby: si la descripción cuelga del <label>, el nombre accesible
+	// concatena las dos cadenas sin separador ("301 - PermanentKeeps SEO."). La
+	// descripción se queda dentro del <label> para que clicarla siga marcando la
+	// opción, y se anuncia aparte con aria-describedby. Sin descripción no se
+	// envuelve nada, para no alterar el DOM de los radios que ya existen.
+	const titleId = `${name}-${value}-title`;
+	const descriptionId = `${name}-${value}-description`;
+
 	return (
 		<S.Wrapper data-testid="radio-field-wrapper">
-			<S.Label>
-				{title}
+			<S.Label hasDescription={!!description}>
+				{description ? <S.Title id={titleId}>{title}</S.Title> : title}
+				{description && (
+					<S.Description id={descriptionId} data-testid="radio-field-description">
+						{description}
+					</S.Description>
+				)}
 				<S.Input
 					type="radio"
 					name={name}
@@ -22,6 +36,8 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 					onChange={handleChange}
 					data-testid="radio-field-input"
 					tabIndex={tabIndex}
+					aria-labelledby={description ? titleId : undefined}
+					aria-describedby={description ? descriptionId : undefined}
 				/>
 				<S.CheckMark checked={checked} error={error} />
 			</S.Label>
@@ -32,6 +48,7 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 export interface IRadioFieldProps {
 	name: string;
 	title?: string;
+	description?: string;
 	value: string;
 	checked?: boolean;
 	error?: boolean;

package/src/components/Fields/RadioField/style.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const Wrapper = styled.div``;
 
-export const Label = styled.label`
+export const Label = styled.label<{ hasDescription?: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   position: relative;
   padding-left: calc(${(p) => p.theme.spacing.s} + ${(p) => p.theme.spacing.xs});
@@ -10,6 +10,23 @@ export const Label = styled.label`
   cursor: pointer;
   user-select: none;
   min-height: 16px;
+  ${(p) =>
+		p.hasDescription &&
+		`
+    display: block;
+    font-weight: ${p.theme.fontWeight.semibold};
+  `}
+`;
+
+export const Title = styled.span``;
+
+// Mismo par de tokens que el HelpText de FieldsBehavior, que es el texto
+// descriptivo que ya usa el CMS bajo un campo.
+export const Description = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: block;
+  margin-top: ${(p) => p.theme.spacing.xxs};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
 `;
 
 export const CheckMark = styled.span<{ checked: boolean | undefined; error: boolean | undefined }>`