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 cb052a64ae36..569ce3bb1044 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 98c6d92ee552..582e2898e010 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 b0c8ada38920..ea108f658098 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 8e10c135a011..95ff877edf02 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 ac70bec61064..872f651dff17 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 b7439a20456e..b98c87aa98c6 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 bd9da734d653..9285456847b9 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 7f1e21764f3a..c732bdb270c3 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;
}
/**
--
GitLab