Multi-Language FAQ Block for React

Each entry of LANGUAGES holds one language: its code, dir (ltr or rtl), the label shown in the switcher in that language, the title and sentence, and the questions with their id, question and answer. Add an entry with the same question ids and the switcher grows by one segment. Keep the order of ids the same in every language, and have each translation read by a native speaker before you ship it: these are written as examples.

The region carries dir and lang for the chosen language, and the whole block is built with logical classes (ps-, text-start, border-e), so it mirrors on its own. The catalog's Direction Provider also tells the components inside it which way to read. The switcher sits in its own left-to-right box and keeps its order, with each label tagged with its own lang, so a screen reader pronounces "Español" and "العربية" correctly.

It stays open: the accordion isn't remounted, and every language uses the same ids. If you change OPEN_QUESTION, use an id that exists in every language.

Yes, but only one is shown. The three languages share one grid cell: the chosen one is visible, and the others are invisible, hidden from the accessibility tree and inert, so a screen reader and the Tab key only meet the language on screen. That keeps the block exactly as tall as its tallest language, so switching never moves what is below it. It also means search engines see all three. For separate pages per language, give each its own URL and render one language per page; this block is for switching in place.

It's a group named "Language" with three options; the arrow keys move between them and the choice applies at once. The questions are buttons in h3 headings, and Enter or Space opens one. Tab alone moves between questions on this library: its accordion doesn't take arrow keys.

Below the sm breakpoint the switcher spans the full width with three equal segments, and the rows run rail to rail. Longer Spanish and Arabic answers wrap onto more lines but nothing scrolls sideways at 320 pixels, and the block keeps the height of its tallest language.