From 686b47742da1692651e01c35e5197ee63fddf8a9 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Thu, 5 Nov 2026 11:31:15 +0100
Subject: [PATCH] :bug: Make the profile page modal links keyboard buttons
 (#12712)

"Change email" and "Want to remove your account?" were <a> without href
that open modals: the keyboard could not reach them. They are now
<button type="button"> that keep their text-link look (accent color,
underline on hover), so Tab reaches them and Enter or Space opens the
modal.

The profile visual test gives 0 px of difference, now also with a shot
of the hover on "Want to remove your account?".

AI-assisted-by: claude-opus-5-5
---
 .../ui/visual-specs/visual-dashboard.spec.js         |  3 +++
 frontend/src/app/main/ui/settings/profile.cljs       | 12 +++++++-----
 frontend/src/app/main/ui/settings/profile.scss       | 10 ++++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
index 4fa236a8b6..a1b458e358 100644
--- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
+++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
@@ -860,6 +860,9 @@ test.describe("Profile page controls", () => {
     await page.getByText("Change email").hover();
     await expect(container).toHaveScreenshot(shot);
 
+    await page.getByText("Want to remove your account?").hover();
+    await expect(container).toHaveScreenshot(shot);
+
     // The "Update" overlay is a button: it shows on keyboard focus too.
     await page.mouse.move(10, 700);
     await page.getByRole("button", { name: "Update" }).focus();
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index 74f073ae36..14cfb8097c 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -73,8 +73,9 @@
 
       [:div {:class (stl/css :options)}
        [:div.change-email
-        [:a {:class (stl/css :link)
-             :on-click on-show-change-email}
+        [:button {:type "button"
+                  :class (stl/css :link)
+                  :on-click on-show-change-email}
          (tr "dashboard.change-email")]]]]
 
      [:> fm/submit-button*
@@ -84,9 +85,10 @@
 
      [:div {:class (stl/css :links)}
       [:div
-       [:a {:class (stl/css :link)
-            :on-click on-show-delete-account
-            :data-testid "remove-acount-btn"}
+       [:button {:type "button"
+                 :class (stl/css :link)
+                 :on-click on-show-delete-account
+                 :data-testid "remove-acount-btn"}
         (tr "dashboard.remove-account")]]]]))
 
 ;; --- Profile Photo Form
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index 0c2b954a18..d98a0f5996 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -19,10 +19,20 @@
   align-items: center;
 }
 
+// "Change email" and "Want to remove your account?" open modals, so they
+// are buttons that keep the look of a text link.
 .link {
   @include use-typography("body-medium");
 
   color: var(--color-accent-primary);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .form-container {