fix(focusables): exclude children of hidden elements

docs/core/makeup-focusables/index.html

@@ -13,6 +13,7 @@ <h1>makeup-focusables demo</h1>
  <button id="appender1">Append Sequential</button>
  <button id="appender2">Append Non-Sequential</button>
  <button id="appender3">Append Hidden</button>
+ <button id="appender4">Append Nested Hidden</button>
 
  <ul id="list"></ul>
  </main>

docs/core/makeup-focusables/index.js

@@ -8,23 +8,28 @@ const listEl = document.getElementById("list");
 const appender1 = document.getElementById("appender1");
 const appender2 = document.getElementById("appender2");
 const appender3 = document.getElementById("appender3");
+const appender4 = document.getElementById("appender4");
 const output = document.getElementById("output");
 
 function onButtonClick(e) {
  e.preventDefault();
 
  const listItem = document.createElement("li");
+ listItem.innerText = `Item ${listEl.childNodes.length}`;
 
  if (e.target.id === "appender1") {
  listItem.setAttribute("tabindex", "0");
  } else if (e.target.id === "appender2") {
  listItem.setAttribute("tabindex", "-1");
- } else {
+ } else if (e.target.id === "appender3") {
  listItem.setAttribute("tabindex", "0");
  listItem.setAttribute("hidden", "hidden");
+ } else {
+ const listItemChild = document.createElement("button");
+ listItem.setAttribute("hidden", "hidden");
+ listItem.appendChild(listItemChild);
  }
 
- listItem.innerText = `Item ${listEl.childNodes.length}`;
  listEl.appendChild(listItem);
 
  const focusableEls = focusables(listEl);
@@ -34,3 +39,4 @@ function onButtonClick(e) {
 appender1.addEventListener("click", onButtonClick);
 appender2.addEventListener("click", onButtonClick);
 appender3.addEventListener("click", onButtonClick);
+appender4.addEventListener("click", onButtonClick);