Fix thumbnail a11y issues

[ybnd]

References

• Fixes [Deque Analysis] "No Thumbnail" SVG inline image has insufficient color contrast #1162
• Fixes [Deque Analysis] Thumbnail images must have alt text #1169
• Fixes Item thumbnails exist but do not load on initial route #1046

Description

Added alt text to thumbnails and replaced the placeholder image with an HTML placeholder with improved contrast.

Grid element thumbnails are now handled by ds-thumbnail as well.

While working on this, we found a bug where thumbnails would not load in on a direct URL request of e.g. an Item page.
An additional issue came up with ds-metadata-field-wrapper hiding images in some cases.
Both of these were fixed.

Instructions for Reviewers

Look up some Items with/without thumbnails and check whether

• Thumbnails show up
• Alt text shows up
• Placeholders show up, and have high enough contrast. Their text should change ~ the type of the Item (OrgUnit, Project, Person)

List of changes in this PR:

• Added an alt input to ds-thumbnail to specify alt text (i18n key, defaults to "Thumbnail Image")
• Placeholder thumbnails are now HTML. Their text can be set with the placeholder input (i18n key, defaults to "No thumbnail avalable")
• Replaced ds-grid-thumbnail with ds-thumbnail
• Updated ds-metadata-field-wrapper logic: doesn't show images by default anymore

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes TSLint validation using yarn run lint
• My PR doesn't introduce circular dependencies
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new, third-party dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

[lgtm-com]

This pull request introduces 3 alerts when merging 4b238e1 into f85a5e6 - view on LGTM.com

new alerts:

• 3 for Unused variable, import, function or class

[artlowel]

While working on this, we found a bug where thumbnails would not load in on a direct URL request of e.g. an Item page.

It turns out that bug was already reported as #1046. I added it to the "References" section of the description

[tdonohue]

👍 Looks good @ybnd ! I've tested this using Deque's Axe browser tool, and it does resolve the previously reported accessibility issues. Ran the same tests across entities and Items, with and without thumbnails, and it all looks good.

The only thing I came across is unrelated to this UI PR (thumbnail size is too small by default), so I fixed it in a backend PR here: DSpace/DSpace#3297

[tdonohue]

As discussed in today's meeting, merging this with one approval. Thanks again @ybnd !