From 9044a20cadec195f73b7b0fb382615bad5cd4b8b Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Thu, 22 Feb 2024 12:08:48 +0100
Subject: [PATCH] Issue #3097907 by dww, camilledavis, Abhijith S, komalk,
 athyamvidyasagar, rudolfbyker, kostyashupenko, guilhermevp, shaal,
 andrewmacpherson, tanubansal, krishnarp, paulocs, ckrina, saschaeggi,
 mgifford, rkoller, mherchel: Active toolbar tray has weak affordance and
 fails WCAG color criteria

(cherry picked from commit 4e26ae9cc3da8b8a90561716c4a53fdd6c07f8f6)
---
 core/modules/toolbar/css/toolbar.icons.theme.css              | 4 ++++
 core/modules/toolbar/css/toolbar.icons.theme.pcss.css         | 3 +++
 core/modules/toolbar/css/toolbar.theme.css                    | 4 +++-
 .../toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js      | 2 +-
 core/themes/claro/css/theme/toolbar.icons.theme.css           | 4 ++++
 core/themes/claro/css/theme/toolbar.icons.theme.pcss.css      | 4 ++++
 core/themes/claro/css/theme/toolbar.theme.css                 | 4 +++-
 core/themes/claro/css/theme/toolbar.theme.pcss.css            | 4 +++-
 8 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/core/modules/toolbar/css/toolbar.icons.theme.css b/core/modules/toolbar/css/toolbar.icons.theme.css
index cb052a64ae3..569ce3bb104 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.css
@@ -87,6 +87,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/modules/toolbar/css/toolbar.icons.theme.pcss.css b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
index 98c6d92ee55..582e2898e01 100644
--- a/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
+++ b/core/modules/toolbar/css/toolbar.icons.theme.pcss.css
@@ -67,6 +67,9 @@
   padding-right: 2.75em;
   padding-left: 4em;
 }
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
 
 /**
  * Top level icons.
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index b0c8ada3892..ea108f65809 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -47,7 +47,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 
 /**
diff --git a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
index 8e10c135a01..95ff877edf0 100644
--- a/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
+++ b/core/modules/toolbar/tests/src/Nightwatch/Tests/toolbarApiTest.js
@@ -81,7 +81,7 @@ module.exports = {
         toReturn.toolbarModelOffsetsRight =
           models.toolbarModel.get('offsets').right === 0;
         toReturn.toolbarModelOffsetsTop =
-          models.toolbarModel.get('offsets').top === 79;
+          models.toolbarModel.get('offsets').top === 80;
         toReturn.toolbarModelSubtrees =
           models.menuModel.get('subtrees') === null;
         return toReturn;
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.css b/core/themes/claro/css/theme/toolbar.icons.theme.css
index ac70bec6106..872f651dff1 100644
--- a/core/themes/claro/css/theme/toolbar.icons.theme.css
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.css
@@ -90,6 +90,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
index b7439a20456..b98c87aa98c 100644
--- a/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
@@ -71,6 +71,10 @@
   padding-left: 4em;
 }
 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon.is-active::before {
+  filter: invert(100%);
+}
+
 /**
  * Top level icons.
  */
diff --git a/core/themes/claro/css/theme/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.css
index bd9da734d65..9285456847b 100644
--- a/core/themes/claro/css/theme/toolbar.theme.css
+++ b/core/themes/claro/css/theme/toolbar.theme.css
@@ -57,7 +57,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 /**
  * Toolbar tray.
diff --git a/core/themes/claro/css/theme/toolbar.theme.pcss.css b/core/themes/claro/css/theme/toolbar.theme.pcss.css
index 7f1e21764f3..c732bdb270c 100644
--- a/core/themes/claro/css/theme/toolbar.theme.pcss.css
+++ b/core/themes/claro/css/theme/toolbar.theme.pcss.css
@@ -50,7 +50,9 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
+  color: #000;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
 }
 
 /**