Improving the color contrast of home news content

[Andrea-Guevara]

References

• Fixes [Accessibility] Solve front page text and color contrast issues #3810
• Fixes [Deque Analysis] On homepage of "dspace" theme, text over image has insufficient color contrast #1157

Description

Improved color contrast of home news content.

Instructions for Reviewers

List of changes in this PR:

• In the “home-news.component” component, the font weight has been increased,
• In the style file “_theme_css_variable_overrides.scss” the banner has been darkened a little.

Use an accessibility tool to see if the home news content is more accessible.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• 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 ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• 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.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[hostle83]

👍 Tested this and it looks good, thank you @Andrea-Guevara!

[tdonohue]

@Andrea-Guevara : Tested & reviewed this today. Overall, this works and looks good to me. However, there's a small code change that I'd recommend (see below). It's minor, but it avoids our SCSS files overwriting each other with different colors.

Once that change is made, I think this is ready to be merged.

[Andrea-Guevara]

Good morning @tdonohue, glad you noticed!
I tried to change the colors in the file “_bootstrap_variables.scss” but looking a little deeper I realized that the variable “$ds-home-news-link-color” is overwritten in the file “_theme_sass_variable_overrides.scss” of the dspace theme, so I modified it directly there!

Anything, we're at your disposal.

[tdonohue]

👍 Thanks @Andrea-Guevara ! This now looks good to me.

[dspace-bot]

Successfully created backport PR for dspace-7_x:

• [Port dspace-7_x] Improving the color contrast of home news content #3890

[dspace-bot]

Successfully created backport PR for dspace-8_x:

• [Port dspace-8_x] Improving the color contrast of home news content #3891