Feat/21 keyboard accessibility

[MUFTIATBAKARE]

What does this PR do?

Improve keyboard accessibility and focus management across the verification and protocol flows to provide a better experience for keyboard and assistive technology users.

Closes #21

Type of change

• New Feature

Files changed

frontend/app/verify/page.tsx — add tabIndex, onKeyDown to credential type cards
frontend/app/holder/page.tsx — useRef + focus() on result after proof generation
frontend/app/apps/page.tsx — add tabIndex={0} and onKeyDown to protocol cards
frontend/app/globals.css — ensure :focus-visible ring is visible using var(--accent)

Checklist

• All interactive cards are reachable and activatable via keyboard (Tab + Enter/Space)
• Focus moves to the result/error message after proof generation completes
• Visible focus ring on all interactive elements using var(--accent) colour
• No tabIndex values greater than 0 (no tab order manipulation)
• Passes basic axe or Lighthouse accessibility audit with no critical violations
• pnpm tsc --noEmit passes

Greptile Summary

This PR adds keyboard accessibility across the verify, holder, and apps flows: interactive cards gain tabIndex={0} and onKeyDown Enter/Space handlers, and a global :focus-visible rule provides a visible accent-coloured outline. The most substantive addition is programmatic focus management in ProofFlow and BatchProofFlow, where useRef/useEffect pairs move focus to the submit button, success banner, or error banner as each proof stage completes.

• holder/page.tsx: Three new refs plus stage-driven useEffect hooks focus the next actionable or result element automatically.
• verify/page.tsx / apps/page.tsx: Cards are now Tab-reachable and activatable via Enter/Space; the verify cards still lack ARIA role and aria-checked (flagged in a prior review).
• globals.css: Clean :focus-visible rule with no animation delay.

Confidence Score: 4/5

The changes are purely additive accessibility enhancements with no risk to existing functionality, but the credential selector cards in the verify flow lack ARIA semantics needed to complete the accessibility story.

The credential type selector cards in frontend/app/verify/page.tsx received tabIndex and onKeyDown but no role or aria-checked, so a screen reader user gets keyboard reachability with no semantic context. This was flagged in a prior review and remains unresolved. The focus management additions to ProofFlow and BatchProofFlow are well-structured and correct.

Files Needing Attention: frontend/app/verify/page.tsx - credential selector cards need ARIA role and state; frontend/app/holder/page.tsx - minor formatting issues in the BatchProofFlow focus effect.

Important Files Changed

Filename	Overview
frontend/app/holder/page.tsx	Adds programmatic focus management for ProofFlow and BatchProofFlow via useRef/useEffect pairs targeting the submit button, success banner, and error banner at each stage transition. Two minor formatting issues: missing space between JSX attributes and incorrect indentation inside the BatchProofFlow focus useEffect.
frontend/app/verify/page.tsx	Makes credential-type selector cards keyboard-reachable with tabIndex and onKeyDown Enter/Space handlers; ARIA role and state attributes remain absent (flagged in previous review).
frontend/app/apps/page.tsx	Adds role=link, tabIndex=0, and onKeyDown to ProtocolCard divs; the rest of the diff is line-length reformatting only.
frontend/app/globals.css	Adds a clean :focus-visible rule with a 2px accent-coloured outline and no animation, correctly providing an immediate visible focus ring.
frontend/package.json	Trailing-newline removal only; no dependency changes.
frontend/pnpm-lock.yaml	Trailing-newline removal only; lockfile content is unchanged.
frontend/pnpm-workspace.yaml	Trailing-newline removal only; workspace configuration is unchanged.

Sequence Diagram

sequenceDiagram
  participant KB as Keyboard User
  participant PF as ProofFlow
  participant BPF as BatchProofFlow
  participant SR as Screen Reader

  KB->>PF: Tab to credential card, Enter
  PF->>PF: stage: witness to proving to generated
  PF->>KB: focus(submitButtonRef)

  KB->>PF: Enter on Submit to Stellar
  PF->>PF: stage to confirmed
  PF->>KB: focus(successRef)
  SR-->>KB: Announces success aria-live polite

  PF->>PF: stage to error
  PF->>KB: focus(errorRef)
  SR-->>KB: Announces error immediately role alert

  KB->>BPF: Trigger batch proof
  BPF->>BPF: blockedByNetwork true
  BPF->>KB: focus(networkMismatchRef)
  SR-->>KB: Announces network warning role status

  BPF->>BPF: batchStage to confirmed
  BPF->>KB: focus(successRef)
  SR-->>KB: Announces all proofs confirmed

Loading

_{Reviews (6): Last reviewed commit: "feat- keyboard accessibility" | Re-trigger Greptile}

[drips-wave]

@MUFTIATBAKARE Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits