Announcement Bar Rotator

ProNew

Use this when a site-wide bar carries several short messages: a one-line vertical rotator with a Pause button, a dismiss button and rotation that holds for pointer and focus.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

interval4500

Guide and examples

When to use it

Use it for a thin bar above the header that shares a few offers or notices, each a single line with an optional link.

Do not use it for urgent or required messages (an outage, a legal notice). Those should be static and always visible.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`messages`	`AnnouncementMessage[]`	`-`	Each has an id, text and optional href and cta.
`label`	`string`	`-`	Accessible name of the bar.
`interval`	`number`	`4500`	Time on each message in ms.
`onDismiss`	`() => void`	`-`	Called when the bar is dismissed. The bar then removes itself.

Accessibility

The bar is a labelled carousel region; the live region is off while it rotates and polite once paused.
Pause and Dismiss are buttons with names; dismissing removes the bar and moves focus to the document body only if it was inside, so call onDismiss to place focus.
Rotation holds for pointer and focus and starts paused with prefers-reduced-motion.
Keyboard: Tab: Pause, then the message link, then Dismiss
Keyboard: Up / Down: previous or next message

Testing

The pattern ships with a Testing Library test (announcement-bar-rotator.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.