Browse Source

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
pull/142/head
Matthew Raymer 15 hours ago
parent
commit
95d223e13c
  1. 12
      src/components/IdentitySection.vue
  2. 14
      src/views/AccountViewView.vue

12
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">

14
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,

Loading…
Cancel
Save