feat(radio): add example

packages/ariakit/src/radio/__examples__/radio/index.tsx

@@ -0,0 +1,22 @@
+import { Radio, RadioGroup, useRadioState } from "ariakit/radio";
+import "./style.css";
+
+export default function Example() {
+  const radio = useRadioState();
+  return (
+    <RadioGroup state={radio}>
+      <label className="label">
+        <Radio className="radio" value="apple" />
+        apple
+      </label>
+      <label className="label">
+        <Radio className="radio" value="orange" />
+        orange
+      </label>
+      <label className="label">
+        <Radio className="radio" value="watermelon" />
+        watermelon
+      </label>
+    </RadioGroup>
+  );
+}

packages/ariakit/src/radio/__examples__/radio/style.css

@@ -0,0 +1,7 @@
+.label {
+  @apply flex items-center gap-2;
+}
+
+.radio[data-focus-visible] {
+  @apply outline-primary dark:outline-primary-dark;
+}

packages/ariakit/src/radio/__examples__/radio/test.tsx

@@ -0,0 +1,144 @@
+import {
+  click,
+  getByLabelText,
+  getByRole,
+  press,
+  render,
+} from "ariakit-test-utils";
+import Example from ".";
+
+test("render radiogroup", () => {
+  render(<Example />);
+  expect(getByRole("radiogroup")).toMatchInlineSnapshot(`
+   <div
+     role="radiogroup"
+   >
+     <label
+       class="label"
+     >
+       <input
+         aria-checked="false"
+         class="radio"
+         data-command=""
+         id="r:0"
+         type="radio"
+         value="apple"
+       />
+       apple
+     </label>
+     <label
+       class="label"
+     >
+       <input
+         aria-checked="false"
+         class="radio"
+         data-command=""
+         id="r:2"
+         tabindex="-1"
+         type="radio"
+         value="orange"
+       />
+       orange
+     </label>
+     <label
+       class="label"
+     >
+       <input
+         aria-checked="false"
+         class="radio"
+         data-command=""
+         id="r:4"
+         tabindex="-1"
+         type="radio"
+         value="watermelon"
+       />
+       watermelon
+     </label>
+   </div>
+  `);
+});
+
+test("Check radio button on click", async () => {
+  render(<Example />);
+  expect(getByLabelText("apple")).toHaveAttribute("aria-checked", "false");
+  expect(getByLabelText("orange")).toHaveAttribute("aria-checked", "false");
+  expect(getByLabelText("watermelon")).toHaveAttribute("aria-checked", "false");
+  await click(getByLabelText("apple"));
+  expect(getByLabelText("apple")).toHaveAttribute("aria-checked", "true");
+  expect(getByLabelText("orange")).toHaveAttribute("aria-checked", "false");
+  expect(getByLabelText("watermelon")).toHaveAttribute("aria-checked", "false");
+  await click(getByLabelText("watermelon"));
+  expect(getByLabelText("apple")).toHaveAttribute("aria-checked", "false");
+  expect(getByLabelText("watermelon")).toHaveAttribute("aria-checked", "true");
+});
+
+test("Tab key - Moves keyboard focus to the radio group", async () => {
+  render(<Example />);
+  expect(getByLabelText("apple")).not.toHaveFocus();
+  expect(getByLabelText("orange")).not.toHaveFocus();
+  expect(getByLabelText("watermelon")).not.toHaveFocus();
+
+  await press.Tab();
+  expect(getByLabelText("apple")).toHaveFocus();
+  expect(getByLabelText("apple")).not.toBeChecked();
+  expect(getByLabelText("orange")).not.toHaveFocus();
+  expect(getByLabelText("watermelon")).not.toHaveFocus();
+});
+
+test("Space key - Changes the state to checked, if the radio button with focus is not checked", async () => {
+  render(<Example />);
+  await press.Tab();
+  expect(getByLabelText("apple")).toHaveFocus();
+  expect(getByLabelText("apple")).not.toBeChecked();
+  await press.Space();
+  expect(getByLabelText("apple")).toHaveFocus();
+  expect(getByLabelText("apple")).toBeChecked();
+});
+
+test("Right arrow - Moves the focus to and checks the next radio button in the group", async () => {
+  render(<Example />);
+  await press.Tab();
+  await press.ArrowRight();
+  expect(getByLabelText("orange")).toHaveFocus();
+  expect(getByLabelText("orange")).toBeChecked();
+  await press.ArrowRight();
+  expect(getByLabelText("orange")).not.toBeChecked();
+  expect(getByLabelText("watermelon")).toBeChecked();
+  expect(getByLabelText("watermelon")).toHaveFocus();
+});
+
+test("Down arrow - Moves the focus to and checks the next radio button in the group", async () => {
+  render(<Example />);
+  await press.Tab();
+  await press.ArrowDown();
+  expect(getByLabelText("orange")).toHaveFocus();
+  expect(getByLabelText("orange")).toBeChecked();
+  await press.ArrowDown();
+  expect(getByLabelText("orange")).not.toBeChecked();
+  expect(getByLabelText("watermelon")).toBeChecked();
+  expect(getByLabelText("watermelon")).toHaveFocus();
+});
+
+test("Left arrow - Moves the focus to and checks the previous radio button in the group", async () => {
+  render(<Example />);
+  await press.Tab();
+  await press.ArrowLeft();
+  expect(getByLabelText("watermelon")).toHaveFocus();
+  expect(getByLabelText("watermelon")).toBeChecked();
+  await press.ArrowLeft();
+  expect(getByLabelText("watermelon")).not.toBeChecked();
+  expect(getByLabelText("orange")).toBeChecked();
+  expect(getByLabelText("orange")).toHaveFocus();
+});
+
+test("Up arrow - Moves the focus to and checks the previous radio button in the group", async () => {
+  render(<Example />);
+  await press.Tab();
+  await press.ArrowUp();
+  expect(getByLabelText("watermelon")).toHaveFocus();
+  expect(getByLabelText("watermelon")).toBeChecked();
+  await press.ArrowUp();
+  expect(getByLabelText("watermelon")).not.toBeChecked();
+  expect(getByLabelText("orange")).toBeChecked();
+  expect(getByLabelText("orange")).toHaveFocus();
+});

packages/ariakit/src/radio/readme.md

@@ -0,0 +1,3 @@
+# Radio
+
+<a href="./__examples__/radio/index.tsx" data-playground>Example</a>