Skip to content

fix(#36): add keyboard accessibility to ProposalDetail modal#195

Open
JosephOnuh wants to merge 1 commit into
PrincessnJoy:mainfrom
JosephOnuh:fix/36-modal-keyboard-accessibility
Open

fix(#36): add keyboard accessibility to ProposalDetail modal#195
JosephOnuh wants to merge 1 commit into
PrincessnJoy:mainfrom
JosephOnuh:fix/36-modal-keyboard-accessibility

Conversation

@JosephOnuh
Copy link
Copy Markdown

Closes #36

Changes

  • Add Escape key handler to close the modal
  • Implement native focus trap (Tab/Shift+Tab cycling within dialog)
  • Move focus to close button on open
  • Return focus to the triggering ProposalCard on close
  • Add role="dialog", aria-modal="true", aria-labelledby to modal container
  • Add aria-label to close button
  • Pass triggerRef from App through ProposalCard click event

Testing

  • Open a proposal modal → focus lands on × button
  • Tab cycles only within the modal
  • Escape closes the modal and returns focus to the card that opened it
  • Screen reader announces dialog role and label

- Add Escape key handler to close modal
- Implement native focus trap (Tab/Shift+Tab cycling)
- Move focus to close button on open
- Return focus to triggering ProposalCard on close
- Add role="dialog", aria-modal="true", aria-labelledby
- Add aria-label to close button
- Pass triggerRef from App through ProposalCard click event
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@JosephOnuh 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

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.

ProposalDetail modal is not keyboard accessible

1 participant