From 6a28bee391d257216ca73ce0150ba7111cd644c5 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Thu, 18 Jul 2024 11:06:18 -0700 Subject: [PATCH 1/3] when closing accordion from bottom, focus back on summary element --- src/components/Accordion/Accordion.tsx | 2 ++ 1 file changed, 2 insertions(+) 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 = ({ 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, From 51a7e04f560b3217bd26ec19646f0209b643d5d7 Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 22 Jul 2024 10:28:57 -0700 Subject: [PATCH 2/3] add test --- src/components/Accordion/__tests__/Accordion.test.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Accordion/__tests__/Accordion.test.tsx b/src/components/Accordion/__tests__/Accordion.test.tsx index 1b8f6141e98..4167070ed5d 100644 --- a/src/components/Accordion/__tests__/Accordion.test.tsx +++ b/src/components/Accordion/__tests__/Accordion.test.tsx @@ -65,13 +65,16 @@ 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'); + expect(detailsEl).toHaveAttribute('open'); + const summaryEl = detailsEl.firstChild; + const text = await screen.getByText(content); const closeButton = screen.getByRole('button'); userEvent.click(closeButton); @@ -79,6 +82,7 @@ describe('Accordion', () => { await waitFor(() => { expect(text).not.toBeVisible(); expect(detailsEl).not.toHaveAttribute('open'); + expect(summaryEl).toHaveFocus(); }); }); From 93db7d37071fd7df466eaf263bfb2d22432c525e Mon Sep 17 00:00:00 2001 From: katiegoines Date: Mon, 22 Jul 2024 10:35:44 -0700 Subject: [PATCH 3/3] remove extra spaces --- src/components/Accordion/__tests__/Accordion.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Accordion/__tests__/Accordion.test.tsx b/src/components/Accordion/__tests__/Accordion.test.tsx index 4167070ed5d..9967742f0f0 100644 --- a/src/components/Accordion/__tests__/Accordion.test.tsx +++ b/src/components/Accordion/__tests__/Accordion.test.tsx @@ -70,11 +70,10 @@ describe('Accordion', () => { 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 summaryEl = detailsEl.firstChild; - const text = await screen.getByText(content); const closeButton = screen.getByRole('button'); userEvent.click(closeButton);