JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<ul>
  <li><a href="#">1</a></li>
  <li>
    <ul>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li>
        <ul>
          <li><a href="#">4</a></li>
          <li>not focusable</li>
        </ul>
      </li>
      <li><a href="#">5</a></li>
    </ul>
  </li>
  <li><a href="#">6</a></li>
</ul>

JavaScript

const focusedElements = (element) => {
	const result = [element];
  let parent = element.parentNode;
  
  while (parent !== document.body) {
  	result.push(parent);
    parent = parent.parentNode;
  }
  
  return result;
};

document.addEventListener('click', (e) => {
	if (e.target instanceof HTMLAnchorElement) {
  	console.log(focusedElements(e.target));
  }
});