ECHOES-1356 Add announcement modes to MessageCallout and MessageInline

[david-cho-lerat-sonarsource]

---

Summary by Gitar

• New accessibility features:
  • Added announcementMode prop to MessageCallout and MessageInline to enable alert or status live-region semantics.
• Component updates:
  • Integrated LiveRegionAnnouncementMode into both components to manage ARIA roles dynamically.
• Testing and documentation:
  • Added unit tests for default behaviors and live-region support.
  • Updated Storybook stories with new announcementMode controls and examples.
• Refactoring:
  • Corrected the ARIA-label description for the MessageCallout dismiss button in i18n/keys.json and component code.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	6a89b75
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a2ab9ed2f2f9c0008dfe58e
😎 Deploy Preview	https://deploy-preview-701--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1356

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

[gregaubert]

Looks good!

It might be worth adding the MessageInline and MessageCallout typescript documentation since we are touching these components.

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Integrates announcementMode into MessageCallout and MessageInline to support ARIA live-region semantics. This update addresses the missing live-region announcement issue and improves dismiss button accessibility.

✅ 1 resolved

✅ Edge Case: Live-region announcement may not fire when rendered with content

📄 src/components/messages/MessageCallout.tsx:78 📄 src/components/messages/MessageInline.tsx:62 📄 src/components/messages/MessageTypes.tsx:29-32
MessageCallout and MessageInline apply role={announcementMode} (status/alert) on the same container element that already contains the message text at mount time. ARIA live regions—especially role="status" (aria-live="polite")—are most reliably announced when the live-region element already exists in the DOM and content is added/changed afterward. When a consumer conditionally mounts the whole component with its text already present (the common usage shown in the new StatusAnnouncement/AlertAnnouncement stories), some screen readers may not announce the message. role="alert" generally fires on insertion, but status is less consistent.

This is the core purpose of the feature, so it is worth documenting the limitation in the prop JSDoc (e.g., note that announcements are reliable when the message is updated/inserted into an already-mounted region) and, if feasible, considering keeping the live region mounted while toggling its content. The unit tests only assert the role/text is present in the DOM, not that an announcement is actually triggered, so this gap isn't caught by tests.

Sources: src/components/messages/MessageCallout.tsx:78, src/components/messages/MessageInline.tsx:62

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}