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, 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(); }); });