feat: add optional ariaLabel prop

[parsasaeedi]

Add optional ariaLabel Prop

Summary

This PR introduces an optional ariaLabel prop to the Modal component, allowing developers to ensure all modals are properly labeled for screen reader users in a more flexible way.

Changes

• Added ariaLabel prop to ModalProps interface
• Bound aria-label attribute to the modal container
• Added test coverage for the new prop
• Updated documentation with accessibility best practices

Why is this needed?

According to the W3C ARIA Authoring Practices for Modals, every modal must have an accessible label:

The dialog has either:

• A value set for the aria-labelledby property that refers to a visible dialog title.
• A label specified by aria-label.

Currently, the component only supports ariaLabelledby, which requires referencing a visible element with an ID. However, referencing a visible element is not always possible or practical. Some modals may not have a clear title element, or the visible title may not be the most descriptive for accessibility purposes. In other cases, developers may be forced to create artificial hidden elements solely for screen readers, adding unnecessary complexity and markup.

Example Use Cases

❌ Without ariaLabel (forces artificial markup)

<Modal open={open} onClose={handleClose} ariaLabelledby="hidden-title">
  <h2 id="hidden-title" className="sr-only">Delete confirmation</h2>
  <p>This action cannot be undone.</p>
  <button>Delete</button>
</Modal>

✅ With ariaLabel (clean and semantic)

<Modal open={open} onClose={handleClose} ariaLabel="Delete confirmation">
  <p>This action cannot be undone.</p>
  <button>Delete</button>
</Modal>

Testing

• ✅ All existing tests pass
• ✅ Added test coverage for ariaLabel prop
• ✅ TypeScript compilation successful

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.46%. Comparing base (7006025) to head (6dfbe59).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #532   +/-   ##
=======================================
  Coverage   78.46%   78.46%           
=======================================
  Files           8        8           
  Lines         195      195           
  Branches       73       73           
=======================================
  Hits          153      153           
  Misses         32       32           
  Partials       10       10           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.