From 8884fb38eb68957cc1c8899f737ff474916653dd Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 20:53:51 +0100
Subject: [PATCH 1/3] fix: make profile image controls keyboard accessible

---
 .../src/components/profile/ProfileHeader.tsx  | 62 ++++++++++++-------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index a4f4b09..85f08c4 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/frontend/src/components/profile/ProfileHeader.tsx
@@ -1,4 +1,4 @@
-import type { ChangeEvent } from "react";
+import { useRef, type ChangeEvent } from "react";
 
 type ProfileHeaderProps = {
   username: string;
@@ -20,6 +20,8 @@ export default function ProfileHeader({
   onCoverImageChange,
   onProfileImageChange,
 }: ProfileHeaderProps) {
+  const coverInputRef = useRef<HTMLInputElement>(null);
+  const profileInputRef = useRef<HTMLInputElement>(null);
   return (
     <>
       <div
@@ -47,8 +49,16 @@ export default function ProfileHeader({
           Change
         </label>
 
+        <button
+          type="button"
+          onClick={() => coverInputRef.current?.click()}
+          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-[#242321] dark:text-gray-200 dark:hover:bg-[#35322e] dark:focus-visible:outline-white"
+        >
+          Change cover image
+        </button>
+
         <input
-          id="cover-image-input"
+          ref={coverInputRef}
           type="file"
           accept="image/jpeg,image/png,image/webp"
           onChange={onCoverImageChange}
@@ -57,33 +67,39 @@ export default function ProfileHeader({
       </div>
 
       <div className="picture-and-username relative z-10 -mt-16 ml-20 flex items-center gap-6">
-        <label className="profile-pic group relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300 dark:border-[#171615]">
+        <button
+          type="button"
+          aria-label="Change profile image"
+          onClick={() => profileInputRef.current?.click()}
+          className="profile-pic relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:border-[#171615] dark:focus-visible:outline-white"
+        >
           {isLoadingImages ? (
-            <div className="h-full w-full animate-pulse rounded-full bg-gray-300" />
+            <span className="block h-full w-full animate-pulse bg-gray-300" />
           ) : profileImage ? (
-            <img
-              src={profileImage}
-              alt="Profile"
-              className="h-full w-full rounded-full object-cover"
-            />
+            <>
+              <img
+                src={profileImage}
+                alt=""
+                className="h-full w-full object-cover"
+              />
+              <span className="absolute bottom-4 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-black/70 px-2 py-1 text-xs text-white">
+                Change profile image
+              </span>
+            </>
           ) : (
-            <span className="flex h-full w-full items-center justify-center text-gray-500">
-              Choose image
+            <span className="flex h-full w-full items-center justify-center text-sm text-gray-800">
+              Change profile image
             </span>
           )}
+        </button>
 
-          {/* Hover overlay */}
-          <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-            <span className="text-sm font-medium text-white">Change image</span>
-          </div>
-
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/webp"
-            onChange={onProfileImageChange}
-            className="hidden"
-          />
-        </label>
+        <input
+          ref={profileInputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/webp"
+          onChange={onProfileImageChange}
+          className="hidden"
+        />
 
         <h1 className="font-bold text-4xl mt-16">{username}</h1>
       </div>

From 0dd6583135858907c38399ffeaefa0cb23e407d6 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:04:47 +0100
Subject: [PATCH 2/3] style: refine the profile image edit button

---
 frontend/src/components/profile/ProfileHeader.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index 85f08c4..232d643 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/frontend/src/components/profile/ProfileHeader.tsx
@@ -1,4 +1,5 @@
 import { useRef, type ChangeEvent } from "react";
+import { Pencil } from "lucide-react";
 
 type ProfileHeaderProps = {
   username: string;
@@ -71,7 +72,7 @@ export default function ProfileHeader({
           type="button"
           aria-label="Change profile image"
           onClick={() => profileInputRef.current?.click()}
-          className="profile-pic relative block h-44 w-44 shrink-0 cursor-pointer overflow-hidden rounded-full border-4 border-white bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:border-[#171615] dark:focus-visible:outline-white"
+          className="profile-pic relative block h-44 w-44 shrink-0 cursor-pointer rounded-full border-4 border-white bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:border-[#171615] dark:focus-visible:outline-white"
         >
           {isLoadingImages ? (
             <span className="block h-full w-full animate-pulse bg-gray-300" />
@@ -80,14 +81,14 @@ export default function ProfileHeader({
               <img
                 src={profileImage}
                 alt=""
-                className="h-full w-full object-cover"
+                className="h-full w-full rounded-full object-cover"
               />
-              <span className="absolute bottom-4 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-black/70 px-2 py-1 text-xs text-white">
-                Change profile image
+              <span aria-hidden="true" className="absolute bottom-2 right-2 grid size-9 place-items-center rounded-full border border-[#dedbd8] bg-white text-[#514943] shadow-sm dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6]">
+                <Pencil size={16} strokeWidth={1.75} />
               </span>
             </>
           ) : (
-            <span className="flex h-full w-full items-center justify-center text-sm text-gray-800">
+            <span className="flex h-full w-full items-center justify-center rounded-full text-sm text-gray-800">
               Change profile image
             </span>
           )}

From fd9fb178a6860fff7fabb94932e605d09e93d9b1 Mon Sep 17 00:00:00 2001
From: Karen Skauge <karenska@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:11:55 +0100
Subject: [PATCH 3/3] fix: remove obsolete cover image label

---
 frontend/src/components/profile/ProfileHeader.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index 232d643..e1b4483 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/frontend/src/components/profile/ProfileHeader.tsx
@@ -43,13 +43,6 @@ export default function ProfileHeader({
           )
         )}
 
-        <label
-          htmlFor="cover-image-input"
-          className="absolute bottom-4 right-4 z-20 cursor-pointer rounded-full bg-white px-4 py-2 text-sm text-gray-700 opacity-0 shadow-sm transition-opacity duration-200 group-hover:opacity-100 hover:bg-gray-100 dark:bg-[#242321] dark:text-gray-200 dark:hover:bg-[#35322e]"
-        >
-          Change
-        </label>
-
         <button
           type="button"
           onClick={() => coverInputRef.current?.click()}
@@ -75,7 +68,7 @@ export default function ProfileHeader({
           className="profile-pic relative block h-44 w-44 shrink-0 cursor-pointer rounded-full border-4 border-white bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:border-[#171615] dark:focus-visible:outline-white"
         >
           {isLoadingImages ? (
-            <span className="block h-full w-full animate-pulse bg-gray-300" />
+            <span className="block h-full w-full animate-pulse rounded-full bg-gray-300" />
           ) : profileImage ? (
             <>
               <img
@@ -83,7 +76,10 @@ export default function ProfileHeader({
                 alt=""
                 className="h-full w-full rounded-full object-cover"
               />
-              <span aria-hidden="true" className="absolute bottom-2 right-2 grid size-9 place-items-center rounded-full border border-[#dedbd8] bg-white text-[#514943] shadow-sm dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6]">
+              <span
+                aria-hidden="true"
+                className="absolute bottom-2 right-2 grid size-9 place-items-center rounded-full border border-[#dedbd8] bg-white text-[#514943] shadow-sm dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6]"
+              >
                 <Pencil size={16} strokeWidth={1.75} />
               </span>
             </>