Add accessibility improvements across all modal dialogs including ARIA roles, focus traps, and keyboard dismissal

[Chucks1093]

Summary

The app's modal dialogs are not fully accessible — they lack ARIA roles, do not trap focus inside the dialog, and cannot be dismissed with the Escape key in all cases. Fixing these issues across all modals would make the app usable with screen readers and keyboard-only navigation.

Scope

• Add role='dialog', aria-modal='true', and aria-labelledby pointing to the modal title on every modal
• Implement a focus trap that cycles Tab and Shift+Tab within the open modal
• Ensure Escape key dismisses every modal regardless of which element has focus
• Move focus to the first focusable element inside the modal on open and restore focus to the trigger on close
• Add aria-live='polite' to success and error toast messages

Acceptance Criteria

• All modals have role='dialog' and aria-modal='true'
• Tab key cycles within the modal without escaping to the background
• Escape key dismisses all modals
• Focus moves to the first focusable element on modal open
• Focus restored to the trigger element on modal close

ETA: 12 hours

---

Coordinate on Telegram

[codewithzubair07]

@codewithzubair07 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @codewithzubair07 to this issue.

[Abdulrasaq1515]

@Abdulrasaq1515 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello maintainer, I can fix the issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Abdulrasaq1515 to this issue.

[Akintobidavid]

@Akintobidavid has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I’ve reviewed the issue and it aligns with my skills. I can make all modals accessible with proper ARIA attributes, focus trapping, Escape-to-close, and focus restoration, including polite live regions for toasts.

Please assign this to me, you won’t be disappointed, thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Akintobidavid to this issue.

[flexocode442]

@flexocode442 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

‎Hello Maintainer, I’ve reviewed the issue description and I’m confident I can work on it effectively. Please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @flexocode442 to this issue.

[Naajih09]

@Naajih09 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi, I'd like to work on this issue. I've gone through the description and acceptance criteria and I'm confident I can deliver it. I'll make sure every acceptance criterion is met and submit a clean, tested PR. Please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Naajih09 to this issue.

[uche001-dev]

@uche001-dev has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello can i work on this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @uche001-dev to this issue.

[Mawuli-tech]

@Mawuli-tech has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi, my name is Mawuli, and I am a fullstack and smart contract developer skilled in React, Next.js, JavaScript, TypeScript, Tailwind CSS, and Soroban. For this task, I will:

Audit every modal dialog in the codebase and add role="dialog", aria-modal="true", and aria-labelledby pointing to each modal's title element, ensuring screen readers correctly identify and announce the dialog context on open.
Implement a reusable focus trap hook that queries all focusable elements within the open modal, moves focus to the first on open, cycles Tab and Shift+Tab within those elements, and restores focus to the trigger element on close, then apply it consistently across all modals.
Add a global keydown listener within each open modal that calls the dismiss handler on Escape regardless of which element currently holds focus, and add aria-live="polite" to all success and error toast messages so screen readers announce them without interrupting the user.
Write tests confirming every modal has the required ARIA attributes, Tab cycles within the modal without escaping, Escape dismisses each modal, focus moves to the first focusable element on open, and focus returns to the trigger on close.

ETA: 10 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mawuli-tech to this issue.

[drips-wave]

Congratulations, @Mawuli-tech! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Mawuli-tech: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