♻️ Make the grid track direction icon and the swap groups buttons (#12476)

* ♻️ Make the grid track direction icon a button

The direction icon at the start of each grid track value field selected
that column or row from a div with a click handler: no button role, no
name and no keyboard access. Make it a button labeled "Select column" or
"Select row", keeping its class and handler, and reset the browser
border so it looks the same. It stays a raw button: it is a segment of
the track field, not a DS button.

Add the workspace.layout-grid.editor.select-column and select-row keys
(en, es).

AI-assisted-by: claude-opus-5-5

* ♻️ Make the component swap panel groups buttons

The groups of the component swap panel opened from a div with a click
handler: no button role and no keyboard access. Make each group a
button, keeping its class, title and handler, and reset the browser
button styles so it looks the same. Its name is the visible group name.

Add a visual test with a fixture whose components sit in two groups, so
the swap panel lists them.

AI-assisted-by: claude-opus-5-5

frontend/playwright/ui/visual-specs/workspace.spec.js

@@ -393,6 +393,31 @@ test.describe("Component options", () => {
     });
   });
 
+  test("Shows the groups of the swap panel", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(
+      /get\-file\?/,
+      "workspace/get-file-9066-swap-groups.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "e179d9df-de35-80bf-8005-283bbd5516b0",
+      pageId: "e179d9df-de35-80bf-8005-283bbd5516b1",
+    });
+
+    await workspace.clickToggableLayer("Board");
+    await workspace.clickToggableLayer("Group");
+    await workspace.layers.getByText("A", { exact: true }).click();
+    await workspace.rightSidebar.getByRole("button", { name: /^A / }).click();
+
+    await expect(workspace.rightSidebar.getByText("Letters")).toBeVisible();
+    await workspace.rightSidebar.getByText("Letters").hover();
+    await expect(workspace.rightSidebar).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+
   test("Shows the annotation actions of a main component", async ({ page }) => {
     const workspace = new WorkspacePage(page);
     await workspace.setupEmptyFile();

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -625,9 +625,10 @@
   [{:keys [item on-enter-group]}]
   (let [group-name     (:name item)
         on-group-click #(on-enter-group group-name)]
-    [:div {:class (stl/css :swap-group)
-           :on-click on-group-click
-           :title group-name}
+    [:button {:type "button"
+              :class (stl/css :swap-group)
+              :on-click on-group-click
+              :title group-name}
 
      [:span {:class (stl/css :swap-group-name)}
       (cpn/last-path group-name)]

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss

@@ -330,6 +330,11 @@
 .swap-group {
   @include t.use-typography("body-small");
 
+  inline-size: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
   cursor: pointer;
   display: grid;
   grid-template-columns: 1fr var(--sp-m);

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -986,8 +986,14 @@
            :on-pointer-leave pointer-leave}
 
      [:div {:class (stl/css :track-info-container)}
-      [:div {:class (stl/css :track-info-dir-icon)
-             :on-click handle-select-track}
+      ;; Raw button on purpose: it is the start segment of the track
+      ;; value field, not a DS button.
+      [:button {:type "button"
+                :class (stl/css :track-info-dir-icon)
+                :aria-label (if is-column
+                              (tr "workspace.layout-grid.editor.select-column")
+                              (tr "workspace.layout-grid.editor.select-row"))
+                :on-click handle-select-track}
        [:> icon* {:icon-id (if is-column i/flex-vertical i/flex-horizontal)
                   :class (stl/css :track-info-dir)}]]
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -235,6 +235,7 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  border: none;
   border-radius: $br-8 0 0 $br-8;
   background-color: var(--color-background-tertiary);
   padding: 0 var(--sp-s);

frontend/translations/en.po

@@ -6803,6 +6803,14 @@ msgstr "Top padding"
 msgid "workspace.layout-grid.editor.padding.vertical"
 msgstr "Vertical padding"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.select-column"
+msgstr "Select column"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.select-row"
+msgstr "Select row"
+
 #: src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
 msgid "workspace.layout-grid.editor.track-options"
 msgstr "Track options"

frontend/translations/es.po

@@ -6887,6 +6887,14 @@ msgstr "Padding superior"
 msgid "workspace.layout-grid.editor.padding.vertical"
 msgstr "Padding vertical"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.select-column"
+msgstr "Seleccionar columna"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.select-row"
+msgstr "Seleccionar fila"
+
 #: src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
 msgid "workspace.layout-grid.editor.track-options"
 msgstr "Opciones de la pista"