Skip to content

fix(a11y): name six icon controls and test accessible interactions - #713

Merged
cevheri merged 12 commits into
libredb:mainfrom
mikevillari:fix/icon-button-names
Sep 9, 2026
Merged

fix(a11y): name six icon controls and test accessible interactions#713
cevheri merged 12 commits into
libredb:mainfrom
mikevillari:fix/icon-button-names

Conversation

@mikevillari

Copy link
Copy Markdown
Contributor

Description

Six controls have no accessible name, including session termination and column removal. Add action-specific aria-labels, keeping the monitoring Back button named when its responsive text is hidden. Include session IDs and column numbers to distinguish repeated controls.

Type of Change

  • Bug fix

Related Issue

Closes #686

Changes Made

  • Name pool refresh, monitoring Back, session termination in monitoring and admin, column removal, and schema-diagram close.
  • Update five existing interaction regressions to find controls by role and accessible name, preserving their action assertions.
  • Add a Back regression that hides the responsive text and verifies the named button still navigates home.
  • Audit all 13 literal size="icon" controls under src/components: twelve now have naming attributes; the remaining SidebarTrigger already has sr-only "Toggle Sidebar" text.

Testing

  • Before implementation, all six accessible-name checks fail on the original components. The initial Back test had a missing fireEvent import; corrected it and repeated the complete component run to establish the six intended failures.
  • Full bun run test: 14,714 passes, zero failures, all 34 component groups. All six named-control interaction checks pass.
  • Full bun run test:coverage and threshold check: 46,335/46,335 lines (100%).
  • Format, lint, typecheck, knip, chart/channel/README/security guards, build:lib, and diff checks pass.
  • All twelve published files match the tested local patch exactly.

Test Environment

macOS arm64; Node 26.5.0; Bun 1.4.2; GNU Bash 5.2.37; Helm 4.1.3; 7-Zip 26.03.

Checklist

  • Labels describe the controls' actions.
  • Repeated session and column controls have distinct names.
  • Existing click behavior and confirmation flows remain covered.
  • No dependencies added.

Additional Notes

AI-assisted implementation and validation. The mobile regression models hidden text in the DOM test environment; no live screen-reader or browser-rendering verification is claimed. Existing lint warnings remain without errors.

Production bun run build remains for CI: the same base/dependency set hit a local Turbopack worker-port permission error in #706 even after a broader-permission retry. That environment-limited production build was not repeated here.

@codecov

codecov Bot commented Sep 9, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@cevheri

cevheri commented Sep 9, 2026

Copy link
Copy Markdown
Member

Checked against #686. Both "Done when" items hold. I machine-audited every size="icon" Button in src/: six were unnamed on main, exactly the six you fixed, and all thirteen carry a name now. Each of the six test files is green on its own, and reverting only its own source turns exactly one test red, so there are six independent witnesses rather than one.

Replacing the old selectors is the part I liked most. className.includes("text-destructive"), td:last-child button and "the first button on the page" were all proxies for the control; querying the accessible name means the test now asserts the thing the fix actually delivers. The display: none trick on the Back label is the right way to model the breakpoint, since it takes the text out of name-from-contents and the query then passes only because the aria-label is there. I also checked that an sr-only span would have been worse: it would announce "Back Back" above sm.

Two optional notes, neither blocking:

  • Remove column ${index + 1} is positional while the row holds a column name the user typed. Remove column ${col.name || index + 1} announces what they named and still degrades to the index for an empty row, which is the shape SavedQueries already uses in Delete ${q.name}.
  • PoolTab's refresh now carries an aria-label while the refresh control in MonitoringDashboard forty lines away carries title="Refresh now". A matching title there would give sighted users the tooltip its sibling has.

Merging shortly.

@cevheri cevheri added the bug Something isn't working label Sep 9, 2026
@cevheri
cevheri merged commit 30e90a7 into libredb:main Sep 9, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Six icon-only buttons across the app carry no accessible name

2 participants