Fix aria-level and aria role violations (#198)

Co-authored-by: Shivani Parekh <[email protected]>
brimdata · Dec 12, 2023 · e165800 · e165800
1 parent 5d09da4
commit e165800
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/e2e/cypress/e2e/gmail-spec.cy.ts b/packages/e2e/cypress/e2e/gmail-spec.cy.ts
@@ -64,14 +64,14 @@ describe("Testing the Gmail Demo", () => {
     cy.focused().type("a");
     cy.focused().type("Root{enter}");
     cy.get("@item").contains("Root").click();
-    cy.focused().should("have.attr", "aria-level", "0");
+    cy.focused().should("have.attr", "aria-level", "1");
 
     // On a folder that is open
     cy.get("@item").contains("Categories").click(); // opened it
     cy.focused().type("a");
     cy.focused().type("Child{enter}");
     cy.get("@item").contains("Child").click();
-    cy.focused().should("have.attr", "aria-level", "1");
+    cy.focused().should("have.attr", "aria-level", "2");
   });
 
   it("Creates Internal Nodes", () => {
@@ -95,14 +95,14 @@ describe("Testing the Gmail Demo", () => {
     cy.focused().type("Root{enter}");
     cy.get("@item").contains("Root").click();
     cy.focused().children().should("have.class", "isInternal");
-    cy.focused().should("have.attr", "aria-level", "0");
+    cy.focused().should("have.attr", "aria-level", "1");
 
     // On a folder that is open
     cy.get("@item").contains("Categories").click(); // opened it
     cy.focused().type("A");
     cy.focused().type("Child{enter}");
     cy.get("@item").contains("Child").click();
-    cy.focused().should("have.attr", "aria-level", "1");
+    cy.focused().should("have.attr", "aria-level", "2");
   });
 
   it("drags and drops in its list", () => {

diff --git a/packages/react-arborist/src/components/default-container.tsx b/packages/react-arborist/src/components/default-container.tsx
@@ -18,6 +18,7 @@ export function DefaultContainer() {
   const tree = useTreeApi();
   return (
     <div
+      role="tree"
       style={{
         height: tree.height,
         width: tree.width,

diff --git a/packages/react-arborist/src/components/row-container.tsx b/packages/react-arborist/src/components/row-container.tsx
@@ -58,7 +58,7 @@ export const RowContainer = React.memo(function RowContainer<T>({
   );
   const rowAttrs: React.HTMLAttributes<any> = {
     role: "treeitem",
-    "aria-level": node.level,
+    "aria-level": node.level + 1,
     "aria-selected": node.isSelected,
     style: rowStyle,
     tabIndex: -1,