APG Patterns

Switch

A control that allows users to toggle between two states: on and off.

React Vue Svelte Astro

Demo

Accessibility Features

WAI-ARIA Roles

WAI-ARIA States

aria-checked

Indicates the current checked state of the switch.

Values true | false
Required Yes (for switch role)
Default initialChecked prop (default: false)
Change Trigger Click, Enter, Space
Reference aria-checked (opens in new tab)

aria-disabled

Indicates the switch is perceivable but disabled.

Values true | undefined
Required No (only when disabled)
Reference aria-disabled (opens in new tab)

Keyboard Support

Key Action
Space Toggle the switch state (on/off)
Enter Toggle the switch state (on/off)

Accessible Naming

Switches must have an accessible name. This can be provided through:

  • Visible label (recommended) - The switch's child content provides the accessible name
  • aria-label - Provides an invisible label for the switch
  • aria-labelledby - References an external element as the label

Visual Design

This implementation follows WCAG 1.4.1 (Use of Color) by not relying solely on color to indicate state:

  • Thumb position - Left = off, Right = on
  • Checkmark icon - Visible only when the switch is on
  • Forced colors mode - Uses system colors for accessibility in Windows High Contrast Mode

Source Code

Switch.tsx 
import { cn } from "@/lib/utils";
import { useCallback, useState } from "react";

export interface SwitchProps
  extends Omit<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    "onClick" | "type" | "role" | "aria-checked"
  > {
  /** Initial checked state */
  initialChecked?: boolean;
  /** Switch label text */
  children?: React.ReactNode;
  /** Callback fired when checked state changes */
  onCheckedChange?: (checked: boolean) => void;
}

export const Switch: React.FC<SwitchProps> = ({
  initialChecked = false,
  children,
  onCheckedChange,
  className = "",
  disabled,
  ...buttonProps
}) => {
  const [checked, setChecked] = useState(initialChecked);

  const handleClick = useCallback(() => {
    if (disabled) return;
    const newChecked = !checked;
    setChecked(newChecked);
    onCheckedChange?.(newChecked);
  }, [checked, onCheckedChange, disabled]);

  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent<HTMLButtonElement>) => {
      if (disabled) return;
      if (event.key === " " || event.key === "Enter") {
        event.preventDefault();
        const newChecked = !checked;
        setChecked(newChecked);
        onCheckedChange?.(newChecked);
      }
    },
    [checked, onCheckedChange, disabled]
  );

  return (
    <button
      type="button"
      role="switch"
      {...buttonProps}
      className={cn("apg-switch", className)}
      aria-checked={checked}
      aria-disabled={disabled || undefined}
      disabled={disabled}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
    >
      <span className="apg-switch-track">
        <span className="apg-switch-icon" aria-hidden="true">
          <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M10.28 2.28a.75.75 0 00-1.06-1.06L4.5 5.94 2.78 4.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l5.25-5.25z"
              fill="currentColor"
            />
          </svg>
        </span>
        <span className="apg-switch-thumb" />
      </span>
      {children && <span className="apg-switch-label">{children}</span>}
    </button>
  );
};

export default Switch;

Usage

Example 
import { Switch } from './Switch';

function App() {
  return (
    <Switch
      initialChecked={false}
      onCheckedChange={(checked) => console.log('Checked:', checked)}
    >
      Enable notifications
    </Switch>
  );
}

API

Prop Type Default Description
initialChecked boolean false Initial checked state
onCheckedChange (checked: boolean) => void - Callback when state changes
disabled boolean false Whether the switch is disabled
children ReactNode - Switch label

All other props are passed to the underlying <button> element.

Testing

Tests cover APG compliance including keyboard interactions, ARIA attributes, and accessibility validation.

Switch.test.tsx 
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { axe } from "jest-axe";
import { describe, expect, it, vi } from "vitest";
import { Switch } from "./Switch";

