In-App Notification Banner
Component Detail
Description
WCAG 2.2 AA compliant in-app banner component that renders scenario-based notification messages while the user is active in the app. Supports dismiss action, deep-link tap navigation, and screen-reader announcement. Reuses the shared notification banner infrastructure from the notification centre.
in-app-notification-banner
Summaries
The In-App Notification Banner ensures that peer mentors receive timely, actionable alerts even when they are actively using the application, without interrupting their workflow in a disruptive way. Scenario-based notifications that surface at the right moment — such as a certification expiry warning while a mentor is logging a session — drive faster response rates and reduce the risk of compliance lapses going unnoticed. As a shared component reused across all notification scenarios, it also delivers significant development efficiency: building once and reusing everywhere reduces both build cost and the risk of inconsistent notification experiences that erode user trust. WCAG 2.2 AA compliance broadens usability for all mentor demographics.
The In-App Notification Banner is a low-complexity shared mobile UI component with a single dependency on the scenario-deep-link-router. Because it is marked as shared infrastructure, it should be delivered before any feature that needs to surface in-app notifications, making it an early-sprint deliverable. The auto-dismiss timeout must be configurable at call time, requiring agreement with product on default values per scenario type. Testing scope includes unit tests for show/dismiss/tap flows, screen-reader announcement verification on iOS and Android, and deep-link navigation integration tests with the scenario-deep-link-router.
Its reuse across multiple features means any breaking change to its interface has broad blast radius — interface stability should be treated as a contract.
The In-App Notification Banner is a shared mobile UI component that integrates with the scenario-deep-link-router for tap navigation. It exposes four interfaces: `show(notification)` renders the banner with message, icon, and scenario-appropriate copy; `dismiss()` hides the banner and cancels any pending auto-dismiss timer; `onTap(deepLinkUrl)` delegates to scenario-deep-link-router for in-app navigation; and `setAutoDismissTimeout(seconds)` configures the auto-dismiss delay before `show()` is called. Screen-reader announcements must use `UIAccessibilityPostNotification` (iOS) and `ViewCompat.setAccessibilityLiveRegion` (Android) on render. The component reuses shared notification banner infrastructure — confirm the exact base component API before implementing to avoid duplication.
No direct data fetching: all notification content is passed in via `show(notification)` at call time.
Responsibilities
- Render scenario notification message with appropriate icon and copy
- Announce banner content to screen readers (VoiceOver / TalkBack)
- Navigate to the deep-linked screen on tap
- Auto-dismiss after configurable timeout
Interfaces
show(notification)
dismiss()
onTap(deepLinkUrl)
setAutoDismissTimeout(seconds)