NewsBulletin

Homepage news bulletin strip of topical cards above the footer; when the cards overflow, the track scrolls horizontally with previous and next buttons.

Status: stable. Group: marketing. Markdown version: /design-system/components/news-bulletin.md

When to use

NewsBulletin renders the homepage's footer-adjacent news strip: one topical card per item from a typed items array (the site feeds it NEWS_BULLETIN_ITEMS, currently three items; the component does not cap the list). Interactive cards are native links with per-item aria-labels; external cards open in the same tab and their label ends with "(external link)". When the cards overflow, the track scrolls horizontally and previous/next buttons appear. It is a curated editorial slot, not a feed.

When not to use

Do not use for full blog indexes or article lists.
Do not replace with generic Card stacks without region semantics.
Don't use it for blog listings; the blog index composes its own DS Grid of article cards.
Don't use it for alert or status feedback; that's AlertBanner or Toast.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

NewsBulletin props
Prop	Type	Default	Description	Required
`items`	`NewsBulletinItem[]`	none	Bulletin items; defaults to NEWS_BULLETIN_ITEMS.	No
`className`	`string`	none	Optional wrapper class.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

NewsBulletin keyboard behaviour
Key	Behaviour
Tab	Moves focus to the control and on to the next focusable element. (standard)
Enter	Activates the focused control. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

NewsBulletin rules
Level	Rule	How it is checked
MUST	ARIA: Region landmark, named by the translated "Current highlights" label.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Aria-label per bulletin card; unlinked cards render as article elements with that aria-label.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: External cards open in a new tab with rel noopener noreferrer; their aria-label (which replaces the content) ends with the translated "(external link, opens in a new tab)" cue (linkExternal, linkOpensInNewTab)	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: When the track overflows it becomes focusable (tabIndex 0) and previous/next buttons with translated aria-labels and aria-controls pointing at the track scroll it by card (instant scroll under reduced motion)	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Feed it from NEWS_BULLETIN_ITEMS (or an equivalent typed list) and keep it to about three items; the component renders every item it gets, but the strip is a curated slot, not a feed.	Not stated in the contract.

Install and import

In-repo only. NewsBulletin is not exported from @digitaltableteur/react, so there is no public import path.