fix(bots): Tab reaches the colours in Safari and the desktop app

WebKit's Tab passes over a radio that has no tabindex of its own, so
in Safari and in the macOS desktop app's window Tab never reached the
colours. The chosen colour now carries tabindex 0 and the others -1,
so the group is still one stop and the arrow keys move through it.

Author: jerelvelarde

app/src/components/bot-profile/look.tsx

@@ -59,7 +59,8 @@ export const SAVE_AFTER_MS = 700;
  * whoever may edit the Bot, the people who may also rename it.
  *
  * The colours are native radios, so the group is one stop for Tab and the arrow keys move through
- * it, as they do in any radio group. Moving through them only previews: the face shows each colour
+ * it, as they do in any radio group. The chosen one carries the stop as its tabindex, which Safari
+ * needs to reach a radio by Tab at all. Moving through them only previews: the face shows each colour
  * at once, and the one the person stops on is saved after a short pause, or as soon as focus leaves
  * the group, so browsing restyles the Bot for nobody else and saves it once. New face saves at once.
  * Either can be taken back with Undo, which saves the look from before. One that can't be saved
@@ -244,6 +245,10 @@ export function LookSection({ agent }: { agent: AgentProfile }) {
                     className="peer sr-only"
                     name={group}
                     onChange={() => pick(option)}
+                    // Safari's Tab, and the desktop app's on a Mac, passes over a radio unless it
+                    // has a tabindex of its own. The chosen colour has one, so the group stays a
+                    // single stop, and the arrow keys move through it from there.
+                    tabIndex={option === colour ? 0 : -1}
                     type="radio"
                     value={option}
                   />

app/tests/bot-look.test.tsx

@@ -275,6 +275,23 @@ test("the Look section shows the Bot's face large, and its colour named and chos
   expect(seeds(view).preview).toEqual(["expenses"]);
 });
 
+test("Tab reaches the colours in any browser, at the chosen one, and stops there once", async () => {
+  serve();
+  const { view, user } = draw();
+  const look = await lookOf(view);
+  // Safari's Tab passes over a radio with no tabindex of its own, so the chosen colour has one.
+  const stops = () =>
+    (look.getAllByRole("radio") as HTMLInputElement[]).map((radio) =>
+      radio.getAttribute("tabindex"),
+    );
+  const only = (at: number) =>
+    COLOURS.map((_, index) => (index === at ? "0" : "-1"));
+  expect(stops()).toEqual(only(COLOURS.indexOf("Blue")));
+
+  await user.click(look.getByRole("radio", { name: "Green" }));
+  expect(stops()).toEqual(only(COLOURS.indexOf("Green")));
+});
+
 test("a colour shows at once, saves after a pause, and every avatar of the Bot follows", async () => {
   serve();
   const { view, user } = draw();