Consider descendents of closed details unfocusable

Somewhat counterintuitively, descendents of closed details elements are seemingly not inert, invisible, dimensionless, etc. Therefore we detect them explicitly to exclude them from focusable elements.
dividat · Mar 16, 2024 · 5342be1 · 5342be1
1 parent b582c1d
commit 5342be1
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 4 deletions.
diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
@@ -23,6 +23,9 @@ describe("focus-shift spec", () => {
 
       for (let pair of sequence) {
         switch (pair.eventType) {
+          case "click":
+            cy.get(pair.selector).click()
+            break
           case "focus":
             cy.get(pair.selector).then(($elem) => {
               $elem[0].focus()
@@ -194,6 +197,28 @@ describe("focus-shift spec", () => {
     ])
   )
 
+  it(
+    "ignores contents of closed details element",
+    testFor("./cypress/fixtures/details.html", { className: "rows" }, [
+      { eventType: "keydown", selector: "#button-1", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#summary-1", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#button-2", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#summary-1", options: keyevent({ key: "ArrowUp" }) },
+      { eventType: "click", selector: "#summary-1" },
+      { eventType: "focus", selector: "#summary-1" },
+      { eventType: "keydown", selector: "#group-button-1", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#group-button-2", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#summary-2", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#button-2", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#summary-2", options: keyevent({ key: "ArrowUp" }) },
+      { eventType: "click", selector: "#summary-2" },
+      { eventType: "focus", selector: "#summary-2" },
+      { eventType: "keydown", selector: "#subgroup-button-1", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#subgroup-button-2", options: keyevent({ key: "ArrowDown" }) },
+      { eventType: "keydown", selector: "#button-2", options: keyevent({ key: "ArrowDown" }) }
+    ])
+  )
+
   it(
     "allows canceling event handling",
     testFor("./cypress/fixtures/events.html", { className: "rows" }, [

diff --git a/cypress/fixtures/details.html b/cypress/fixtures/details.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+      button {
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="button-1">First Button</button>
+
+    <details>
+      <summary id="summary-1">Toggled Group</summary>
+      <button id="group-button-1">Group Button 1</button>
+      <button id="group-button-2">Group Button 2</button>
+      <details>
+        <summary id="summary-2">Toggle in Toggle</summary>
+        <button id="subgroup-button-1">Subgroup Button 1</button>
+        <button id="subgroup-button-2">Subgroup Button 2</button>
+      </details>
+    </details>
+
+    <button id="button-2">Last Button</button>
+
+    <script src="../../index.js"></script>
+  </body>
+</html>
diff --git a/examples/everything-bagel.html b/examples/everything-bagel.html
@@ -85,6 +85,13 @@
       <button>Normal Button 3</button>
     </div>
 
+    <details>
+      <summary>Multiple buttons behind a toggle</summary>
+      <button>Normal Button 1</button>
+      <button>Normal Button 2</button>
+      <button>Normal Button 3</button>
+    </details>
+
     <div class="nav-group" data-focus-group>
       <em>Default group</em>
       <div><button>Button 1</button></div>

diff --git a/index.js b/index.js
@@ -135,6 +135,7 @@ function getFocusableElements(container) {
  * - it has negative tabindex,
  * - it has been marked with `data-focus-skip`,
  * - it is a descendant of an element marked with `data-focus-skip`,
+ * - it is a descendant of a closed `details` element,
  * - it is `disabled`,
  * - it is `inert`.
  *
@@ -148,20 +149,42 @@ function getFocusableElements(container) {
 function isFocusable(element) {
   // Has negative tabindex attribute explicitly set
   if (parseInt(element.getAttribute("tabindex") || "", 10) <= -1) return false
+  // Is inert
+  if ("inert" in element && element.inert) return false
+  // Is disabled
+  if ("disabled" in element && element.disabled) return false
   // Is or descends from skipped element
   if (
     element.hasAttribute("data-focus-skip") ||
     element.closest("[data-focus-skip]") != null
   )
     return false
-  // Is inert
-  if ("inert" in element && element.inert) return false
-  // Is disabled
-  if ("disabled" in element && element.disabled) return false
+  // Descends from closed details element
+  if (hasClosedDetailsAncestor(element)) return false
 
   return true
 }
 
+/**
+ * Tests whether the element is contained within a closed `details` element.
+ *
+ * `summary` elements are excluded (return value `false`) if they are the summary of the top-most
+ * closed `details` element.
+ *
+ * @param {Element} element
+ * @returns {boolean} - True if the element is hidden because of descending from closed `details`
+ */
+function hasClosedDetailsAncestor(element) {
+  if (element.parentElement == null) return false
+
+  const parentElement = element.parentElement
+  if (element.tagName === "SUMMARY") {
+    return hasClosedDetailsAncestor(parentElement)
+  } else {
+    return parentElement.closest("details:not([open])") != null
+  }
+}
+
 /**
  * Get all candidates for receiving focus when moving from the active element in the given direction.
  *