diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8f8a535 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +root = true + +[*.{js,ts}] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[*.html] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index fb13f94..29d7adc 100644 --- a/cypress/e2e/spec.cy.ts +++ b/cypress/e2e/spec.cy.ts @@ -23,8 +23,13 @@ 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).focus() + cy.get(pair.selector).then(($elem) => { + $elem[0].focus() + }) break default: cy.get("body") @@ -192,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 new file mode 100644 index 0000000..59e9464 --- /dev/null +++ b/cypress/fixtures/details.html @@ -0,0 +1,30 @@ + + + + + + + + + + +
+ Toggled Group + + +
+ Toggle in Toggle + + +
+
+ + + + + + diff --git a/examples/everything-bagel.html b/examples/everything-bagel.html index c8fbb35..966898f 100644 --- a/examples/everything-bagel.html +++ b/examples/everything-bagel.html @@ -85,6 +85,13 @@ +
+ Multiple buttons behind a toggle + + + +
+
Default group
diff --git a/index.js b/index.js index aea36a1..fb8272b 100644 --- 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. *