Accessibility audit of navigation, tables, and dialogs

[priscaenoch]

Problem

The application is data-dense (event tables, contract dashboards, graphs, dialogs) but has had no accessibility pass. Spot checks show mixed practice: some controls set aria-label (for example the admin token input in RateLimitDashboard.tsx) while many icon-only controls and data tables elsewhere have not been reviewed. Keyboard navigation, focus management, and semantic table markup are unverified.

What needs to be done

• Audit the primary surfaces: Nav, EventTable, ContractDashboard, the search input, dialogs/panels, and the network switcher.
• Fix the issues found, focusing on: accessible names for icon-only buttons, correct table semantics (th, scope, caption), visible focus styles, keyboard operability of all interactive controls, and colour contrast.
• Ensure the graph and editor views expose a non-visual alternative or are explicitly marked as presentational where appropriate.
• Add eslint-plugin-jsx-a11y to catch regressions, coordinated with the lint-script issue.
• Record the audit findings and fixes in the PR.

Files

• src/components/Nav.tsx, src/components/EventTable.tsx, src/components/ContractDashboard.tsx, dialog/panel components
• eslint.config.js

Acceptance deliverables

• All interactive controls on the audited surfaces have accessible names and are keyboard operable.
• Data tables use correct semantics.
• eslint-plugin-jsx-a11y runs in lint with no errors.

Tests to pass

• Tests asserting accessible names for the audited icon-only controls.
• npm run lint exits 0 with the a11y plugin enabled.