describe("Switch", () => {
  // 🔴 High Priority: APG 準拠の核心
  describe("APG: ARIA 属性", () => {
    it('role="switch" を持つ', () => {
      render(<Switch>Wi-Fi</Switch>);
      expect(screen.getByRole("switch")).toBeInTheDocument();
    });

    it('初期状態で aria-checked="false"', () => {
      render(<Switch>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");
      expect(switchEl).toHaveAttribute("aria-checked", "false");
    });

    it('クリック後に aria-checked="true" に変わる', async () => {
      const user = userEvent.setup();
      render(<Switch>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");

      expect(switchEl).toHaveAttribute("aria-checked", "false");
      await user.click(switchEl);
      expect(switchEl).toHaveAttribute("aria-checked", "true");
    });

    it('type="button" が設定されている', () => {
      render(<Switch>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");
      expect(switchEl).toHaveAttribute("type", "button");
    });

    it("disabled 時に aria-disabled が設定される", () => {
      render(<Switch disabled>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");
      expect(switchEl).toHaveAttribute("aria-disabled", "true");
    });

    it("disabled 状態で aria-checked 変更不可", async () => {
      const user = userEvent.setup();
      render(<Switch disabled>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");

      expect(switchEl).toHaveAttribute("aria-checked", "false");
      await user.click(switchEl);
      expect(switchEl).toHaveAttribute("aria-checked", "false");
    });
  });

  describe("APG: キーボード操作", () => {
    it("Space キーでトグルする", async () => {
      const user = userEvent.setup();
      render(<Switch>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");

      expect(switchEl).toHaveAttribute("aria-checked", "false");
      switchEl.focus();
      await user.keyboard(" ");
      expect(switchEl).toHaveAttribute("aria-checked", "true");
    });

    it("Enter キーでトグルする", async () => {
      const user = userEvent.setup();
      render(<Switch>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");

      expect(switchEl).toHaveAttribute("aria-checked", "false");
      switchEl.focus();
      await user.keyboard("{Enter}");
      expect(switchEl).toHaveAttribute("aria-checked", "true");
    });

    it("Tab キーでフォーカス移動可能", async () => {
      const user = userEvent.setup();
      render(
        <>
          <Switch>Switch 1</Switch>
          <Switch>Switch 2</Switch>
        </>
      );

      await user.tab();
      expect(screen.getByRole("switch", { name: "Switch 1" })).toHaveFocus();
      await user.tab();
      expect(screen.getByRole("switch", { name: "Switch 2" })).toHaveFocus();
    });

    it("disabled 時は Tab キースキップ", async () => {
      const user = userEvent.setup();
      render(
        <>
          <Switch>Switch 1</Switch>
          <Switch disabled>Switch 2</Switch>
          <Switch>Switch 3</Switch>
        </>
      );

      await user.tab();
      expect(screen.getByRole("switch", { name: "Switch 1" })).toHaveFocus();
      await user.tab();
      expect(screen.getByRole("switch", { name: "Switch 3" })).toHaveFocus();
    });

    it("disabled 時はキー操作無効", async () => {
      const user = userEvent.setup();
      render(<Switch disabled>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");

      switchEl.focus();
      await user.keyboard(" ");
      expect(switchEl).toHaveAttribute("aria-checked", "false");
    });
  });

  // 🟡 Medium Priority: アクセシビリティ検証
  describe("アクセシビリティ", () => {
    it("axe による WCAG 2.1 AA 違反がない", async () => {
      const { container } = render(<Switch>Wi-Fi</Switch>);
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it("ラベル（children）でアクセシブルネームを持つ", () => {
      render(<Switch>Wi-Fi</Switch>);
      expect(screen.getByRole("switch", { name: "Wi-Fi" })).toBeInTheDocument();
    });

    it("aria-label でアクセシブルネームを設定できる", () => {
      render(<Switch aria-label="Enable notifications" />);
      expect(
        screen.getByRole("switch", { name: "Enable notifications" })
      ).toBeInTheDocument();
    });

    it("aria-labelledby で外部ラベルを参照できる", () => {
      render(
        <>
          <span id="switch-label">Bluetooth</span>
          <Switch aria-labelledby="switch-label" />
        </>
      );
      expect(
        screen.getByRole("switch", { name: "Bluetooth" })
      ).toBeInTheDocument();
    });
  });

  describe("Props", () => {
    it("initialChecked=true で ON 状態でレンダリングされる", () => {
      render(<Switch initialChecked>Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");
      expect(switchEl).toHaveAttribute("aria-checked", "true");
    });

    it("onCheckedChange が状態変化時に呼び出される", async () => {
      const handleCheckedChange = vi.fn();
      const user = userEvent.setup();
      render(
        <Switch onCheckedChange={handleCheckedChange}>Wi-Fi</Switch>
      );

      await user.click(screen.getByRole("switch"));
      expect(handleCheckedChange).toHaveBeenCalledWith(true);

      await user.click(screen.getByRole("switch"));
      expect(handleCheckedChange).toHaveBeenCalledWith(false);
    });
  });

  // 🟢 Low Priority: 拡張性
  describe("HTML 属性継承", () => {
    it("className が正しくマージされる", () => {
      render(<Switch className="custom-class">Wi-Fi</Switch>);
      const switchEl = screen.getByRole("switch");
      expect(switchEl).toHaveClass("custom-class");
      expect(switchEl).toHaveClass("apg-switch");
    });

    it("data-* 属性が継承される", () => {
      render(<Switch data-testid="custom-switch">Wi-Fi</Switch>);
      expect(screen.getByTestId("custom-switch")).toBeInTheDocument();
    });
  });
});

Resources