Announcements Component - API Reference

Quick Start

Get announcements working in under 2 minutes:

<!-- Include CSS -->
<link rel="stylesheet" href="styles/announcements.css">

<!-- Include Font Awesome for icons -->
<script src="https://kit.fontawesome.com/YOUR_KIT.js"></script>

<!-- Basic Announcements -->
<div class="rsl-announcements" data-rsl-announcements>
    <div class="rsl-announcement-item" data-priority="urgent">
        School closed Monday due to weather
    </div>
    <div class="rsl-announcement-item" data-priority="event" data-new>
        Winter concert December 15th at 7pm
    </div>
    <div class="rsl-announcement-item" data-priority="news">
        New lunch menu available next week
    </div>
</div>

<!-- Include JavaScript -->
<script src="javascript/announcements.js"></script>

Key Features

Two Display Modes

Bar mode shows one announcement at a time with navigation. Panel mode expands to show all announcements as a scannable list.

Fully Accessible

WCAG 2.1 AA compliant with full keyboard navigation, live regions, focus trapping, and reduced motion support.

FilterBus Integration

Connect to RSL's FilterBus for cross-component filtering by category, priority, or custom attributes.

Priority Badges

Built-in badge styles for urgent, event, news, and reminder categories with proper color contrast.

Optional Auto-Rotate

Enable auto-rotation with configurable intervals. Automatically pauses on hover, focus, or user interaction.

Dark Mode Ready

Seamless theme switching with pre-configured dark mode styles and high-contrast focus states.

Container Attributes

Attribute	Type	Default	Description
`data-rsl-announcements`	Flag	Required	Initializes the announcements component
`data-auto-rotate`	Boolean	`false`	Enable automatic rotation between announcements
`data-interval`	Number	`5`	Rotation interval in seconds (when auto-rotate is enabled)
`data-pause-on-hover`	Boolean	`true`	Pause auto-rotation when hovering over the bar
`data-expand-on-focus`	Boolean	`false`	Automatically expand the panel when any element receives focus
`data-filter-key`	String	`null`	FilterBus key to subscribe to for filtering items
`data-variant`	String	`default`	Color variant: `info`, `success`, `warning`, `danger`, `neutral`

Item Attributes

Attribute	Type	Description
`data-priority`	String	Priority level: `urgent`, `event`, `news`, `reminder`, `normal`
`data-category`	String	Category for FilterBus integration (e.g., "alert", "event", "news")
`data-date`	String	Date in YYYY-MM-DD format, displayed in the expanded panel
`data-new`	Flag	Displays a "New" badge next to the announcement
`data-link`	URL	Makes the announcement text a clickable link

JavaScript API

Initialization

// Auto-initializes on DOMContentLoaded
// Or manually initialize all instances:
RSL.Announcements.init();

// Create single instance with custom options:
const instance = RSL.Announcements.create(element, {
    autoRotate: true,
    interval: 8,
    pauseOnHover: true
});

// Get existing instance:
const instance = RSL.Announcements.getInstance(element);

Instance Methods

Method	Description
`next()`	Navigate to the next announcement
`prev()`	Navigate to the previous announcement
`goTo(index)`	Navigate to a specific announcement by index
`expand()`	Expand the announcements panel
`collapse()`	Collapse the announcements panel
`toggle()`	Toggle the panel open/closed
`pause()`	Pause auto-rotation
`resume()`	Resume auto-rotation
`refresh()`	Re-parse items from the DOM (useful after dynamic updates)
`destroy()`	Remove the component and clean up event listeners

Keyboard Navigation

Key	Action
`Tab`	Navigate between focusable elements
`Arrow Left / Up`	Previous announcement (bar mode only)
`Arrow Right / Down`	Next announcement (bar mode only)
`Enter / Space`	Activate focused button
`Escape`	Close expanded panel

Accessibility Note: Arrow key navigation stops at boundaries (first/last item) - there is no infinite looping. This matches WCAG expectations for list navigation.

Accessibility

The Announcements component is designed to meet WCAG 2.1 AA standards:

2.1.1 Keyboard: Full keyboard accessibility for all controls
2.2.2 Pause, Stop, Hide: Auto-rotation can be paused; visible pause button always present
2.4.7 Focus Visible: High-contrast focus indicators (3px solid outline)
4.1.3 Status Messages: Live region announces navigation and state changes
1.4.13 Content on Hover/Focus: Panel remains open while interacting; Escape dismisses

Important: If auto-rotate is enabled, a visible pause button is always present. Users who pause manually will not have rotation auto-resume.

Screen Reader Navigation

When using a screen reader:

Tab to the announcement area to hear the current announcement
Arrow keys (left/right or up/down) navigate between announcements
Enter opens the link if the current announcement has one
Tab again to reach the pause button (if auto-rotate) and expand button

Note: When first entering the announcement area, allow the screen reader to finish reading the current announcement before pressing arrow keys to navigate. This is standard screen reader behavior—live region updates are queued after the current speech completes. Subsequent arrow key presses will immediately announce the new announcement.

CSS Variables

Customize the appearance by overriding these CSS variables:

:root {
    /* Bar colors */
    --rsl-announcements-bar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --rsl-announcements-bar-text: #ffffff;
    --rsl-announcements-bar-height: 48px;

    /* Panel colors */
    --rsl-announcements-panel-bg: #ffffff;
    --rsl-announcements-panel-border: #e0e0e0;

    /* Priority badges */
    --rsl-announcements-urgent-bg: #dc3545;
    --rsl-announcements-event-bg: #007bff;
    --rsl-announcements-news-bg: #28a745;
    --rsl-announcements-reminder-bg: #ffc107;

    /* Focus states */
    --rsl-announcements-focus-outline: 3px solid #000000;
}

FilterBus Integration

Announcements integrates with RSL's FilterBus as a publisher component. When the current announcement changes, it publishes state updates that other components can subscribe to.

How It Works

Add data-filter-key="keyName" to the container to enable FilterBus publishing
Add data-category="value" to each announcement item
When announcements rotate or user navigates, the current item's category is published
Other components can subscribe to react to announcement changes

Example

<!-- Announcements publishes to FilterBus -->
<div data-rsl-announcements data-filter-key="announcementCategory">
    <div data-category="alert" data-priority="urgent">
        System maintenance tonight at 11 PM
    </div>
    <div data-category="event" data-priority="event">
        Join us for the company picnic!
    </div>
    <div data-category="news" data-priority="news">
        New feature released: Dashboard 2.0
    </div>
</div>

<!-- Other components can subscribe -->
<script>
RSL.FilterBus.subscribe('announcement-listener', function(state) {
    if (state.announcementCategory) {
        console.log('Current announcement category:', state.announcementCategory);
    }
});
</script>

FilterBus Attributes

Attribute	Applied To	Description
`data-filter-key`	Container	FilterBus key to publish to when announcement changes
`data-category`	Item	Category value published when this item is active (e.g., "alert", "event", "news")

See FilterBus in Action

Watch how Announcements integrates with FilterBus in a live dashboard. This demo shows Filter + Smart Table + KPI Cards + Announcements + Charts all working together.

View Live Dashboard Demo