feat(radio): add radio custom example

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

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { Radio, RadioGroup, useRadioState } from "ariakit/radio";
+import { VisuallyHidden } from "ariakit/visually-hidden";
+import "./style.css";
+
+export default function Example() {
+  const radio = useRadioState();
+  const [focusAppleVisible, setFocusAppleVisible] = useState(false);
+  const [focusOrangeVisible, setFocusOrangeVisible] = useState(false);
+  const [focusWatermelonVisible, setFocusWatermelonVisible] = useState(false);
+
+  return (
+    <RadioGroup state={radio}>
+      <label className="label">
+        <VisuallyHidden>
+          <Radio
+            value="apple"
+            onFocusVisible={() => setFocusAppleVisible(true)}
+            onBlur={() => setFocusAppleVisible(false)}
+          />
+        </VisuallyHidden>
+        <span
+          className={radio.value === "apple" ? "radio radio-checked" : "radio"}
+          data-focus-visible={focusAppleVisible ? "" : null}
+        />
+        apple
+      </label>
+      <label className="label">
+        <VisuallyHidden>
+          <Radio
+            value="orange"
+            onFocusVisible={() => setFocusOrangeVisible(true)}
+            onBlur={() => setFocusOrangeVisible(false)}
+          />
+        </VisuallyHidden>
+        <span
+          className={radio.value === "orange" ? "radio radio-checked" : "radio"}
+          data-focus-visible={focusOrangeVisible ? "" : null}
+        />
+        orange
+      </label>
+      <label className="label">
+        <VisuallyHidden>
+          <Radio
+            value="watermelon"
+            onFocusVisible={() => setFocusWatermelonVisible(true)}
+            onBlur={() => setFocusWatermelonVisible(false)}
+          />
+        </VisuallyHidden>
+        <span
+          className={
+            radio.value === "watermelon" ? "radio radio-checked" : "radio"
+          }
+          data-focus-visible={focusWatermelonVisible ? "" : null}
+        />
+        watermelon
+      </label>
+    </RadioGroup>
+  );
+}

packages/ariakit/src/radio/__examples__/radio-custom/readme.md

@@ -0,0 +1,7 @@
+# Custom Radio
+
+<p data-description>
+  Rendering a visually hidden <a href="/components/radio">Radio</a> using the <a href="/components/visually-hidden">VisuallyHidden</a> component to show a custom radio presentation in React.
+</p>
+
+<a href="./index.tsx" data-playground>Example</a>

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

@@ -0,0 +1,29 @@
+@import url("../radio/style.css");
+
+.radio {
+  @apply
+    w-5
+    h-5
+    rounded-full
+    flex
+    justify-center
+    items-center
+    border
+    text-blue-900
+    bg-blue-200/40
+    border-blue-600
+    dark:text-blue-100
+    dark:bg-blue-600/25
+    dark:border-blue-200/40
+  ;
+}
+
+.radio-checked {
+  @apply
+    after:[content:""]
+    after:w-2
+    after:h-2
+    after:rounded-full
+    after:bg-current
+  ;
+}

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

@@ -0,0 +1,103 @@
+import {
+  click,
+  getAllByRole,
+  getByLabelText,
+  getByRole,
+  press,
+  render,
+} from "ariakit-test";
+import { axe } from "jest-axe";
+import Example from ".";
+
+test("a11y", async () => {
+  render(<Example />);
+  const radioElements = getAllByRole("radio");
+  const radio = radioElements[0] as string | Element;
+  expect(await axe(getByRole("radiogroup"))).toHaveNoViolations();
+  expect(await axe(radio)).toHaveNoViolations();
+});
+
+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", 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", 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("arrow right", 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("arrow down", 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("arrow left", 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("arrow up", 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();
+});