DSpace#1306 - Allow entry of alt-text for collection and community lo…

[DanGastardelli]

Allow input of alternative text for collection and community logos/thumbnails

References

Fixes #1306
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#9550.

List of changes in this PR:

• Creation of logic in the thumbnail component to extract the thumbnail description of the item (using the onInit function and using variables created to obtain the thumbnail description through the thumbnail object);
• Make conditionals in the html to check if there is a custom description and pass it in the alt of the thumbnail;
• A field was created in the community form and collection form using the "dspace.thumbnail.description" metadata to accept descriptions;
• Functions have been created in the collection model and community model that provide thumbnail descriptions of collections and communities;
  *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.
• Created appropriate translation keys "community.form.thumbnail" and "collection.form.thumbnail" for the field created for communities and collections (translations done in English, Portuguese and Spanish)

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 .

[tdonohue]

@DanGastardelli : Please rebase this on main as all PRs should be against main (and not the temporary dspace-8.0-testathon branch, which was only used for Testathon).

[DanGastardelli]

@tdonohue sorry for the inconvenience, but it seems that you had already changed this PR to main correct? I've solved the merge problem.

Looking forward to your feedback!

[tdonohue]

@DanGastardelli : Correct, I switched it to main, but it needed some cleanup/fixes to align with the latest main code. Currently, for example it's showing 6 commits (some of which are from others) because your branch isn't updated to the latest main code. Those extra commits should go away if you rebase on main via something like this:

git checkout main
git pull
git checkout [your-branch]
git rebase main
(Then resolve any conflicts if any)

This PR currently also has lint errors which you can see by running yarn lint locally. They might be possible to fix automatically by running yarn lint --fix

[DanGastardelli]

@tdonohue, I understand, once again I apologize for the inconvenience. This will be adjusted. Thank you very much for the explanation.