Add aria-label to filter panel close button - #2851
Closed
olitreadwell wants to merge 1 commit into
Closed
Conversation
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.
olitreadwell
force-pushed
the
contrib/hackforla-food-oasis-20260804-195901
branch
from
August 12, 2026 04:03
3949a68 to
c58c180
Compare
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Add
aria-label="Close filters"to the desktop close button (icon-onlyIconButton) in the search results filter panel.Add a Playwright test that verifies the button is reachable by its accessible name and closes the panel.
Why
The button at
FilterPanel.tsx:155rendered only a<CloseIcon />with no text and noaria-label, so its accessible name was empty. A screen reader announced it just as "button", giving no hint of its purpose.The fix follows the file's own convention: the sibling clear-filter button already uses
aria-label="Clear organization name filter", andAnnouncementSnackbarusesaria-label="close".Verified empirically: with the source fix reverted, the new test fails (
getByRole("button", { name: "Close filters" })finds nothing); with the fix, it passes.How to verify
Coverage
N/A — repo has no coverage tool wired up. The change adds one focused Playwright test to the existing e2e suite.
Checks run locally
Tests: PASS (organizations.spec.ts 9 passed, 0 failed; full chromium suite 35 passed before + 1 new = 36)
Lint: N/A —
npm run lintonly globs**/*.{js,jsx}; this change is.tsx/.ts. The eslint binary is also not installed in the client workspace.Typecheck: PASS (
npm run typecheck→tsc --noEmit, no errors)Build: PASS (
npm run build→tsc && vite build, built in ~10s)