React Ariaでアクセシビリティを考慮した実装をする（テストもやる）

npx create-next-app react-aria-storybook

bunx storybook@latest init
bun add react-aria-components

'use client';

import { useState } from 'react';
import {
  Button,
  ComboBox,
  Group,
  Input,
  Label,
  Popover,
} from 'react-aria-components';
import { ListBox } from './ListBox';

export type Option = { id: number; name: string };

const options: Option[] = [
  { id: 1, name: 'Aardvark' },
  { id: 2, name: 'Cat' },
  { id: 3, name: 'Dog' },
  { id: 4, name: 'Kangaroo' },
  { id: 5, name: 'Panda' },
  { id: 6, name: 'Snake' },
  { id: 7, name: 'Tiger' },
  { id: 8, name: 'Zebra' },
  { id: 9, name: 'Elephant' },
  { id: 10, name: 'Giraffe' },
];

export const Combobox: FC = () => {
  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
    options[0],
  );

  const handleSelectOption = (id: Key) => {
    const option = options.find((option) => id === option.name);
    if (!option) return;
    setSelectedOption(option);
  };

  return (
    <div className='grid grid-cols-1 gap-6'>
      <dl className='flex gap-2'>
        <dt>selected:</dt>
        <dd className='font-bold text-blue-700'>{selectedOption?.name}</dd>
      </dl>
      <ComboBox
        className='grid grid-cols-1 gap-1.5'
        onSelectionChange={handleSelectOption}
      >
        <Label className='text-sm'>Favorite Animal</Label>
        <Group className='cursor-pointer rounded border border-gray-300 bg-white px-1.5 py-1 focus-within:outline hover:outline focus-within:outline-2 focus-within:outline-gray-500 hover:outline-2 hover:outline-gray-500 focus-within:outline-offset-2 hover:outline-offset-2'>
          <Input className='cursor-pointer outline-none' />
          <Button aria-label='候補を表示'>▼</Button>
        </Group>
        <Popover>
          <ListBox options={options} />
        </Popover>
      </ComboBox>
    </div>
  );
};

import type { FC } from 'react';
import {
  ListBox as RACListBox,
  ListBoxItem as RACListBoxItem,
  composeRenderProps,
  type ListBoxItemProps,
} from 'react-aria-components';
import type { Option } from './Combobox';

const ListBoxItem = ({
  id,
  children,
  textValue,
  ...props
}: ListBoxItemProps) => {
  return (
    <RACListBoxItem
      {...props}
      id={id}
      textValue={textValue}
      className='flex cursor-pointer px-2 py-0.5 data-[focused]:border-gray-500 data-[focused]:border-y-2 data-[focused]:bg-blue-100 data-[focused]:py-0'
    >
      {composeRenderProps(children, (children, { isSelected }) => (
        <>
          <span className='flex flex-1 items-center gap-2 truncate font-normal'>
            {children}
          </span>
          <span>{isSelected && '✔'}</span>
        </>
      ))}
    </RACListBoxItem>
  );
};

type Props = {
  options: Option[];
  'aria-label'?: string;
};

export const ListBox: FC<Props> = ({ 'aria-label': ariaLabel, options }) => {
  return (
    <RACListBox
      aria-label={ariaLabel}
      className='max-h-52 w-48 overflow-auto rounded border border-gray-500 bg-white shadow-md'
    >
      {options.map((option) => (
        <ListBoxItem key={option.id} id={option.name} textValue={option.name}>
          {option.name}
        </ListBoxItem>
      ))}
    </RACListBox>
  );
};

import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { Combobox } from './Combobox';

const meta = {
  component: Combobox,
  title: 'components/combobox/Combobox',
} satisfies Meta<typeof Combobox>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement.ownerDocument.body);

    // comboboxにフォーカスが当たった時のスタイルを確認する
    await userEvent.tab();
    expect(canvas.getByRole('combobox')).toHaveFocus();
    expect(canvas.getByRole('group')).toHaveStyle({
      'outline-width': '2px',
      'outline-offset': '2px',
    });

    // optionを選択して値が変わることを確認する
    await userEvent.click(
      canvas.getByRole('button', { name: '候補を表示 Favorite Animal' }),
    );
    await userEvent.click(canvas.getByRole('option', { name: 'Cat' }));
    expect(canvas.getByRole('combobox')).toHaveValue('Cat');

    // typeして値が変わることを確認する
    await userEvent.clear(canvas.getByRole('combobox'));
    await userEvent.type(canvas.getByRole('combobox'), 'Dog');
    await userEvent.keyboard('{arrowdown}');
    await userEvent.keyboard('{enter}');
    expect(canvas.getByRole('combobox')).toHaveValue('Dog');
  },
} satisfies Story;

import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ListBox } from './ListBox';

const meta = {
  component: ListBox,
  title: 'components/combobox/ListBox',
} satisfies Meta<typeof ListBox>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
  args: {
    options: Array.from({ length: 10 }, (_, i) => ({
      id: i,
      name: `Option ${i}`,
    })),
  },
  render: ({ options }) => {
    return <ListBox aria-label='候補' options={options} />;
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.click(canvas.getByRole('option', { name: 'Option 0' }));
    await userEvent.keyboard('{arrowdown}');

    expect(canvas.getByRole('option', { name: 'Option 1' })).toHaveFocus();
    expect(canvas.getByRole('option', { name: 'Option 1' })).toHaveStyle({
      'border-top-width': '2px',
      'border-bottom-width': '2px',
    });
  },
} satisfies Story;

import AxeBuilder from '@axe-core/playwright';
import { expect, test } from '@playwright/test';

test('combobox page', async ({ page }, testInfo) => {
  await page.goto('/combobox');

  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
  await testInfo.attach('accessibility-scan-results', {
    body: JSON.stringify(accessibilityScanResults, null, 2),
    contentType: 'application/json',
  });

  await expect(
    page.getByRole('heading', { level: 1, name: 'Combobox' }),
  ).toBeVisible();
  await expect(
    page.getByRole('combobox', { name: 'Favorite Animal' }),
  ).toBeVisible();
  expect(accessibilityScanResults.violations).toEqual([]);
});