FocusManager.jsx

import React from 'react';

const NAVIGATION_KEYS = [
  'Tab',
  'ArrowUp',
  'ArrowRight',
  'ArrowDown',
  'ArrowLeft',
  'Home',
  'End',
  'PageUp',
  'PageDown',
  'Enter',
  ' ',
  'Escape',

  /* IE9 and Firefox < 37 */
  'Up',
  'Right',
  'Down',
  'Left',
  'Esc'
];

class FocusManager extends React.Component {
  state = {
    keyboardFocus: false,
    elements: []
  };

  componentDidMount = () => {
    this.setState({ elements: document.getElementsByClassName('focus-ring') });

    document.addEventListener('keydown', this.onKeydownHandler, true);
    document.addEventListener('mousedown', this.onMousedownHandler, true);
    document.addEventListener('focus', this.onFocusHandler, true);
    document.addEventListener('blur', this.onBlurHandler, true);
  };

  onKeydownHandler = event => {
    if (event.ctrlKey || event.altKey || event.metaKey || NAVIGATION_KEYS.indexOf(event.key) === -1) {
      return;
    }

    this.setState({
      keyboardFocus: true
    });

    if (document.activeElement && document.activeElement !== document.body) {
      document.activeElement.classList.add('focus-ring');
    }
  };

  onMousedownHandler = () => {
    this.setState({
      keyboardFocus: false
    });

    if (this.state.elements.length > 0) {
      for (let i = 0; i < this.state.elements.length; i++) {
        // remove focus ring
        this.state.elements[i].classList.remove('focus-ring');
      }
    }
  };

  onFocusHandler = event => {
    if (this.state.keyboardFocus) {
      event.target.classList.add('focus-ring');
    }
  };

  onBlurHandler = event => {
    event.target.classList.remove('focus-ring');
  };

  render() {
    return (
      <>
        {this.props.children}
      </>
    );
  }
}

export default FocusManager;