Language Chips CTA Block for React

Edit the LANGUAGES array at the top of the file: each language has a code, its own name, a sample greeting, the action label for the button and an rtl flag. The copy's "12 languages" is LANGUAGES.length, so it follows the list. Have a native speaker check the greeting and the label: the sample is the first thing a speaker of that language reads.

Every greeting and button label carries its own lang and dir, so the browser shapes the script and orders the text itself, not the page. Choosing Arabic sets dir="rtl" on its greeting and on its button's link, and the rest of the block, set by your page's direction, stays put. To add Hebrew, Persian or Urdu, set rtl: true on its entry.

The chips are one radio group named "Preview language": Tab enters it once, the arrow keys move between chips and choose as they go, and Tab leaves it. Each chip's name is set in its own language, so a screen reader reads it with that language's voice. The chosen chip is filled; it isn't only colour, since a radio group also reports which one is checked. The greeting is a polite live region, so the change is announced without moving focus.

No. The greetings sit in one grid cell, and so do the button labels, all rendered at once with the unchosen ones invisible, hidden from assistive technology and, for the buttons, inert. The cell is as wide and tall as the longest greeting, so nothing below it moves and the focus order never meets a hidden link.

The Shine Button's label follows the chosen language and is a link to your product, so point href at your sign-up or app, optionally with the locale in the URL. The outline button is a fixed link to your list of supported locales. Both buttons render the link they're given with render, with nativeButton={false}.

The browser falls back to a system font for scripts your site font doesn't cover, which is how Japanese, Korean, Chinese, Arabic and Hindi show here. If your brand font lacks a script, add a fallback stack that does for those lang values, for example with a :lang(ja) rule, so the greeting keeps a matching weight.