SVGのアクセシビリティを title タグで向上させる

　material-ui と material-icons で書いたコンポーネントを react-testing-library でテストしようとした。およそこんな形のコンポーネントだ。

import IconButton from '@material-ui/core/IconButton';
import AddIcon from '@material-ui/icons/Add';

const SomeComponent = ({ handleClick }) => {
  return (
    <IconButton color="primary" onClick={handleClick}>
      <AddIcon />
    </IconButton>
  );
}

　testing-library のセオリー通りにいけば alt 、 role ないし label を設定して適当なクエリ API を呼び出してテスト対象の要素を取得するところである。しかしどれを使って SVG アイコンのアクセシビリティを担保するか？

　答えは title タグを使うことだという。これがもっとも簡単な手段だとW3Cのレファレンスに書いてある。

　 Accessibility Features of SVG 

　Material-icon では次のように書ける。

  import IconButton from '@material-ui/core/IconButton';
  import AddIcon from '@material-ui/icons/Add';

  const SomeComponent = ({ handleClick }) => {
    return (
      <IconButton color="primary" onClick={handleClick}>
-       <AddIcon />
+       <AddIcon titleAccess="add-icon" />
      </IconButton>
    );
  }

　これで、 testing-library では getByTitle の API で要素を取得してテストも可能になる。次のような形だ。

import { render, fireEvent } from '@testing-library/react';

describe('event', () => {
  it('should be clickable.', () => {
    const handleClick = jest.fn();
    const { getByTitle } = render(<SomeComponent handleClick={handleClick} />);
    const icon = getByTitle('add-icon');
    fireEvent.click(icon);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});