Location Consent Alert Banner Block for React

Yes. The line is a polite live region that is in the page from the start, so choosing a region announces the new sentence once and nothing is read at load. The sentence names the region first ("Europe: prices in EUR…") because the segments themselves are only "US", "EU" and "UK".

Edit REGIONS at the top of the file: each region is a code, the label on its segment and the line it shows. The control and the live line follow the data. Keep each line to about one sentence: the cell reserves two lines on phones and one from sm, so a longer sentence would move the page when you switch.

Only the line, in this block: it is the control and the message. To change real prices, read the selected code where you format money and compute tax, and store it for the next visit (a cookie that your server reads, so the first paint is already right). The block doesn't read the visitor's location or ask for permission.

Three short choices are better seen than hidden, and one tap does it. A segment control also keeps the current region visible all the time. For more than about four regions use a select instead: the segments won't fit a phone.

It is a group of radio buttons named "Region": Tab reaches it, the arrow keys move between regions and choose one, and the chosen segment has a visible highlight. Nothing shifts when you switch, because the line's cell keeps its height.

Below lg the pin, heading and line come first, then a rule, then the control at the full width of the page column. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the cells and the pin mirror.