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 {