From 2233f6f756199d5d9746f81fb1d13ecfc837206b Mon Sep 17 00:00:00 2001
From: Shivani Parekh <sparekhh@amazon.com>
Date: Tue, 5 Dec 2023 00:52:12 -0800
Subject: [PATCH] Fix aria-level and aria role violations

---
 packages/e2e/cypress/e2e/gmail-spec.cy.ts                 | 8 ++++----
 .../react-arborist/src/components/default-container.tsx   | 1 +
 packages/react-arborist/src/components/row-container.tsx  | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/e2e/cypress/e2e/gmail-spec.cy.ts b/packages/e2e/cypress/e2e/gmail-spec.cy.ts
index f51febd..f317eef 100644
--- 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
index 9296cac..1c57956 100644
--- 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
index 2ebcd43..11f6e53 100644
--- 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,