Accessibility audit of navigation, tables, and dialogs

[priscaenoch]

Problem

The application is data-dense (event tables, contract dashboards, dialogs, graphs) but has had no accessibility pass. Spot checks show mixed practice: some controls set aria-label while many icon-only controls and data tables have not been reviewed. A proper audit-and-fix spans many components plus lint tooling and tests.

What needs to be done

• Audit the primary surfaces and fix the issues found, focusing on: accessible names for icon-only buttons, correct table semantics (th, scope, caption), visible focus styles, full keyboard operability, and colour contrast.
• Cover src/components/Nav.tsx, src/components/EventTable.tsx, src/components/ContractDashboard.tsx, the search input, dialog/panel components, and src/components/NetworkSwitcher.tsx.
• Add eslint-plugin-jsx-a11y and resolve its findings (coordinate with the lint-script work).
• Add tests asserting accessible names for the audited icon-only controls.

Files

• src/components/Nav.tsx, src/components/EventTable.tsx, src/components/ContractDashboard.tsx
• dialog/panel components and the search input component
• src/components/NetworkSwitcher.tsx
• eslint.config.js
• tests under test/

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 with no errors.
• All CI checks pass; the change cannot be merged until CI is green.

Tests to pass

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