From 95d223e13c9b5451cad0b490ee6bf18d270a1268 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Sun, 27 Jul 2025 08:48:00 +0000
Subject: [PATCH] Fix accessibility and image deletion issues in
 AccountViewView

- Fix aria-hidden conflict on trash can icon by wrapping in proper button element
- Fix image deletion API endpoint by extracting image ID from full URL
- Improve 404 error handling to clear local image reference when image already deleted
- Resolve accessibility warning and prevent invalid API calls
---
 src/components/IdentitySection.vue | 12 +++++++-----
 src/views/AccountViewView.vue      | 14 +++++++++++++-
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/IdentitySection.vue b/src/components/IdentitySection.vue
index f9e9fc53..0ad5962c 100644
--- a/src/components/IdentitySection.vue
+++ b/src/components/IdentitySection.vue
@@ -50,14 +50,16 @@
           tabindex="0"
           @click="emitShowLargeIdenticonUrl"
         />
-        <font-awesome
-          icon="trash-can"
+        <button
           class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
-          role="button"
           aria-label="Delete profile image"
-          tabindex="0"
           @click="deleteImage"
-        />
+        >
+          <font-awesome
+            icon="trash-can"
+            aria-hidden="true"
+          />
+        </button>
       </span>
       <div v-else class="text-center">
         <template v-if="isRegistered">
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index c12a9e06..8fea0cab 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1482,8 +1482,15 @@ export default class AccountViewView extends Vue {
 
   async deleteImage(): Promise<void> {
     try {
+      // Extract the image ID from the full URL
+      const imageId = this.profileImageUrl?.split('/').pop();
+      if (!imageId) {
+        this.notify.error("Invalid image URL");
+        return;
+      }
+
       const response = await this.axios.delete(
-        this.apiServer + "/api/image/" + this.profileImageUrl,
+        this.apiServer + "/api/image/" + imageId,
         { headers: await getHeaders(this.activeDid) },
       );
       if (response.status === 204) {
@@ -1500,6 +1507,11 @@ export default class AccountViewView extends Vue {
     } catch (error) {
       if (isApiError(error) && error.response?.status === 404) {
         // it already doesn't exist so we won't say anything to the user
+        // Clear the local reference since the image is gone
+        this.profileImageUrl = "";
+        await this.$saveSettings({
+          profileImageUrl: "",
+        });
       } else {
         this.notify.error(
           ACCOUNT_VIEW_CONSTANTS.ERRORS.IMAGE_DELETE_ERROR,