add aria-expanded attribute (#223)

Author: lidiagc

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();

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,