Skip to main content

useFindFocusableElements

Importing useFindFocusableElements Hook​

import { useFindFocusableElements } from '@ciceksepeti/cui-hooks';

Example​

import React, { useCallback, useRef, useState } from 'react';
import { useFindFocusableElements } from '@ciceksepeti/cui-hooks';

export const FindTabbableElements = () => {
  const ref = useRef(null);
  const [refNode, setRefNode] = useState();
  const { focusableElements } = useFindFocusableElements(refNode);

  const refCallback = useCallback((node) => {
    ref.current = node;
    setRefNode(node);
  }, []);

  return (
    <div ref={refCallback}>
      <button>button</button>
      <button>button</button>
      <p>text</p>
      <span>text</span>
    </div>
  );
};

Preview & Test​

PREVIEW & TEST AREA
useFindFocusableElements

  • Gets tabbable elements inside of passed nodeRef

  • The element is keyboard "focusable", as it is part of the document's sequential focus navigation order.

  • In this example, each focusable text represents focusable button elements which can be focused thorugh keyboard tab action.

  • As a result 2/4 elements are focusable which are buttons.

Element 1 -
Element 2 -
Element 3 -

text

Element 4 - text
RETURNING INFO AREA