Skip to content

fix(a11y): ensure Modal always has accessible name via aria-label fallback#1044

Merged
ogazboiz merged 3 commits into
LabsCrypt:mainfrom
lishmanTech:modal
May 29, 2026
Merged

fix(a11y): ensure Modal always has accessible name via aria-label fallback#1044
ogazboiz merged 3 commits into
LabsCrypt:mainfrom
lishmanTech:modal

Conversation

@lishmanTech
Copy link
Copy Markdown
Contributor

Summary

This PR fixes an accessibility issue where the Modal component could be rendered without an accessible name when used without a title prop.

Screen readers previously announced such modals as unnamed dialogs.


Problem

  • Modal.tsx only used aria-labelledby when title was provided
  • When title is missing, no fallback aria-label was set
  • This resulted in inaccessible dialog announcements for screen readers

Solution

  • Added optional ariaLabel prop to Modal
  • When title exists → modal uses aria-labelledby
  • When title is missing → modal falls back to aria-label
  • Ensures every modal always has an accessible name

Changes

Modal component

  • Added ariaLabel?: string prop
  • Added fallback:
    • aria-labelledby if title exists
    • aria-label if title is not provided

Call sites

  • Updated title-less modal usage (where applicable) to provide ariaLabel

Example usage

With title (unchanged)

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Dispute Details"
/>

closes #1025 

@ogazboiz ogazboiz merged commit a5b92bd into LabsCrypt:main May 29, 2026
4 of 7 checks passed
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.

2 participants