From 279ce2c359dfb3b4b54e8cd2752e92a2a085dea9 Mon Sep 17 00:00:00 2001
From: Katie Goines <30757403+katiegoines@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:34:07 -0700
Subject: [PATCH] a11y-when closing accordion from bottom, focus back on
 summary element (#7837)

* when closing accordion from bottom, focus back on summary element

* add test

* remove extra spaces

---------

Co-authored-by: katiegoines <katiegoines@gmail.com>
---
 src/components/Accordion/Accordion.tsx                | 2 ++
 src/components/Accordion/__tests__/Accordion.test.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index f4729dcbfa0..097e94481a0 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -69,10 +69,12 @@ export const Accordion: React.FC<AccordionProps> = ({
 
   const closeAccordion = () => {
     const details = detailsRef.current;
+    const summary = summaryRef.current;
     if (details) {
       const scrollToLoc = details.offsetTop - 48 - 70 - 10; // account for nav heights and 10px buffer
       setDetailsOpen(false);
       details.animate(collapse, animationTiming);
+      summary?.focus();
       window.scrollTo({
         left: 0,
         top: scrollToLoc,
diff --git a/src/components/Accordion/__tests__/Accordion.test.tsx b/src/components/Accordion/__tests__/Accordion.test.tsx
index 1b8f6141e98..9967742f0f0 100644
--- a/src/components/Accordion/__tests__/Accordion.test.tsx
+++ b/src/components/Accordion/__tests__/Accordion.test.tsx
@@ -65,11 +65,13 @@ describe('Accordion', () => {
     });
   });
 
-  it('should collapse Accordion when close button is clicked', async () => {
+  it('should collapse Accordion and refocus on Accordion element when close button is clicked', async () => {
     render(component);
     const accordionHeading = screen.getByText('Accordion component example');
     userEvent.click(accordionHeading);
     const detailsEl = await screen.getByRole('group');
+    const summaryEl = detailsEl.firstChild;
+
     expect(detailsEl).toHaveAttribute('open');
 
     const text = await screen.getByText(content);
@@ -79,6 +81,7 @@ describe('Accordion', () => {
     await waitFor(() => {
       expect(text).not.toBeVisible();
       expect(detailsEl).not.toHaveAttribute('open');
+      expect(summaryEl).toHaveFocus();
     });
   });