Class Queue Waitlist Contact Block for React

Edit SESSIONS at the top of the file: each has an id, a name, a weekly slot (written the way you write it) and how many people are ahead. Your place is that number plus one, written as an ordinal ("5th"). The queues are example data: bind them to your booking system, and add sessions freely, since the cells wrap to a row of three from md.

A picture of the queue: one muted dot per person ahead and one filled dot for you that fades in when you tick the session. They are hidden from assistive technology; the same facts are in the cell's text ("Tue 7:00 pm, 4 ahead" and "You would be 5th").

The slot, the queue sentence and "You would be 5th" are each isolated with bdi, so the digits and the "th" stay together next to right-to-left text. Ordinals follow English rules here (1st, 2nd, 3rd); for other languages swap ordinal for Intl.PluralRules with your locale and its suffixes.

Tab moves through the three checkboxes and Space ticks one; a click anywhere on a cell ticks it, because each cell is the label of its checkbox. Submit with Enter in a text field or by activating the button. Problems move focus to the first session checkbox, then the name, then the email.

Nowhere yet: the submit handler waits 800 milliseconds, then shows the confirmation. Replace the timer in submit with calls that add details to each ticked session's list, and read the real place from the response before showing it.