Migration FAQ Block for React

Edit SOURCES at the top of the file: each entry has a value, the segment's label, a heading, four steps and a list of mappings, each a theirs field and the ours field it lands in. The picker, the figure and the table are built from that array, so a fourth source is one more entry. Keep the mappings to about five rows and the steps to about four, so the figure stays short.

All the sources are drawn in one grid cell, and the ones that aren't chosen are invisible, out of the tab order and hidden from assistive technology. The tallest sets the height, so the questions below stay where they are. Only the chosen source's table can take focus.

The table is named after its source ("Field mapping: From a spreadsheet") and its first column holds the row headers, so a screen reader reads each of their fields with the field of ours it maps to. When the table is wider than its column its container scrolls sideways and takes a tab stop, so a keyboard can scroll it.

It's a segmented control with one choice always selected, and the arrow keys move between choices. The steps and the table swap at once. The picker has a name ("Moving from"), and the heading of the chosen source changes with it, so the new content is easy to find.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found".

The picker stacks under its label and the steps stack above the table. The table keeps a minimum width and scrolls sideways inside its own box, so the page itself never scrolls sideways at 320 pixels. The questions follow, as rows from rail to rail.