github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-11-06 10:00:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Make the profile page modal links keyboard buttons (#12712)

Browse Source 
"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
This commit is contained in:
Eva Marco 2026-11-05 11:31:15 +01:00 committed by GitHub
parent 8ab9624f0b
commit 686b47742d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
View File

@ -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();

12
frontend/src/app/main/ui/settings/profile.cljs
View File

@ -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

10
frontend/src/app/main/ui/settings/profile.scss
View File

@ -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 {