Dropdown Multi-Action Banner Block for React

There is nothing to continue with until a region is picked. The button is disabled and points at the line under the row with aria-describedby, which reads "Choose a region to continue." and then "New workspaces will be created in EU West (Ireland)." once a region is picked. That line is polite, so the change is announced, and the line is reserved at the height of its longest version so the card never moves.

From the REGIONS list at the top of the file: a label, a value and a latency string. The figures are sample data, not measurements. To show real ones, measure a round trip from the visitor's browser to each region's endpoint, sort the list by it and put the fastest first. The latency shows beside each name in the list, in a bdi so it reads correctly in right-to-left layouts; the trigger shows the name alone.

Tab reaches the Select, the Continue button once it is enabled, and Skip. On the Select, Enter or the arrow keys open the list, typing jumps to a region by its first letters, Enter picks one and Escape closes the list, returning focus to the field. The exact arrow-key and typeahead details come from the library you chose.

Both fold the block away and leave focus on a visually hidden line that says what happened: "Region set to US East (Virginia)." or "Skipped. You can pick a region later in Settings." Wire submit to save the region on your server and skip to remember the dismissal in a cookie your server reads, so the card is not rendered again.

It is the card's one forward action. Skip is a ghost button, and the Select is a quiet field with the theme's border, so the page's one primary colour stays on a single control.

The row stacks: the Select at full width, then Continue, then Skip, all full width. The sentence wraps and the hint line sits under the buttons. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the Select's chevron and list mirror.