Numbered Feature Highlights Banner Block for React

Edit HIGHLIGHTS at the top of the file: each entry has an id, a title, a detail sentence, and a link with its href. Keep the sentences about the same length, so opening another row hardly changes the block's height.

Set defaultValue on Accordion to an array holding the item's value.

Each title is a button inside its own heading (h3, under the heading above it), so a screen reader user can jump between highlights; the button reports expanded or collapsed and opens with Enter or Space. The numbers are decoration and hidden from assistive technology, so they never become part of a name. The block is a labelled section.

Only by the difference between the two panels. They are one sentence and one link each, written to run to the same number of lines, so switching rows barely moves anything. Closing the open row does shorten the block, as any accordion does.

The frame fades up once on load, the panel's height eases open and the number fills in, with CSS. Reduced motion removes the fade and the number's transition.

The heading sits above the framed accordion at full width. Rows wrap to two lines when a title is long, and panels indent under the title, not under the number. Nothing scrolls sideways at 320 pixels.