add aria-expanded attribute

brimdata · Mar 12, 2024 · 7fe01ca · 7fe01ca
1 parent 5b5ad72
commit 7fe01ca
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/modules/e2e/cypress/e2e/gmail-spec.cy.js b/modules/e2e/cypress/e2e/gmail-spec.cy.js
@@ -61,13 +61,15 @@ describe("Testing the Gmail Demo", () => {
 
     // On a folder that is closed
     cy.get("@item").contains("Categories").click(); // closed it
+    cy.focused().should("have.attr", "aria-expanded", "false");
     cy.focused().type("a");
     cy.focused().type("Root{enter}");
     cy.get("@item").contains("Root").click();
     cy.focused().should("have.attr", "aria-level", "1");
 
     // On a folder that is open
     cy.get("@item").contains("Categories").click(); // opened it
+    cy.focused().should("have.attr", "aria-expanded", "true");
     cy.focused().type("a");
     cy.focused().type("Child{enter}");
     cy.get("@item").contains("Child").click();
@@ -91,6 +93,7 @@ describe("Testing the Gmail Demo", () => {
 
     // On a folder that is closed
     cy.get("@item").contains("Categories").click(); // closed it
+    cy.focused().should("have.attr", "aria-expanded", "false");
     cy.focused().type("A");
     cy.focused().type("Root{enter}");
     cy.get("@item").contains("Root").click();
@@ -99,6 +102,7 @@ describe("Testing the Gmail Demo", () => {
 
     // On a folder that is open
     cy.get("@item").contains("Categories").click(); // opened it
+    cy.focused().should("have.attr", "aria-expanded", "true");
     cy.focused().type("A");
     cy.focused().type("Child{enter}");
     cy.get("@item").contains("Child").click();

diff --git a/modules/react-arborist/src/components/row-container.tsx b/modules/react-arborist/src/components/row-container.tsx
@@ -60,6 +60,7 @@ export const RowContainer = React.memo(function RowContainer<T>({
     role: "treeitem",
     "aria-level": node.level + 1,
     "aria-selected": node.isSelected,
+    "aria-expanded": node.isOpen,
     style: rowStyle,
     tabIndex: -1,
     className: tree.props.rowClassName,