Skip to content

fix: make showcase filters accessible and resettable - #132

Merged
johnnyhuy merged 1 commit into
mainfrom
agent/issue-130-showcase-filter-accessibility
Nov 13, 2026
Merged

johnnyhuy merged 1 commit into
mainfrom
agent/issue-130-showcase-filter-accessibility

Conversation

@johnnyhuy

Copy link
Copy Markdown
Contributor

The showcase search now has a visible label, category buttons expose their selected state, and the result count uses a polite status region. Empty results offer Clear filters, which resets both filters and returns focus to search; the search field also fits narrow screens.

Part of #86. Closes #130 after merge. The parent epic stays open.

Verified with the repository gates and a running local stack.

  • mise run install passed with existing peer dependency warnings.
  • mise run lint passed across all workspaces, including 51 app files.
  • mise run test --runInBand --verbose passed with 45 tests across seven suites; one existing test/suite remains skipped.
  • BROWSER=none mise run dev compiled successfully and served the app and backend on 3010/7017 through gitignored local configuration. Another worktree already owns 3000/7007.
  • mise run proof-browser run-code passed browser assertions for Space-key category selection, combined filtering, Enter-key reset, all 14 cards returning and focus returning to search. At 375px, the search field stays inside the viewport and reset restores all cards. The temporary local proof-browser task used the installed Playwright CLI with Chrome.
  • This is frontend-only. No backend, dependencies or packaging changed, so a Docker image build was not required.

The new behaviour tests passed.

PASS app packages/app/src/components/showcase/ShowcasePage.test.tsx (7.201 s)
  ✓ labels search and exposes the active category and result count (332 ms)
  ✓ combines search and category filters and restores all cards from an empty result (364 ms)
Test Suites: 1 skipped, 7 passed, 7 of 8 total
Tests:       1 skipped, 45 passed, 46 total

Browser capture succeeded on desktop and mobile. No capture method was blocked and no fallback was needed. Screenshots are committed under .tmp/proof/ and linked to this exact commit.

Desktop empty result with Clear filters

Restored showcase with labelled search

Mobile filters and empty-result recovery

An extra mise run check-types check, using a temporary local task that executes node node_modules/typescript/bin/tsc --incremental false, failed before checking application code. The existing TypeScript ~5.3.0 cannot accept DOM.AsyncIterable from Backstage's compiler defaults (TS6046). The dependency and compiler configuration files match origin/main at 2cdb9eb. Follow-up #131 tracks compiler compatibility and a repository type-check gate; the current lint task runs ESLint only. No manual screen reader session was performed; automated checks verify the accessible names, pressed states, status semantics and keyboard focus behaviour.

Co-authored-by: OpenAI Codex <noreply@openai.com>
@johnnyhuy
johnnyhuy merged commit 48e4714 into main Nov 13, 2026
5 checks passed
@johnnyhuy
johnnyhuy deleted the agent/issue-130-showcase-filter-accessibility branch November 13, 2026 12:06
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.

Make showcase filters accessible and add an empty-state reset

1 participant