fix(zoom): point the zoom row at the visible reason its levels are greyed out

Author: EtienneLescot

src/components/ai-edition/RightPanes.tsx

@@ -3972,10 +3972,12 @@ export function ChoiceRow<T extends string | number>({
 	columns,
 	tiles,
 	display,
+	describedBy,
 }: {
 	label: string;
 	/** `null` leaves a hole in the grid: the middle of the camera's position grid. An option
-	 *  can be `disabled` on its own, with the reason as its `title`. */
+	 *  can be `disabled` on its own: a disabled button takes no focus, so its `title` is only a
+	 *  mouse hint, and the reason must also be visible text the row points at (`describedBy`). */
 	options: ReadonlyArray<{
 		value: T;
 		label: string;
@@ -3993,13 +3995,16 @@ export function ChoiceRow<T extends string | number>({
 	/** Ce que montre un bouton. Par défaut l'icône s'il y en a une, et alors `label` lui sert de
 	 *  nom ; sinon le texte. */
 	display?: "text" | "icon" | "both";
+	/** Id of the visible text that explains the row, typically why some options are disabled. */
+	describedBy?: string;
 }) {
 	const buttonsRef = useRef<Array<HTMLButtonElement | null>>([]);
 	const mode = display ?? (options.some((o) => o?.icon) ? "icon" : "text");
 	return (
 		<div
 			role="group"
 			aria-label={label}
+			aria-describedby={describedBy}
 			className={`${styles.choiceRow} ${tiles ? styles.choiceRowTiles : ""}`}
 			style={{ gridTemplateColumns: `repeat(${columns ?? options.length}, minmax(0, 1fr))` }}
 			onKeyDown={(e) => {

src/components/ai-edition/v4/FloatingInspector.tsx

@@ -26,7 +26,7 @@ import {
 	ZoomIn,
 } from "lucide-react";
 import type { ComponentProps } from "react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { parseCustomPlaybackSpeedInput } from "@/components/video-editor/customPlaybackSpeed";
 import {
@@ -544,6 +544,8 @@ export function ZoomLevelControl({
 	};
 
 	const tooDeep = ts("zoom.levelBlurs", { max: maxScale });
+	const tooDeepId = useId();
+	const limited = maxScale < MAX_ZOOM_SCALE;
 	const presets = ZOOM_PRESETS.map((preset) =>
 		preset.value > maxScale ? { ...preset, disabled: true, title: tooDeep } : preset,
 	);
@@ -558,9 +560,15 @@ export function ZoomLevelControl({
 					options={presets}
 					value={requested}
 					onChange={setScale}
+					describedBy={limited ? tooDeepId : undefined}
 				/>,
 			)}
-			{maxScale < MAX_ZOOM_SCALE ? <p className={shell.hint}>{tooDeep}</p> : null}
+			{/* Visible, not only a `title`: a disabled preset cannot take keyboard focus. */}
+			{limited ? (
+				<p id={tooDeepId} className={shell.hint}>
+					{tooDeep}
+				</p>
+			) : null}
 			{paneRow(
 				ts("zoom.customScale"),
 				<input

src/components/ai-edition/v4/ZoomLevelControl.test.tsx

@@ -135,7 +135,14 @@ describe("ZoomLevelControl", () => {
 		const buttons = screen.getAllByRole("button") as HTMLButtonElement[];
 		expect(buttons.map((b) => b.disabled)).toEqual([false, false, false, true]);
 		expect(buttons[3]).toHaveAttribute("title", "zoom.levelBlurs:2.5");
-		expect(screen.getByText("zoom.levelBlurs:2.5")).toBeInTheDocument();
+		// The reason is visible text the row points at, not only a title on a button that a
+		// keyboard can never focus.
+		const hint = screen.getByText("zoom.levelBlurs:2.5");
+		expect(screen.getByRole("group", { name: "zoom.level" })).toHaveAttribute(
+			"aria-describedby",
+			hint.id,
+		);
+		expect(hint.id).not.toBe("");
 
 		const field = screen.getByRole("textbox", { name: "zoom.customScale" });
 		fireEvent.change(field, { target: { value: "3" } });
@@ -148,6 +155,9 @@ describe("ZoomLevelControl", () => {
 	it("says nothing when every level is within reach", () => {
 		renderControl(3);
 		expect(screen.queryByText(/zoom\.levelBlurs/)).not.toBeInTheDocument();
+		expect(screen.getByRole("group", { name: "zoom.level" })).not.toHaveAttribute(
+			"aria-describedby",
+		);
 	});
 
 	it("ignores an unparseable draft without touching the region", () => {