fix(ui): dropdown clickable options

Author: Apkawa

packages/ui/src/Dropdown/browser.test.tsx

@@ -32,6 +32,17 @@ test("Dropdown: шеврон открывает список, aria-expanded пе
   await expect.element(combobox).toHaveAttribute("aria-expanded", "false");
 });
 
+test("Dropdown: клик по пункту списка выбирает значение", async () => {
+  const { screen } = mountBrowser(
+    <Dropdown<string> items={["a", "b", "c"]} value="a" label="Выбор значения" />,
+  );
+  await screen.getByRole("button", { name: "Открыть список" }).click();
+  // Реальный клик по телу пункта: значение меняется, список закрывается
+  await screen.getByRole("option").nth(1).click();
+  await expect.element(screen.getByRole("combobox")).toHaveValue("b");
+  await expect.element(screen.getByRole("listbox")).not.toBeInTheDocument();
+});
+
 test("Dropdown: ARIA-снапшот базового состояния", async () => {
   const { screen } = mountBrowser(
     <Dropdown<string> items={["a", "b"]} value="a" label="Выбор значения" />,

packages/ui/src/Dropdown/index.tsx

@@ -32,9 +32,11 @@ const DropdownContext: Context<DropdownContextInterface<any>> = React.createCont
 let listboxIdCounter = 0;
 
 // ── Пункт списка ──
-// a11y (stage 4): обёртка пункта неинтерактивна (без tabIndex/onClick/onKeyDown) —
-// nested-interactive: интерактивный контрол в строке — кнопки внутри renderItem,
-// клик по телу пункта ничего не выбирает.
+// Клик по телу пункта выбирает значение (disabled-пункт кликом не выбирается).
+// Клик-выбору есть клавиатурный эквивалент: пункт фокусируем (tabIndex=0)
+// и выбирает его Enter/Space (a11y useKeyWithClickEvents). Кнопки внутри
+// renderItem остаются своими: их обработчики делают stopPropagation, так
+// что клик по контролу строки пункт не выбирает.
 function DropdownItem<T>(props: { value: T; index: number; nodeRef?: React.Ref<HTMLDivElement> }) {
   const { value, index, nodeRef } = props;
   const ctx = useContext(DropdownContext);
@@ -49,10 +51,21 @@ function DropdownItem<T>(props: { value: T; index: number; nodeRef?: React.Ref<H
   };
 
   return (
-    // biome-ignore lint/a11y/useFocusableInteractive: пункт вне tab-порядка (axe nested-interactive)
     <div
       ref={nodeRef}
       role="option"
+      tabIndex={disabled ? undefined : 0}
+      onClick={disabled ? undefined : () => ctx.onItemClick?.(value)}
+      // a11y: у пункта с onClick есть клавиатурный эквивалент (Enter/Space).
+      onKeyDown={(event) => {
+        if (disabled) {
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          ctx.onItemClick?.(value);
+        }
+      }}
       className={cx("ui-dropdown-item", disabled && "ui-dropdown-item--disabled")}
     >
       {renderItem()}

packages/ui/src/Dropdown/test.tsx

@@ -2,6 +2,9 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { Dropdown } from "./index";
 
+// Значение инпута-комбобокса (getByRole возвращает HTMLElement).
+const comboboxValue = () => (screen.getByRole("combobox") as HTMLInputElement).value;
+
 test("Dropdown smoke: дропдаун рендерит выбранное значение", () => {
   const { container } = render(<Dropdown<string> items={["a", "b"]} value="a" />);
   const input = container.querySelector("input");
@@ -49,14 +52,70 @@ test("Dropdown: у listbox есть пункты role=option прямыми де
   }
 });
 
-// a11y (stage 4): nested-interactive — пункт не самостоятельный интерактивный
-// элемент: у обёртки нет tabindex, клик по телу пункта ничего не выбирает
-// (интерактивные контролы — кнопки внутри строк).
-test("Dropdown: пункты не фокусируемы и не выбираются кликом по телу", () => {
-  render(<Dropdown<string> items={["a", "b"]} value="a" />);
+// Кликабельность пунктов: клик по телу пункта выбирает значение — инпут
+// показывает выбранное, onChange вызывается, список закрывается.
+test("Dropdown: клик по пункту выбирает значение и закрывает список", () => {
+  const onChange = vi.fn();
+  render(<Dropdown<string> items={["a", "b", "c"]} value="a" onChange={onChange} />);
   fireEvent.click(screen.getByRole("button", { name: "Открыть список" }));
-  const option = screen.getAllByRole("option")[0];
-  expect(option.hasAttribute("tabindex")).toBe(false);
-  fireEvent.click(option);
-  expect(screen.getByRole("listbox")).not.toBeNull();
+  fireEvent.click(screen.getAllByRole("option")[1]);
+  expect(onChange).toHaveBeenCalledWith("b");
+  const input = screen.getByRole("combobox") as HTMLInputElement;
+  expect(input.value).toBe("b");
+  expect(screen.queryByRole("listbox")).toBeNull();
+});
+
+// a11y (useKeyWithClickEvents): у пункта с onClick есть клавиатурный
+// эквивалент — пункт фокусируем (tabIndex) и выбирается по Enter/Space.
+test("Dropdown: пункт фокусируем и выбирается по Enter", () => {
+  const onChange = vi.fn();
+  render(<Dropdown<string> items={["a", "b"]} value="a" onChange={onChange} />);
+  fireEvent.click(screen.getByRole("button", { name: "Открыть список" }));
+  const option = screen.getAllByRole("option")[1];
+  expect(option.getAttribute("tabindex")).toBe("0");
+  fireEvent.keyDown(option, { key: "Enter" });
+  expect(onChange).toHaveBeenCalledWith("b");
+  expect(comboboxValue()).toBe("b");
+});
+
+// Отключённый пункт (checkDisabledItem) кликом не выбирается.
+test("Dropdown: клик по отключённому пункту ничего не выбирает", () => {
+  const onChange = vi.fn();
+  render(
+    <Dropdown<string>
+      items={["a", "b"]}
+      value="a"
+      onChange={onChange}
+      checkDisabledItem={(item) => item === "b"}
+    />,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Открыть список" }));
+  fireEvent.click(screen.getAllByRole("option")[1]);
+  expect(onChange).not.toHaveBeenCalled();
+  expect(comboboxValue()).toBe("a");
+});
+
+// Пункты с собственными контролами (renderItem): их обработчики делают
+// stopPropagation — клик по кнопке внутри строки не выбирает пункт.
+test("Dropdown: кнопка внутри renderItem не выбирает пункт", () => {
+  const onChange = vi.fn();
+  render(
+    <Dropdown<string>
+      items={["a", "b"]}
+      value="a"
+      onChange={onChange}
+      renderItem={({ item }) => (
+        <span>
+          {item}
+          <button type="button" onClick={(event) => event.stopPropagation()}>
+            x
+          </button>
+        </span>
+      )}
+    />,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Открыть список" }));
+  fireEvent.click(screen.getAllByRole("option")[1].querySelector("button")!);
+  expect(onChange).not.toHaveBeenCalled();
+  expect(comboboxValue()).toBe("a");
 });