Skip to content

Add aria-label to filter panel close button - #2

Closed
olitreadwell wants to merge 1 commit into
developfrom
contrib/hackforla-food-oasis-20260804-195901
Closed

Add aria-label to filter panel close button#2
olitreadwell wants to merge 1 commit into
developfrom
contrib/hackforla-food-oasis-20260804-195901

Conversation

@olitreadwell

@olitreadwell olitreadwell commented Aug 4, 2026

Copy link
Copy Markdown
Owner

Upstream target

hackforla/food-oasis — no issue; self-found accessibility gap in the search results filter panel.

What changed

Add aria-label="Close filters" to the desktop close button (icon-only IconButton) 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:155 rendered only a <CloseIcon /> with no text and no aria-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", and AnnouncementSnackbar uses aria-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

cd client
npm ci
npx playwright install chromium
npm run start &                       # vite dev server on :3000
npx wait-on http://localhost:3000
CI=1 npx playwright test tests/organizations.spec.ts --project=chromium

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 lint only globs **/*.{js,jsx}; this change is .tsx/.ts. The eslint binary is also not installed in the client workspace.
  • Typecheck: PASS (npm run typechecktsc --noEmit, no errors)
  • Build: PASS (npm run buildtsc && vite build, built in ~10s)

Style / template compliance

CONTRIBUTING.md has no code-style rules beyond the wiki workflow and no AI policy; there is no PR template in the repo. The change matches neighbouring code style. Prettier flags FilterPanel.tsx, but that warning pre-exists (present with this change stashed) and Prettier leaves the edited line unchanged, so the file was intentionally not reformatted to avoid unrelated churn.

Confidence: HIGH

Single-attribute a11y fix plus a test that fails without it. The "Close filters" wording is a reasonable label for the panel titled "Filters"; a maintainer may prefer different wording, which is a trivial follow-up.

Recommendation

Ready to send upstream as-is (label wording is the only thing a human might tweak).

Promotion note

To open this against upstream once ready:

gh pr create --repo hackforla/food-oasis --base develop --head olitreadwell:contrib/hackforla-food-oasis-20260804-195901

No CLA or signed-commit requirement was found in hackforla/food-oasis's CONTRIBUTING.md or .github config (no PR template exists in this repo; the body above follows the CONTRIBUTING.md guidance to route developer contributions through the project's own dev workflow).

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
olitreadwell force-pushed the contrib/hackforla-food-oasis-20260804-195901 branch from 3949a68 to c58c180 Compare August 12, 2026 04:03
@olitreadwell

Copy link
Copy Markdown
Owner Author

Renaming branch to fix/aria_label_filter_panel_close_button for clearer naming convention. Reopening as a new PR with identical content.

@olitreadwell
olitreadwell deleted the contrib/hackforla-food-oasis-20260804-195901 branch August 12, 2026 12:03
pull Bot pushed a commit that referenced this pull request Aug 22, 2026
PUT /api/accounts/:userid had no auth middleware, so anyone could
overwrite any user's profile (firstName, lastName, email, tenantId) by
id -- including the email tied to a victim's login, which combined with
the password-reset flow could be chained toward account takeover
(security audit finding #2, Critical).

Fix:
- Add jwtSession.validateUser to the route so the endpoint requires a
  valid session (401 otherwise).
- Enforce ownership in the controller: a user may only update their own
  profile (req.user.id === :userid), unless they hold an account-
  management admin role (admin / security_admin / global_admin); returns
  403 otherwise.

The only client caller (Profile.tsx self-edit) is unaffected: it edits
the logged-in user's own id and the same-origin jwt cookie is sent
automatically.

Adds controller tests for owner-allowed, non-owner-blocked (IDOR), and
admin-allowed cases.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant