Allow input of alternative text for collection and community logos/th…#3389
Allow input of alternative text for collection and community logos/th…#3389DanGastardelli wants to merge 31 commits intoDSpace:mainfrom
Conversation
…chema to store thumbnail descriptions of collections and communities
|
Hi @DanGastardelli, |
|
Hi @DanGastardelli, |
…com/DanGastardelli/dspace-angular into UpdatingAlternativeTextInThumbnails
|
Hi @DanGastardelli, |
|
Hi @DanGastardelli, |
|
Hi @DanGastardelli, |
|
Hi @DanGastardelli, |
|
Hi @DanGastardelli, |
tdonohue
left a comment
tdonohue
left a comment
There was a problem hiding this comment.
@DanGastardelli : We talked about this PR as a team in today's Developers Meeting. The overall feedback was positive, but there was a suggestion to avoid creating a new metadata field for this "alt" text. See comment inline below for the suggestion.
| * Corresponds to the metadata field dspace.thumbnail.description | ||
| */ | ||
| get descriptionThumbnail(): string { | ||
| return this.firstMetadataValue('dspace.thumbnail.description'); |
There was a problem hiding this comment.
It was suggested in today's meeting that the more appropriate place to store the "alt" text for a Bitstream would be on the Bitstream object itself in the dc.description field. This has two main benefits:
- It would avoid needing to create a new metadata field on the backend.
- It'd also be better to store this information on the Bitstream as the "alt" text is a description of the Bitstream, and not something that belongs to the Collection. That way, if the Bitstream logo changes, then the old "alt" text goes away and new text comes with the new Bitstream.
| if (this.thumbnail){ | ||
| if ('payload' in this.thumbnail) { | ||
| this.listenThumbnail = this.thumbnail; | ||
| this.customDescription = this.listenThumbnail.payload.metadata['dc.description'][0].value; |
There was a problem hiding this comment.
This will throw an error if there's no description. Better do something like
| this.customDescription = this.listenThumbnail.payload.metadata['dc.description'][0].value; | |
| const bitstream = this.listenThumbnail.payload; | |
| if (bitstream && bitstream.hasMetadata('dc.description')) { | |
| this.customDescription = bitstream.firstMetadataValue('dc.description'); | |
| } |
| } | ||
| <!-- don't use *ngIf="!isLoading" so the thumbnail can load in while the animation is playing --> | ||
| @if (src() !== null) { | ||
| @if (src() && customDescription === undefined) { |
There was a problem hiding this comment.
If customDescription is an empty string, it will not be undefined and this default alt text won't be used
| @if (src() && customDescription !== undefined) { | ||
| <img class="thumbnail-content img-fluid" | ||
| [class.d-none]="isLoading()" | ||
| [src]="src() | dsSafeUrl" | ||
| [alt]="customDescription" | ||
| (error)="errorHandler()" | ||
| (load)="successHandler()"/> | ||
| } |
There was a problem hiding this comment.
We're duplicating a lot of code here, simply for the alt property. Perhaps it's a better idea to move the logic to the ts file, and have a this.altText property that's always defined, and contains the customDescription if it exists (and isn't empty), and the i18n message otherwise
|
Hi @artlowel! I made some changes to reduce code repetition and implemented the suggestion given for the thumbnail component condition. Looking forward to your feedback, |
artlowel
left a comment
artlowel
left a comment
There was a problem hiding this comment.
Thanks @DanGastardelli!
That's already looking a lot better, a few more points of feedback though
| @if (logoRD$ && collection.descriptionThumbnail) { | ||
| <ds-comcol-page-logo | ||
| [logo]="(logoRD$ | async)?.payload" | ||
| [alternateText]="collection.descriptionThumbnail"> | ||
| </ds-comcol-page-logo> |
There was a problem hiding this comment.
This can be optimized the same way you did for the thumbnail component, by conditionally setting the value of alternateText
| <!-- Community logo with custom description --> | ||
| @if (logoRD$ && communityPayload.descriptionThumbnail) { | ||
| <ds-comcol-page-logo [logo]="(logoRD$ | async)?.payload" [alternateText]="communityPayload.descriptionThumbnail"> | ||
| </ds-comcol-page-logo> | ||
| } | ||
| <!-- Community logo with simple description --> | ||
| @if (logoRD$ && !communityPayload.descriptionThumbnail) { |
| * Corresponds to the metadata field dspace.thumbnail.description | ||
| */ | ||
| get descriptionThumbnail(): string { | ||
| return this.firstMetadataValue('dspace.thumbnail.description'); |
3 participants
Allow input of alternative text for collection and community logos/thumbnails
References
Fixes #1306
Requires DSpace/DSpace#9875
This change was addressed in #1306, which now allows detailed description of thumbnail images of items, collections, and community logos (also recognized by screen readers).
Description
First, logic was created using OnInit in the thumbnail component to bring the thumbnail description value into the "alt" text contained in the image tag in the HTML. Fields were then created for insertion in the creation and editing of communities and collections that allowed the insertion of details about the logos involved and finally the creation of translation keys for these fields.
Instructions for reviewers
Firstly, you need to use the backend of this PR DSpace/DSpace#9875.
List of changes in this PR:
*In the html of the components of the community page and the collection page, conditionals were inserted and check if there is a custom description and insert the variable with the description in the alternative text.
Include guidance on how to test or review your PR.
To test, simply create a collection and community that contains a logo. In the “Thumbnail description” field, fill in the data for this logo and finally inspect the logo or use a screen reader on the logo to validate the description entered. Now as for the items, just insert a bitstream and create the thumb by running filter-media in the backend. After that, go to item editing and go to the bitstream tab and edit the thumbnail description and then go to the item and hover your screen reader over the image or inspect it to see if the description matches what you entered.