Skip to content

TMS-1174: Change icon colors to improve accessibility #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eebbi merged 3 commits into from
Aug 11, 2025
Merged

TMS-1174: Change icon colors to improve accessibility #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
804cdaf
TMS-1174: Change icon colors to improve accessibility
eebbi Jul 30, 2025
5bc13f1
TMS-1174: Change arrow-icon colors from links
eebbi Jul 30, 2025
80edaf8
Merge branch 'master' into TMS-1174
eebbi Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.MD
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

- TMS-1174: Change icon colors to improve accessibility
- TMS-1176: Add homepage-selection for some-linklist fields

## [1.9.6] - 2025-05-14
Expand Down
4 changes: 2 additions & 2 deletions assets/styles/blocks/custom/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
color: $color-black !important;

.icon {
fill: $color-white !important;
fill: $color-black !important;
}
}
}
Expand All @@ -82,7 +82,7 @@
color: $white !important;

.icon {
fill: $color-semidark-blue !important;
fill: $white !important;
Copy link

@gemini-code-assist gemini-code-assist bot Aug 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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;

}
}
}
Expand Down
6 changes: 3 additions & 3 deletions assets/styles/helpers/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,13 @@ $button-transition-speed: $speed !default;
border-color: $color-blue !important;

.icon {
fill: $color-blue !important;
fill: $white !important;
}
}
}

.icon {
fill: $color-semidark-blue;
fill: $color-white;
Copy link

@gemini-code-assist gemini-code-assist bot Aug 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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;

}
}

Expand All @@ -118,7 +118,7 @@ $button-transition-speed: $speed !default;
}

.icon {
fill: $white;
fill: $primary;
}
}

Expand Down
2 changes: 1 addition & 1 deletion partials/blocks/block-image-banner.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</h2>
{/title}

{>"ui/button-link" classes="is-secondary" icon="arrow-right" icon_classes="icon--medium is-primary-invert" /}
{>"ui/button-link" classes="is-secondary" icon="arrow-right" icon_classes="icon--medium" /}
</div>

{>"shared/layout-after-main-content" /}
Expand Down
2 changes: 1 addition & 1 deletion partials/blocks/block-link-list.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<li class="mb-2">
<a href="{link.url|url}" target="{link.target|attr}"
class="is-flex is-align-items-center has-text-primary-invert">
{>"ui/icon" icon="arrow-right" class="icon--small is-secondary mr-2" /}
{>"ui/icon" icon="arrow-right" class="icon--small mr-2" /}

<span>{link.title|html}</span>

Expand Down
30 changes: 15 additions & 15 deletions partials/layouts/layout-hero.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<section {?anchor}id="{anchor|s}"{/anchor}
class="hero hero__layout is-relative has-background-cover {container_class|s}"
<section {?anchor}id="{anchor|attr}"{/anchor}
class="hero hero__layout is-relative has-background-cover {container_class|attr}"
{@inlinebg id=image size="fullhd" /}>
<div class="hero__inner">
<div class="container p-3">
Expand All @@ -10,34 +10,34 @@
<div class="overlay overlay--primary-30"></div>
{?title}
<h1 class="mt-0 h1 no-hyphens has-text-white is-relative">
{title|s}
{title|html}
</h1>
{/title}
<div class="is-relative">
{description|s}
{description|kses}
</div>
<div class="is-relative">
<form role="search" method="get" class="search-form " action="{form_action|s}">
<form role="search" method="get" class="search-form " action="{form_action|attr}">
<label for="hero-search" class="mb-0 is-flex-grow-1">
<span aria-hidden="true"
class="is-hidden-desktop has-text-white">{Strings.s.program.search.write_term_profession_program_name|s}
class="is-hidden-desktop has-text-white">{Strings.s.program.search.write_term_profession_program_name|html}
:</span>
<span class="is-sr-only">
{Strings.s.program.search.write_term_profession_program_name|s}.
{Strings.s.program.search.sr_autocomplete_instructions|s}
{Strings.s.program.search.write_term_profession_program_name|html}.
{Strings.s.program.search.sr_autocomplete_instructions|html}
</span>
</label>
<div class="is-flex is-align-items-stretch">
<input type="search"
class="search-form__input program-search has-background-light has-width-100 is-family-primary has-text-weight-semibold"
placeholder="{Strings.s.program.search.write_term_profession_program_name|s}"
value="{search_query|s}"
placeholder="{Strings.s.program.search.write_term_profession_program_name|attr}"
value="{search_query|attr}"
name="program-search"
autocomplete="off"
id="hero-search">
<button type="submit"
class="search-form__button button button--icon is-secondary is-family-secondary">
{Strings.s.header.search|s}
{Strings.s.header.search|html}
{>"ui/icon" icon="search" class="icon icon--medium is-white" /}
</button>
</div>
Expand All @@ -51,11 +51,11 @@
<div class="column is-9-widescreen is-11-desktop is-12">
{#rows}
{?link.title}{?link.url}
<a href="{link.url|s}"
target="{link.target|s}"
<a href="{link.url|url}"
target="{link.target|attr}"
class="pill is-block is-primary is-flex is-justify-content-space-between is-align-items-center has-border-radius-small has-text-left mb-4 mt-0-desktop mt-4 p-5">
{link.title|s}
{>"ui/icon" icon="arrow-right" class="icon is-secondary ml-4" /}
{link.title|html}
{>"ui/icon" icon="arrow-right" class="icon ml-4" /}
</a>
{/link.url}{/link.title}
{/rows}
Expand Down
2 changes: 1 addition & 1 deletion partials/shared/footer-back-to-top.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
{Strings.s.footer.back_to_top|s}
</span>

{>"ui/icon" icon="arrow-down" class="icon--medium is-primary-invert has-rotate-180" /}
{>"ui/icon" icon="arrow-down" class="icon--medium has-rotate-180" /}
</button>
4 changes: 2 additions & 2 deletions partials/shared/header-notice.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@

<div class="site-header-notice__button-wrapper mt-4 mt-0-tablet ml-5-tablet mr-4-tablet mr-0-desktop is-flex is-flex-wrap-wrap">
{#Header.exception_notice.cta_btn}
{>"ui/button-link" link=. classes="is-secondary mt-2 mb-2 mr-4" icon="chevron-right" icon_classes="is-primary-invert icon-large" /}
{>"ui/button-link" link=. classes="is-secondary mt-2 mb-2 mr-4" icon="chevron-right" icon_classes="icon-large" /}
{/Header.exception_notice.cta_btn}
<button class="button is-secondary button--icon site-header-notice__close mt-2 mb-2">
{Strings.s.header.exception_close_button|s}
{>"ui/icon" icon="close" class="ml-2 is-primary-invert icon--large" /}
{>"ui/icon" icon="close" class="ml-2 icon--large" /}
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion partials/ui/link.dust
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<a href="{link.url}" target="{link.target}" class="{classes|s}">
{link.title|s}
{?use_icon}
{>"ui/icon" class="icon--medium is-secondary ml-2" /}
{>"ui/icon" class="icon--medium ml-2" /}
{/use_icon}
</a>
{/link.title}
Expand Down
Loading