React accessibility provider

AccessibilityContext.js

import React from 'react';

export const AccessibilityContext = React.createContext({
  accessible: undefined,
  setAccessible: (/* accessible */) => {},
});

AccessibilityProvider.js

import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { AccessibilityContext } from './AccessibilityContext';

export function AccessibilityProvider({ initialAccessible, children }) {
  const [accessible, setAccessible] = useState(initialAccessible);

  const handleKeyDown = useCallback(event => {
    if (!['input', 'select', 'textarea'].includes(event.target.tagName.toLowerCase())) {
      setAccessible(true);
    }
  }, [setAccessible]);

  const handleMouseDown = useCallback(() => setAccessible(false), [setAccessible]);

  useEffect(() => {
    window.addEventListener('mousedown', handleMouseDown, { passive: true });
    window.addEventListener('keydown', handleKeyDown, { passive: true });

    return () => {
      window.removeEventListener('mousedown', handleMouseDown);
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleMouseDown, handleKeyDown]);

  return (
    <AccessibilityContext.Provider
      value={{
        accessible,
        setAccessible,
      }}
    >
      {children}
    </AccessibilityContext.Provider>
  );
}

AccessibilityProvider.defaultProps = {
  initialAccessible: false,
};

AccessibilityProvider.propTypes = {
  children: PropTypes.node.isRequired,
  initialAccessible: PropTypes.bool,
};

example.js

import React, { useContext } from 'react';
import { cx } from 'emotion';
import { AccessibilityContext } from './AccessibilityContext';
import styles from './example.module.css';

export const Example = ({ children }) => {
  const { accessible } = useContext(AccessibilityContext);
  
  return (
    <div
      className={cx(
        styles.example,
        accessible && styles['is-accessible'],
      )}
    >
      {children}
    </div>
  );
};

example.module.css

.example.is-accessible:focus {
  border: 1px solid blue;
}