Reactガイドを読んでいくその26

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

アクセシビリティ

何回かに分けてやっていきます。

フォーカス制御

作ったウェブアプリケーションはキーボードだけで操作できるかどうかも大切。
WebAIM: Keyboard Accessibility

キーボードフォーカスとフォーカス時のアウトライン（輪郭線）

ウェブページをみているときにTabキーを押したらカーソルが移動して、カーソル位置にフォーカスが出ている状態をいう。
CSSでoutline: 0をすれば消すこともできるが、フォーカス線そのものを置き換える時以外は使うべきではない。
基本としてカーソルが出ないような作りはNG

目的のコンテンツまで飛べる仕組み

高速化のために無駄な位置のものは選択できないように調整すると良い。
スキップリンク (“skiplink”) やスキップナビゲーションリンク (“skip navigation link”)を利用するとユーザーがキーボード操作した時にのみの隠れ機能が適用されます。

プログラムによりフォーカスを管理する

ReactはDOMを継続的に変更するためキーボードフォーカスをロストしたり予期しない要素へセットされるようなことが多い。
それを防ぐためDOM要素へのRefを使う。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Create a ref to store the textInput DOM element
    this.textInput = React.createRef();
  }
  render() {
  // Use the `ref` callback to store a reference to the text input DOM
  // element in an instance field (for example, this.textInput).
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

高階コンポーネント (HOC) を使う場合は、React の forwardRef 関数を使う。
react-aria-modalがフォーカスの例としてはおすすめ。

github.com

今日はここまで。