From 909051663ae881617b3594727760ac537ff176ee Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Tue, 20 May 2025 15:54:08 -0600
Subject: [PATCH 1/7] test stopPropagation

---
 src/components/Tree.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index 0ac74f298..4372210d8 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -49,14 +49,18 @@ const ChevronWrapper = styled.div`
   }
 `;
 
+const onClickHandler = (e: React.MouseEvent) => {
+  e.stopPropagation();
+};
+
 export const TreeChevron = styled((props: React.PropsWithChildren<{ className?: string }>) => (
   <ChevronWrapper>
-  <button className={props.className} type="button" aria-label="expand/collapse">
-    <svg viewBox="0 0 24 24">
-      <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-    </svg>
-  </button>
-  {props.children}
+    <button className={props.className} type="button" onClick={onClickHandler}>
+      <svg viewBox="0 0 24 24">
+        <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </button>
+    {props.children}
   </ChevronWrapper>
 ))`
 `;

From 9ccf3f87fb2f7959259d95befc82cc1caaee0a60 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Wed, 21 May 2025 14:01:48 -0600
Subject: [PATCH 2/7] test rac button in chevron

---
 src/components/Tree.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index 4372210d8..ae954b867 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -49,17 +49,13 @@ const ChevronWrapper = styled.div`
   }
 `;
 
-const onClickHandler = (e: React.MouseEvent) => {
-  e.stopPropagation();
-};
-
 export const TreeChevron = styled((props: React.PropsWithChildren<{ className?: string }>) => (
   <ChevronWrapper>
-    <button className={props.className} type="button" onClick={onClickHandler}>
+    <RAC.Button className={props.className} type="button" aria-label="expand/collapse">
       <svg viewBox="0 0 24 24">
         <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
       </svg>
-    </button>
+    </RAC.Button>
     {props.children}
   </ChevronWrapper>
 ))`

From b6af6401c0f6863a7f11190b9573254d9c5cd0a3 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Wed, 21 May 2025 14:34:22 -0600
Subject: [PATCH 3/7] remove div

---
 src/components/Tree.tsx | 41 ++++++++++++++++-------------------------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index ae954b867..5c55606a3 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -22,41 +22,32 @@ export const TreeItem = styled(RAC.TreeItem)`
 export const TreeItemContent = styled(RAC.TreeItemContent)`
 `;
 
