Segmented Tab Split Frame Features Block for React

Edit BUDGETS at the top of the file. Each tab is one object: a label, a title, a sentence, the unit, the slider's range and step, its starting budget and a list of routes with a value each. Add a tab and it appears in the header and the frame. Every count, the worst route, the median and the bar widths are worked out from that list, so they always agree with the bars.

When its value is past the budget: a route that sits exactly on the budget is within it. Over-budget bars turn solid and their values turn bold, and a screen reader hears "over budget" after their value, so the state is not carried by colour alone.

Yes. Tab to the thumb and the arrow keys move it one step, with Page Up, Page Down, Home and End for larger jumps. The visible counts update as it moves, but a screen reader is told the new count only when a move ends, so a drag doesn't produce a stream of announcements.

No. Only the open tab is drawn, so switching away and back starts that tab at its own starting budget again. If you want each tab to keep what you set, lift the budget into the parent component's state, one value per tab.

The three tabs have the same structure, so the frame keeps nearly the same height: the sentence reserves its lines and every tab has six routes. Keep that when you add a tab, or the page below will move as people switch.

The tabs stay in one row (and scroll sideways if a translation is longer), the text pane comes first and the chart sits under it behind a hairline. The slider spans the width of the bars, so it is easy to drag with a thumb.