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 19 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" tabindex="0"
@click="emitShowLargeIdenticonUrl" @click="emitShowLargeIdenticonUrl"
/> />
<font-awesome <button
icon="trash-can"
class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12" class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
role="button"
aria-label="Delete profile image" aria-label="Delete profile image"
tabindex="0"
@click="deleteImage" @click="deleteImage"
/> >
<font-awesome
icon="trash-can"
aria-hidden="true"
/>
</button>
</span> </span>
<div v-else class="text-center"> <div v-else class="text-center">
<template v-if="isRegistered"> <template v-if="isRegistered">

14
src/views/AccountViewView.vue

@ -1482,8 +1482,15 @@ export default class AccountViewView extends Vue {
async deleteImage(): Promise<void> { async deleteImage(): Promise<void> {
try { 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( const response = await this.axios.delete(
this.apiServer + "/api/image/" + this.profileImageUrl, this.apiServer + "/api/image/" + imageId,
{ headers: await getHeaders(this.activeDid) }, { headers: await getHeaders(this.activeDid) },
); );
if (response.status === 204) { if (response.status === 204) {
@ -1500,6 +1507,11 @@ export default class AccountViewView extends Vue {
} catch (error) { } catch (error) {
if (isApiError(error) && error.response?.status === 404) { if (isApiError(error) && error.response?.status === 404) {
// it already doesn't exist so we won't say anything to the user // 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 { } else {
this.notify.error( this.notify.error(
ACCOUNT_VIEW_CONSTANTS.ERRORS.IMAGE_DELETE_ERROR, ACCOUNT_VIEW_CONSTANTS.ERRORS.IMAGE_DELETE_ERROR,

Loading…
Cancel
Save