♻️ Name the grid track expand buttons and make the annotation toggle a button (#12489)

* ♻️ Name the grid track expand buttons

The menu button that expands the columns or rows of a grid layout had no
accessible name. Label it "Columns" or "Rows" and expose its state with
aria-expanded. The track title next to it also toggles on click; it
stays a div, as a larger pointer target for the same action, so the
keyboard does not stop twice on it.

Add the workspace.layout-grid.editor.columns and rows keys (en, es).

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

* ♻️ Make the annotation title toggle a button

The annotation title of a component toggled from a div with a click
handler, and it holds the edit, delete, save and discard buttons, so it
cannot become a single button. Move the toggle to a button with the
arrow and the "Annotation" name, with aria-expanded, that takes the
whole free width of the title. While editing or creating, the title
stays text and no longer collapses the annotation on click, as its
cursor already suggested.

Extend the annotation visual test with the collapsed state; it looks the
same as before, pixel for pixel.

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

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

@@ -374,6 +374,16 @@ test.describe("Component options", () => {
       "annotation-saved.png",
       { maxDiffPixelRatio: 0, threshold: 0 },
     );
+
+    // Collapsed by clicking its title.
+    await title.click();
+    await expect(
+      workspace.rightSidebar.getByText("An annotation"),
+    ).toBeHidden();
+    await expect(workspace.rightSidebar).toHaveScreenshot(
+      "annotation-collapsed.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
   });
 });
 

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

@@ -175,9 +175,7 @@
                                   :editing editing?
                                   :creating creating?)}
        [:div {:class (stl/css-case :annotation-title true
-                                   :expandeable (not (or editing? creating?))
-                                   :expanded expanded?)
-              :on-click on-toggle-expand}
+                                   :expanded expanded?)}
 
         (if (or editing? creating?)
           [:span {:class (stl/css :annotation-title-name)}
@@ -185,7 +183,12 @@
              (tr "workspace.options.component.edit-annotation")
              (tr "workspace.options.component.create-annotation"))]
 
-          [:*
+          ;; Only the arrow and the name toggle: the actions next to them
+          ;; are buttons too, and a button cannot hold other buttons.
+          [:button {:type "button"
+                    :class (stl/css :annotation-title-toggle)
+                    :aria-expanded (boolean expanded?)
+                    :on-click on-toggle-expand}
            [:> icon* {:icon-id (if expanded? i/arrow-down i/arrow-right)
                       :class (stl/css :annotation-title-icon-arrow)
                       :size "s"}]

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

@@ -73,10 +73,6 @@
     border-bottom: $b-1 solid var(--color-background-quaternary);
   }
 
-  &.expandeable {
-    cursor: pointer;
-  }
-
   &:hover {
     .annotation-title-icon-action {
       display: flex;
@@ -84,6 +80,22 @@
   }
 }
 
+// Takes the whole free width of the title, so the clickable area stays
+// as it was when the whole title toggled.
+.annotation-title-toggle {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  align-self: stretch;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
 .annotation-title-name {
   flex-grow: 1;
 }

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

@@ -1037,7 +1037,14 @@
 
     [:div {:class (stl/css :grid-tracks) :data-testid testid}
      [:div {:class (stl/css :grid-track-header)}
-      [:button {:class (stl/css :expand-icon) :on-click toggle}
+      ;; The track title next to it toggles too, as a larger pointer
+      ;; target; this button is the one for the keyboard.
+      [:button {:class (stl/css :expand-icon)
+                :aria-label (if is-column
+                              (tr "workspace.layout-grid.editor.columns")
+                              (tr "workspace.layout-grid.editor.rows"))
+                :aria-expanded (boolean expanded?)
+                :on-click toggle}
        [:> icon* {:icon-id i/menu :class (stl/css :expand-icon-svg)}]]
       [:div {:class (stl/css :track-title) :on-click toggle}
        [:div {:class (stl/css :track-name) :title track-name} track-name]

frontend/translations/en.po

@@ -6747,6 +6747,14 @@ msgstr "Full screen"
 msgid "workspace.header.zoom-selected"
 msgstr "Zoom to selected"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.columns"
+msgstr "Columns"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.rows"
+msgstr "Rows"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs:294, src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs:296, src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:854
 msgid "workspace.layout-grid.editor.options.edit-grid"
 msgstr "Edit grid"

frontend/translations/es.po

@@ -6831,6 +6831,14 @@ msgstr "Pantalla completa"
 msgid "workspace.header.zoom-selected"
 msgstr "Zoom a selección"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.columns"
+msgstr "Columnas"
+
+#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+msgid "workspace.layout-grid.editor.rows"
+msgstr "Filas"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs:294, src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs:296, src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:854
 msgid "workspace.layout-grid.editor.options.edit-grid"
 msgstr "Editar grid"