-const ChevronWrapper = styled.div`
+const ChevronButton = styled.button`
+  all: unset;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  padding: 1rem 0 1rem 3rem;
-  font-weight: bold;
-  gap: 0.8rem;
-
-  button {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  justify-content: center;
+  width: 1.4rem;
+  height: 100%;
+
+  svg {
+    rotate: 0deg;
+    transition: rotate 200ms;
     width: 1.4rem;
-    height: 100%;
-
-    svg {
-      rotate: 0deg;
-      transition: rotate 200ms;
-      width: 1.4rem;
-      height: 1.4rem;
-      stroke: ${colors.palette.neutralDarker};
-      stroke-width: 0.3rem;
-    }
+    height: 1.4rem;
+    stroke: ${colors.palette.neutralDarker};
+    stroke-width: 0.3rem;
   }
 `;
 
 export const TreeChevron = styled((props: React.PropsWithChildren<{ className?: string }>) => (
-  <ChevronWrapper>
-    <RAC.Button className={props.className} type="button" aria-label="expand/collapse">
+  <>
+    <ChevronButton className={props.className} type="button" aria-label="expand/collapse">
       <svg viewBox="0 0 24 24">
         <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
       </svg>
-    </RAC.Button>
+    </ChevronButton>
     {props.children}
-  </ChevronWrapper>
+  </>
 ))`
 `;

From a023e3bec2730f4423613e474ee86a7e2fc845b8 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Wed, 21 May 2025 14:54:06 -0600
Subject: [PATCH 4/7] add click handler

---
 src/components/Tree.tsx | 54 ++++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index 5c55606a3..cc55528aa 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -1,6 +1,7 @@
 import * as RAC from "react-aria-components";
 import { colors } from "../theme";
 import styled from "styled-components";
+import { MouseEventHandler } from "react";
 
 export const Tree = styled(RAC.Tree)`
   padding: 0.8rem;
@@ -22,32 +23,45 @@ export const TreeItem = styled(RAC.TreeItem)`
 export const TreeItemContent = styled(RAC.TreeItemContent)`
 `;
 
-const ChevronButton = styled.button`
-  all: unset;
+const ChevronWrapper = styled.div`
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  width: 1.4rem;
-  height: 100%;
+  padding: 1rem 0 1rem 3rem;
+  font-weight: bold;
+  gap: 0.8rem;
 
-  svg {
-    rotate: 0deg;
-    transition: rotate 200ms;
+  button {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 1.4rem;
-    height: 1.4rem;
-    stroke: ${colors.palette.neutralDarker};
-    stroke-width: 0.3rem;
+    height: 100%;
+
+    svg {
+      rotate: 0deg;
+      transition: rotate 200ms;
+      width: 1.4rem;
+      height: 1.4rem;
+      stroke: ${colors.palette.neutralDarker};
+      stroke-width: 0.3rem;
+    }
   }
 `;
 
-export const TreeChevron = styled((props: React.PropsWithChildren<{ className?: string }>) => (
-  <>
-    <ChevronButton className={props.className} type="button" aria-label="expand/collapse">
-      <svg viewBox="0 0 24 24">
-        <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-      </svg>
-    </ChevronButton>
-    {props.children}
-  </>
+export const TreeChevron = styled(
+  (props: React.PropsWithChildren<{ 
+    className?: string,
+    onClickHandler?: MouseEventHandler<HTMLButtonElement> | undefined,
+  }>) => (
+  <ChevronWrapper>
+  <button className={props.className} type="button" aria-label="expand/collapse" onClick={props.onClickHandler}>
+    <svg viewBox="0 0 24 24">
+      <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+    </svg>
+  </button>
+  {props.children}
+  </ChevronWrapper>
 ))`
 `;

From f25b46297d18d0e3b8549742ed9c8fe1551ad850 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Wed, 21 May 2025 15:57:00 -0600
Subject: [PATCH 5/7] add prop slot

---
 src/components/Tree.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index cc55528aa..b527731f9 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -56,7 +56,13 @@ export const TreeChevron = styled(
     onClickHandler?: MouseEventHandler<HTMLButtonElement> | undefined,
   }>) => (
   <ChevronWrapper>
-  <button className={props.className} type="button" aria-label="expand/collapse" onClick={props.onClickHandler}>
+  <button 
+    className={props.className} 
+    type="button" 
+    aria-label="expand/collapse" 
+    onClick={props.onClickHandler}
+    slot="chevron"
+  >
     <svg viewBox="0 0 24 24">
       <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
     </svg>

From aff0eaa1212862110c7e76f971da94b7834aa3f5 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Wed, 21 May 2025 16:11:13 -0600
Subject: [PATCH 6/7] use rac button again

---
 src/components/Tree.tsx | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx
index b527731f9..eb5c46452 100644
--- a/src/components/Tree.tsx
+++ b/src/components/Tree.tsx
@@ -1,7 +1,6 @@
 import * as RAC from "react-aria-components";
 import { colors } from "../theme";
 import styled from "styled-components";
-import { MouseEventHandler } from "react";
 
 export const Tree = styled(RAC.Tree)`
   padding: 0.8rem;
@@ -51,23 +50,21 @@ const ChevronWrapper = styled.div`
 `;
 
 export const TreeChevron = styled(
-  (props: React.PropsWithChildren<{ 
+  (props: React.PropsWithChildren<{
     className?: string,
-    onClickHandler?: MouseEventHandler<HTMLButtonElement> | undefined,
   }>) => (
-  <ChevronWrapper>
-  <button 
-    className={props.className} 
-    type="button" 
-    aria-label="expand/collapse" 
-    onClick={props.onClickHandler}
-    slot="chevron"
-  >
-    <svg viewBox="0 0 24 24">
-      <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-    </svg>
-  </button>
-  {props.children}
-  </ChevronWrapper>
-))`
+    <ChevronWrapper>
+      <RAC.Button
+        className={props.className}
+        type="button"
+        aria-label="expand/collapse"
+        slot="chevron"
+      >
+        <svg viewBox="0 0 24 24">
+          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+        </svg>
+      </RAC.Button>
+      {props.children}
+    </ChevronWrapper>
+  ))`
 `;

From fd84c5b91130bdba6fe9c3ae95290adc260aa982 Mon Sep 17 00:00:00 2001
From: jomcarvajal <jose.carvajal@edify.cr>
Date: Thu, 22 May 2025 08:40:03 -0600
Subject: [PATCH 7/7] update snaps

---
 package.json                                    | 2 +-
 src/components/__snapshots__/Tree.spec.tsx.snap | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b4ddff7df..075a2b978 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
diff --git a/src/components/__snapshots__/Tree.spec.tsx.snap b/src/components/__snapshots__/Tree.spec.tsx.snap
index 6e4d1486c..3197bce3b 100644
--- a/src/components/__snapshots__/Tree.spec.tsx.snap
+++ b/src/components/__snapshots__/Tree.spec.tsx.snap
@@ -56,7 +56,14 @@ exports[`Tree matches snapshot 1`] = `
         >
           <button
             aria-label="expand/collapse"
+            aria-labelledby="react-aria-5 react-aria-2-1"
             class="sc-eCYdqJ fIxumb"
+            data-rac=""
+            data-react-aria-pressable="true"
+            data-react-aria-prevent-focus="true"
+            id="react-aria-5"
+            slot="chevron"
+            tabindex="0"
             type="button"
           >
             <svg