Skip to content

Commit a5aa07f

Browse files
committed
Add aria-label to filter panel close button
The desktop "close filters" button in the search results filter panel was an icon-only IconButton with no accessible name. A screen reader announced it only as "button", so users could not tell what it does. Add aria-label="Close filters", matching the pattern already used by the sibling "Clear organization name filter" button in the same file and the "close" button in AnnouncementSnackbar. Also add a Playwright test that opens the filter panel, asserts the close button is reachable by its accessible name, and confirms it closes the panel.
1 parent 43fa99b commit a5aa07f

2 files changed

Lines changed: 15 additions & 1 deletion

File tree

client/src/components/FoodSeeker/SearchResults/ResultsFilters/FilterPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const FilterPanel: FC<FilterPanelProps> = ({ mealPantry, filterCount }) => {
152152
{`${filterCount} ${filterCount === 1 ? "Location" : "Locations"}`}
153153
</Typography>
154154
{isDesktop ? (
155-
<IconButton onClick={handleDrawerClose}>
155+
<IconButton aria-label="Close filters" onClick={handleDrawerClose}>
156156
<CloseIcon />
157157
</IconButton>
158158
) : (

client/tests/organizations.spec.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,4 +157,18 @@ test.describe("Organizations", () => {
157157
await expect(page.getByText("Stakeholder 2")).toBeVisible();
158158
await expect(page.getByText("Stakeholder 3")).toBeHidden();
159159
});
160+
161+
test("filter panel close button has an accessible name and closes the panel", async ({
162+
page,
163+
}) => {
164+
await mockRequests(page);
165+
await page.goto("/organizations");
166+
await page.getByRole("button", { name: "More Filters" }).click();
167+
168+
const closeFilters = page.getByRole("button", { name: "Close filters" });
169+
await expect(closeFilters).toBeVisible();
170+
171+
await closeFilters.click();
172+
await expect(closeFilters).toBeHidden();
173+
});
160174
});

0 commit comments

Comments
 (0)