From 478a185e923ae2c94f2588dc07eb83535aaf7b7a Mon Sep 17 00:00:00 2001 From: Johannes Emerich Date: Sat, 16 Mar 2024 20:13:17 +0100 Subject: [PATCH 1/3] Use native focus cypress refuses to apply focus to some elements it does not consider focusable, even though all browsers apply focus just fine. --- cypress/e2e/spec.cy.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index fb13f94..48b5ec5 100644 --- a/cypress/e2e/spec.cy.ts +++ b/cypress/e2e/spec.cy.ts @@ -24,7 +24,9 @@ describe("focus-shift spec", () => { for (let pair of sequence) { switch (pair.eventType) { case "focus": - cy.get(pair.selector).focus() + cy.get(pair.selector).then(($elem) => { + $elem[0].focus() + }) break default: cy.get("body") From b582c1d25687a62b9057e40f76a6c3d20091d2d3 Mon Sep 17 00:00:00 2001 From: Johannes Emerich Date: Sat, 16 Mar 2024 19:41:36 +0100 Subject: [PATCH 2/3] Add basic editorconfig --- .editorconfig | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 .editorconfig 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 From 5342be197296adb29a29959e1f68d6fb5f289564 Mon Sep 17 00:00:00 2001 From: Johannes Emerich Date: Sat, 16 Mar 2024 19:07:21 +0100 Subject: [PATCH 3/3] 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. --- cypress/e2e/spec.cy.ts | 25 +++++++++++++++++++++++++ cypress/fixtures/details.html | 30 ++++++++++++++++++++++++++++++ examples/everything-bagel.html | 7 +++++++ index.js | 31 +++++++++++++++++++++++++++---- 4 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 cypress/fixtures/details.html diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index 48b5ec5..29d7adc 100644 --- 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 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. *