ECHOES-1341 Add alert and status announcement modes to Banner

[david-cho-lerat-sonarsource]

---

Summary by Gitar

• New features:
  • Added announcementMode prop to Banner, MessageCallout, and MessageInline to support alert and status ARIA roles.
  • Implemented LiveRegionAnnouncementMode enum and exported it through layout and index packages.
• Documentation:
  • Added PageLevelStatus story in Banner-stories.tsx to demonstrate the status mode.
• Testing:
  • Added unit tests in Banner-test.tsx, MessageCallout-test.tsx, and MessageInline-test.tsx to verify correct ARIA role application.
• Refactor:
  • Corrected an incorrect i18n description key for message_callout.dismiss in keys.json.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	87a0947
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a2abda1622f390008a92ce5
😎 Deploy Preview	https://deploy-preview-700--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-1341

[Copilot]

Pull request overview

Adds an explicit accessibility option to Layout.Banner so consumers can choose whether the banner is announced as an assertive alert (current behavior) or a polite status (for page-level status updates), along with Storybook and unit test updates.

Changes:

• Introduced BannerAnnouncementMode and an announcementMode prop that maps directly to the banner’s ARIA role (defaulting to alert).
• Re-exported BannerAnnouncementMode through the layout public API barrels.
• Added a Storybook example (PageLevelStatus) and a unit test covering the status role behavior (plus snapshot key update due to test rename).

Reviewed changes

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

Show a summary per file

File	Description
stories/layout/Banner-stories.tsx	Adds announcementMode control + PageLevelStatus story demonstrating status announcements.
src/components/layout/index.ts	Re-exports BannerAnnouncementMode from the layout package entry point.
src/components/layout/banner/index.ts	Re-exports BannerAnnouncementMode from the banner barrel.
src/components/layout/banner/BannerTypes.tsx	Defines BannerAnnouncementMode and adds announcementMode to BannerProps with documentation.
src/components/layout/banner/Banner.tsx	Applies announcementMode to the rendered wrapper’s role (default alert).
src/components/layout/banner/tests/Banner-test.tsx	Adds a status-mode test and clarifies default alert behavior in the first test name.
src/components/layout/banner/tests/snapshots/Banner-test.tsx.snap	Updates snapshot key to match renamed test.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

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

[gregaubert]

Looks good!

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed 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

Integrates announcementMode into Banner, MessageCallout, and MessageInline components to support alert and status ARIA roles. The update includes new storybook examples, unit tests, and a fix for an incorrect i18n key in keys.json.

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}