Sales Region Picker About Block for React

The people are REPS at the top of the file. Each has an id the toggle uses, a region label, a name, languages, hours, a zone label, specialities, a covers phrase for the status line, a book href and an email href. The initials are derived from the name. The first region starts pressed.

A toggle with nothing pressed would leave the card blank. The group is multiple-select under the hood, and the handler keeps the newly pressed region and drops the old one. Pressing the pressed region does nothing.

No. Book is a link (book on the person, a placeholder such as #book-americas). Point it at your scheduler. Email is a mailto: link to a fictional address, so the visitor's own mail app opens; nothing is submitted from this page. A polite line under the toggle names who is showing.

The heading is the section's only h2. The toggle is named "Region", and each button announces whether it is pressed. The status line names the person and the region. Only the shown card is readable: the other two are aria-hidden and inert, so their links are out of the tab order. The initials are decorative, because the name is written beside them. Book and Email include the person's name for assistive technology.

The picker stacks above the card, with a rule between them. The region buttons are full width. The card's actions wrap. Nothing scrolls sideways at 320 pixels, and in a layout that runs the other way the divider moves to the other side of the card.

The picker column fades up once on load. The card swaps in place with no transition, so reduced motion changes nothing about the swap, and the entrance itself is skipped. Nothing is stored, and nothing loops.