diff --git a/packages/compass-components/src/components/accordion.spec.tsx b/packages/compass-components/src/components/accordion.spec.tsx
index 878bc04d5f8..2b3e0ec7506 100644
--- a/packages/compass-components/src/components/accordion.spec.tsx
+++ b/packages/compass-components/src/components/accordion.spec.tsx
@@ -20,9 +20,9 @@ describe('Accordion Component', function () {
     renderAccordion();
 
     expect(screen.getByTestId('my-test-id')).to.exist;
-    const button = screen.getByText('Accordion Test');
-    userEvent.click(button);
-    expect(screen.getByText('Hello World')).to.be.visible;
+    const summary = screen.getByText('Accordion Test');
+    userEvent.click(summary);
+    expect(summary.closest('details')).to.have.attribute('open');
   });
 
   it('should close the accordion on click - default open', function () {
@@ -31,22 +31,22 @@ describe('Accordion Component', function () {
     });
 
     expect(screen.getByTestId('my-test-id')).to.exist;
-    const button = screen.getByText('Accordion Test');
+    const summary = screen.getByText('Accordion Test');
     expect(screen.getByText('Hello World')).to.be.visible;
-    userEvent.click(button);
+    userEvent.click(summary);
 
-    expect(screen.queryByText('Hello World')).not.to.exist;
+    expect(summary.closest('details')).to.not.have.attribute('open');
   });
 
   it('should close the accordion after clicking to open then close', function () {
     renderAccordion();
 
     expect(screen.getByTestId('my-test-id')).to.exist;
-    const button = screen.getByText('Accordion Test');
-    userEvent.click(button);
-    expect(screen.getByText('Hello World')).to.be.visible;
-    userEvent.click(button);
-    expect(screen.queryByText('Hello World')).to.not.exist;
+    const summary = screen.getByText('Accordion Test');
+    userEvent.click(summary);
+    expect(summary.closest('details')).to.have.attribute('open');
+    userEvent.click(summary);
+    expect(summary.closest('details')).to.not.have.attribute('open');
   });
 
   it('should show a hint', function () {
diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx
index a43959046a3..40d9d7a7aa5 100644
--- a/packages/compass-components/src/components/accordion.tsx
+++ b/packages/compass-components/src/components/accordion.tsx
@@ -96,19 +96,23 @@ function Accordion({
   const darkMode = useDarkMode();
   const [localOpen, setLocalOpen] = useState(_open ?? defaultOpen);
   const setOpenRef = useCurrentValueRef(_setOpen);
-  const onOpenChange = useCallback(() => {
-    setLocalOpen((prevValue) => {
-      const newValue = !prevValue;
-      setOpenRef.current?.(newValue);
-      return newValue;
-    });
-  }, [setOpenRef]);
+  const onOpenChange = useCallback(
+    (e: React.SyntheticEvent<HTMLElement>) => {
+      e.preventDefault();
+      setLocalOpen((prevValue) => {
+        const newValue = !prevValue;
+        setOpenRef.current?.(newValue);
+        return newValue;
+      });
+    },
+    [setOpenRef]
+  );
   const regionId = useId();
   const labelId = useId();
   const open = typeof _open !== 'undefined' ? _open : localOpen;
   return (
-    <>
-      <button
+    <details open={open}>
+      <summary
         {...props}
         className={cx(
           darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
@@ -117,7 +121,6 @@ function Accordion({
           textClassName
         )}
         id={labelId}
-        type="button"
         aria-expanded={open ? 'true' : 'false'}
         aria-controls={regionId}
         onClick={onOpenChange}
@@ -135,14 +138,12 @@ function Accordion({
             <Description className={buttonHintStyles}>{hintText}</Description>
           )}
         </div>
-      </button>
+      </summary>
 
-      {open && (
-        <div role="region" aria-labelledby={labelId} id={regionId}>
-          {props.children}
-        </div>
-      )}
-    </>
+      <div role="region" aria-labelledby={labelId} id={regionId}>
+        {props.children}
+      </div>
+    </details>
   );
 }