From f827b7b4a65930940a672118f4d06c04c7d6e64f Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Thu, 5 Nov 2026 11:31:33 +0100
Subject: [PATCH] :bug: Make the dashboard template cards keyboard buttons
 (#12710)

A template card was an <a> without href inside a focusable div: Tab
reached the div, and neither Enter nor Space imported the template, so
the cards could not be used from the keyboard. Importing is an action,
so the card is now a <button> with the same look; it takes the tab
index the div had, and the manual Enter handler goes away.

Keyboard focus looks like hover (accent border and "Add to your
project").

The templates visual test gives 0 px of difference at rest, on hover and
for the scroll and collapse buttons; a new shot covers the focus.

AI-assisted-by: claude-opus-5-5
---
 .../ui/visual-specs/visual-dashboard.spec.js  |  7 +++++
 .../src/app/main/ui/dashboard/templates.cljs  | 28 ++++++++-----------
 .../src/app/main/ui/dashboard/templates.scss  |  6 ++--
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
index a1b458e358..9aa15856a0 100644
--- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
+++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
@@ -897,6 +897,13 @@ test.describe("Templates section controls", () => {
     await card.hover();
     await expect(card).toHaveScreenshot(shot);
 
+    // Focused from the keyboard, a card looks like on hover.
+    await page.mouse.move(640, 100);
+    await page.keyboard.press("Shift");
+    await card.focus();
+    await expect(card).toHaveScreenshot(shot);
+    await card.blur();
+
     const moveButtons = section.locator("[class*='move-button']");
     await moveButtons.last().hover();
     await expect(moveButtons.last()).toHaveScreenshot(shot);
diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs
index 55e0176651..049d2f09e0 100644
--- a/frontend/src/app/main/ui/dashboard/templates.cljs
+++ b/frontend/src/app/main/ui/dashboard/templates.cljs
@@ -98,26 +98,22 @@
         (mf/use-fn
          (mf/deps on-import)
          (fn [event]
-           (on-import item event)))
-
-        on-key-down
-        (mf/use-fn
-         (mf/deps on-import)
-         (fn [event]
-           (when (kbd/enter? event)
-             (dom/stop-propagation event)
-             (on-import item event))))]
+           (on-import item event)))]
 
     [:div {:class (stl/css :card-container)
-           :tab-index (if (or (not is-visible) collapsed) "-1" "0")
            :id id
            :data-index index}
-     [:a {:class (stl/css :template-card)
-          :on-click on-click
-          :on-mouse-down dom/prevent-default
-          :on-mouse-enter #(reset! hover? true)
-          :on-mouse-leave #(reset! hover? false)
-          :on-key-down on-key-down}
+     ;; Importing the template is an action: a button, which already
+     ;; handles Enter and Space.
+     [:button {:type "button"
+               :class (stl/css :template-card)
+               :tab-index (if (or (not is-visible) collapsed) "-1" "0")
+               :on-click on-click
+               :on-mouse-down dom/prevent-default
+               :on-mouse-enter #(reset! hover? true)
+               :on-mouse-leave #(reset! hover? false)
+               :on-focus #(reset! hover? true)
+               :on-blur #(reset! hover? false)}
       [:div {:class (stl/css :img-container)}
        [:img {:src (dm/str href)
               :alt (:name item)
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index b9ae6c92f2..b87c243df1 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -187,9 +187,11 @@
   padding: 0 var(--sp-xs) var(--sp-s) var(--sp-xs);
   border-radius: $br-8;
   border: $b-2 solid transparent;
+  background-color: transparent;
 
-  &:hover {
-    text-decoration: none;
+  &:hover,
+  &:focus-visible {
+    outline: none;
     border-color: var(--color-accent-primary);
 
     .download-icon {