[Issue #1886]: Fix duplicate id bug in SearchFilterAccordion (#1924)

## Summary Fixes #1886 ## Changes proposed - add the query param key to the end of the accordion id to prevent duplicate id a11y issue
HHS · May 6, 2024 · 17bb7fb · 17bb7fb · github-actions · May 6, 2024
1 parent 4cdd702
commit 17bb7fb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/frontend/src/components/search/SearchFilterAccordion/SearchFilterAccordion.tsx b/frontend/src/components/search/SearchFilterAccordion/SearchFilterAccordion.tsx
@@ -115,7 +115,7 @@ export function SearchFilterAccordion({
       title: getAccordionTitle(),
       content: getAccordionContent(),
       expanded: false,
-      id: "funding-instrument-filter",
+      id: `funding-instrument-filter-${queryParamKey}`,
       headingLevel: "h4",
     },
   ];

diff --git a/frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx b/frontend/tests/components/search/SearchFilterAccordion/SearchFilterAccordion.test.tsx
@@ -108,10 +108,10 @@ describe("SearchFilterAccordion", () => {
     );
 
     const accordionToggleButton = screen.getByTestId(
-      "accordionButton_funding-instrument-filter",
+      "accordionButton_funding-instrument-filter-status",
     );
     const contentDiv = screen.getByTestId(
-      "accordionItem_funding-instrument-filter",
+      "accordionItem_funding-instrument-filter-status",
     );
     expect(contentDiv).toHaveAttribute("hidden");
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	83.89%	854/1018
🟡	Branches	64.9%	220/339
🟡	Functions	75.34%	165/219
🟢	Lines	83.89%	797/950