Quarterly Year Review Testimonials Block for React

Edit the QUARTERS array at the top of the file. Each quarter has an id, the segment's label, the quote and the speaker's name, initials and role, plus its two numbers: deploys a week, and uptime in tenths of a percent (992 shows as 99.2%). The "more a week than Q1" and "points up on Q1" notes, and the sentence under the headline, are worked out from these numbers, so nothing else needs editing. To measure something different, rename the two DataListItemLabels and change the fields they read.

The bar is a group of four radio buttons drawn as segments. The chosen quarter is the solid one, and a tint fills the quarters before it, so the bar reads as how far through the year you are. The tint is a separate decorative layer that grows with a 300ms CSS transition; it is hidden from assistive technology.

The bar is one group named "Quarter", with each segment named "Quarter 1" to "Quarter 4". Tab reaches the group, and the arrow keys move between the segments and choose them. After a visitor changes quarter, a polite status line reads out that quarter's two numbers, such as "Q3: 22 deploys a week, 99.8% uptime"; nothing is announced on load. The quote is a figure with a blockquote and a caption, and the numbers are a description list.

No. All four panels are laid over one another, and the tallest decides the height, so the block is the same size for every quarter, at every width. The three unseen panels are hidden from screen readers and from the tab order, and only the chosen one is shown. It fades in over 300ms, and under reduced motion it simply appears.

The four segments share the width equally down to 320px, and the panel stacks the quote above its numbers below the lg breakpoint, the two numbers side by side. In a right-to-left page the bar fills from the right and Q1 sits at the right, the divider moves to the other side, and every number and quote keeps its marks in place because each sits in a bdi.

Fetch your figures on the server and pass them in as the QUARTERS array: the bar, the tint, the panel and the notes all follow its length, but the tint steps assume four segments, so for another count change the FILL widths to match (w-1/3, w-2/3 for three). Keep the quotes honest: each one should be about the stretch it sits under.