Allow input of alternative text for collection and community logos/th…

[DanGastardelli]

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:

• 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.

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[github-actions]

Hi @DanGastardelli,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!