Merge pull request #199 from devgeniem/TMS-1174

eebbi · web-flow · commit b8a79f9f68f9 · 2025-08-11T12:52:36.000+03:00
TMS-1174: Change icon colors to improve accessibility
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -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
diff --git a/assets/styles/blocks/custom/_grid.scss b/assets/styles/blocks/custom/_grid.scss
@@ -69,7 +69,7 @@
                 color: $color-black !important;
 
                 .icon {
-                    fill: $color-white !important;
+                    fill: $color-black !important;
                 }
             }
         }
@@ -82,7 +82,7 @@
                 color: $white !important;
 
                 .icon {
-                    fill: $color-semidark-blue !important;
+                    fill: $white !important;
                 }
             }
         }
diff --git a/assets/styles/helpers/_button.scss b/assets/styles/helpers/_button.scss
@@ -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;
         }
     }
 
@@ -118,7 +118,7 @@ $button-transition-speed: $speed !default;
         }
 
         .icon {
-            fill: $white;
+            fill: $primary;
         }
     }
 
diff --git a/partials/blocks/block-image-banner.dust b/partials/blocks/block-image-banner.dust
@@ -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" /}
diff --git a/partials/blocks/block-link-list.dust b/partials/blocks/block-link-list.dust
@@ -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>
 
diff --git a/partials/layouts/layout-hero.dust b/partials/layouts/layout-hero.dust
@@ -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">
@@ -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>
@@ -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}
diff --git a/partials/shared/footer-back-to-top.dust b/partials/shared/footer-back-to-top.dust
@@ -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>
diff --git a/partials/shared/header-notice.dust b/partials/shared/header-notice.dust
@@ -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>
diff --git a/partials/ui/link.dust b/partials/ui/link.dust
@@ -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}

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`	`color: $color-black !important;`
`70`	`70`
`71`	`71`	`.icon {`
`72`		`- fill: $color-white !important;`
	`72`	`+ fill: $color-black !important;`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`	`}`
`@@ -82,7 +82,7 @@`
`82`	`82`	`color: $white !important;`
`83`	`83`
`84`	`84`	`.icon {`
`85`		`- fill: $color-semidark-blue !important;`
	`85`	`+ fill: $white !important;`
`86`	`86`	`}`
`87`	`87`	`}`
`88`	`88`	`}`
Original file line number	Diff line number	Diff line change
`@@ -95,13 +95,13 @@ $button-transition-speed: $speed !default;`
`95`	`95`	`border-color: $color-blue !important;`
`96`	`96`
`97`	`97`	`.icon {`
`98`		`- fill: $color-blue !important;`
	`98`	`+ fill: $white !important;`
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`.icon {`
`104`		`- fill: $color-semidark-blue;`
	`104`	`+ fill: $color-white;`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`
`@@ -118,7 +118,7 @@ $button-transition-speed: $speed !default;`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`.icon {`
`121`		`- fill: $white;`
	`121`	`+ fill: $primary;`
`122`	`122`	`}`
`123`	`123`	`}`
`124`	`124`