TMS-1174: Change icon colors to improve accessibility

[eebbi]

Severa-ID: 2132
Severa-kuvaus: TMS-1174 Saavutettavuus: Tredun nuoli-ikonit
Task: https://hiondigital.atlassian.net/browse/TMS-1174

Description

Change arrow icon colors to same as text color to improve accessibility

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[gemini-code-assist]

Summary of Changes

Hello @eebbi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

I've implemented changes to enhance the accessibility of the application's user interface. The primary goal was to improve the visibility and contrast of various icons, particularly arrow icons, by ensuring their colors dynamically match the surrounding text. This involved updating CSS styles to modify icon fill properties and refining Dust templates to remove hardcoded color classes, allowing icons to inherit colors more effectively. Additionally, I've improved data filtering in some templates for better security and rendering consistency. This is considered a breaking change as it alters existing visual behavior.

Highlights

• Improved Icon Accessibility: I've updated the styling of various icons across the application to improve accessibility. Specifically, arrow icons and other UI icons will now inherit the text color of their parent elements, rather than having hardcoded fill colors. This ensures better contrast and readability for users.
• CSS Style Adjustments: I've made targeted changes in _grid.scss and _button.scss to modify the fill properties of icons. This involves changing specific color values (e.g., from white to black, semidark-blue to white, blue to white, and white to primary) to ensure icons visually align with the new accessibility requirements.
• Dust Template Class Refinements: I've removed explicit color-related classes like is-primary-invert and is-secondary from icon definitions within several Dust templates, including block-image-banner.dust, block-link-list.dust, footer-back-to-top.dust, header-notice.dust, and link.dust. This change allows the icons to naturally adopt the text color, simplifying maintenance and improving consistency.
• Enhanced Data Filtering in Dust Templates: In layout-hero.dust, I've updated the data filtering for various attributes and content. Filters like |s have been replaced with more appropriate and secure options such as |attr, |html, |kses, and |url. This enhances security by ensuring proper escaping for different contexts.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to improve accessibility by making icon colors match their corresponding text colors. The changes in SCSS files and Dust templates correctly implement this. I've suggested a few improvements to use currentColor for setting the icon's fill property, which makes the styling more robust and maintainable by directly linking the icon color to the text color. The pull request also includes security improvements by adding proper context-aware escaping in one of the templates, which is a welcome addition.

[gemini-code-assist]

For better maintainability, consider using currentColor here as well. It makes the relationship between the text color and icon color explicit and easier to manage in the future.

Suggested change

	fill: $white !important;
	fill: currentColor !important;

[gemini-code-assist]

To make the code more maintainable, I suggest using currentColor here. This will ensure the icon's color stays in sync with the button's text color automatically.

            fill: currentColor;