Navigate overlay dropdowns via arrow keys

[pinussilvestrus]

Is your feature request related to a problem? Please describe.

Any overlay dropdown component is accessible via TAB & SHIFT + TAB to navigate through the options via keyboard.

That might not be intuitive enough, since any kind of dropdowns and select shall be navigatable via arrow keys as well. That's currently not possible.

Describe the solution you'd like

Make navigation via arrow keys possible.

Describe alternatives you've considered

/

Additional context

This is a follow up of #2616.

[pinussilvestrus]

I sketched how this could be possible given the existing option group structures we have in place with this commit.

function Options(props) {
  const { items, onSelect } = props;

  const focusRef = useArrowNavigation();

  return (
    <Section.Body>
      <ul ref={ focusRef }>
        // ...
      </ul>
    </Section.Body>
  );
}

function useArrowNavigation() {
  const ref = React.createRef(0);

  const handleKeydown = (event) => {
    const {
      key,
      keyCode,
      currentTarget
    } = event;

    if (key === 'ArrowDown' && keyCode == 40) {
      focusNext(currentTarget);
    } else if (key === 'ArrowUp' && keyCode == 38) {
      focusPrevious(currentTarget);
    }
  };

  React.useEffect(() => {
    if (!ref.current) {
      return;
    }

    const items = ref.current.querySelectorAll('li');

    items.forEach(i => i.addEventListener('keydown', handleKeydown));

    return () => {
      items.forEach(i => i.removeEventListener('keydown', handleKeydown));
    };

  }, [ ref.current ]);

  return ref;
}

/**
 *
 * @param {Node} focusElement
 */
function focusNext(focusElement) {
  const nextSibling = focusElement.nextSibling;

  // (1) focus immediate neighbor
  if (nextSibling) {
    return nextSibling.querySelector('button').focus();
  }

  // (2) try to find neighbor in other section
  const nextSection = focusElement.closest('section').nextElementSibling;
  return nextSection && nextSection.querySelector('li button').focus();
}

/**
 *
 * @param {Node} focusElement
 */
function focusPrevious(focusElement) {
  const previousSibling = focusElement.previousSibling;

  // (1) focus immediate neighbor
  if (previousSibling) {
    return previousSibling.querySelector('button').focus();
  }

  // (2) try to find neighbor in other section
  const previousSection = focusElement.closest('section').previousElementSibling;
  return previousSection && previousSection.querySelector('li:last-child button').focus();
}

branch: https://github.com/camunda/camunda-modeler/tree/navigate-with-arrow-keys

[pinussilvestrus]

Regarding the possible keyboard interaction improvements, we could take into consideration the WAI-ARIA recommendations for the menu component: https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12

Originally posted: #2616 (comment)