From 88c7d46282f9aa0caa581553d9eb7a22429bf3d2 Mon Sep 17 00:00:00 2001
From: Wicked <jason_attwood@hotmail.co.uk>
Date: Thu, 13 Jan 2022 06:46:35 +0000
Subject: [PATCH] Improve the visibility of field error messages, in Windows
high-contrast mode and out (#7663) Fix #7241
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
CHANGELOG.txt | 1 +
CONTRIBUTORS.rst | 1 +
client/scss/components/_forms.scss | 15 ++++++++++++++-
client/scss/settings/_variables.scss | 4 ++++
docs/releases/2.16.md | 1 +
5 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 75957e2084..c83b10b677 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -19,6 +19,7 @@ Changelog
* Improve CircleCI frontend & backend build caches (Thibaud Colas)
* Add a 'remember me' checkbox to the admin sign in form, if unticked (default) the auth session will expire if the browser is closed (Michael Karamuth, Jake Howard)
* When returning to image or document listing views after editing, filters (collection or tag) are now remembered (Tidjani Dia)
+ * Improve the visibility of field error messages, in Windows high-contrast mode and out (Jason Attwood)
* Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
* Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
* Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)
diff --git a/CONTRIBUTORS.rst b/CONTRIBUTORS.rst
index 0092ec4389..5e0a0f6509 100644
--- a/CONTRIBUTORS.rst
+++ b/CONTRIBUTORS.rst
@@ -557,6 +557,7 @@ Contributors
* Michael Karamuth
* Vu Pham
* Khanh Hoang
+* Jason Attwood
Translators
===========
diff --git a/client/scss/components/_forms.scss b/client/scss/components/_forms.scss
index ef387675cf..2d86f2c8a9 100644
--- a/client/scss/components/_forms.scss
+++ b/client/scss/components/_forms.scss
@@ -123,7 +123,20 @@ select::-ms-expand {
}
.error-message {
- color: $color-red;
+ font-size: 1em;
+ font-weight: bold;
+ color: $color-text-error;
+
+ @media (forced-colors: $media-forced-colours) {
+ forced-color-adjust: none;
+ color: $color-text-error-forced-color;
+ }
+
+ &::before {
+ font-family: wagtail;
+ vertical-align: -10%;
+ content: map-get($icons, 'cross');
+ }
}
.help {
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index e9405b26fb..6f63cc7d19 100644
--- a/client/scss/settings/_variables.scss
+++ b/client/scss/settings/_variables.scss
@@ -142,3 +142,7 @@ $nav-search-bg: $nav-grey-1;
$nav-search-hover-bg: $nav-item-hover-bg;
$nav-search-focus-color: $color-white;
$nav-search-focus-bg: $nav-item-hover-bg;
+
+// Form Errors
+$color-text-error: change-color($color-red, $saturation: 69, $lightness: 52);
+$color-text-error-forced-color: change-color($color-red, $saturation: 100, $lightness: 50);
diff --git a/docs/releases/2.16.md b/docs/releases/2.16.md
index a8cc68bf4a..37ee61fdd9 100644
--- a/docs/releases/2.16.md
+++ b/docs/releases/2.16.md
@@ -26,6 +26,7 @@
* Improve CircleCI frontend & backend build caches (Thibaud Colas)
* Add a 'remember me' checkbox to the admin sign in form, if unticked (default) the auth session will expire if the browser is closed (Michael Karamuth, Jake Howard)
* When returning to image or document listing views after editing, filters (collection or tag) are now remembered (Tidjani Dia)
+ * Improve the visibility of field error messages, in Windows high-contrast mode and out (Jason Attwood)
### Bug fixes