A hook to enable keyboard handling on non-interactive elements that are made interactive.

_useA11yKeysClick.ts

import { useCallback } from 'react';

function isElementDisabled(el: HTMLElement): boolean {
  return (
    el.hasAttribute('disabled') ||
    el.getAttribute('aria-disabled') === 'true' ||
    el.getAttribute('data-disabled') === 'true'
  );
}

export function useA11yKeysClick() {
  const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>) => {
    const el = event.currentTarget as HTMLElement;
    if (isElementDisabled(el)) return;

    const { key } = event;
    if (key === 'Enter' || key === ' ') {
      event.preventDefault(); // Prevent spacebar scrolling
      el.click(); // Fire native click event
    }
  }, []);

  return {
    tabIndex: 0,
    role: 'button',
    onKeyDown,
  };
}

exampleUsage.tsx

function FancyBox() {

  return (
    <div
      {...useA11yKeysClick()}
      onClick={() => console.log('Activated')}
      aria-disabled="false"
    >
      I'm interactive
    </div>
  );
}