From 2d8aa123c0c5be506c26f9bac95be8619a2cc997 Mon Sep 17 00:00:00 2001
From: anujaraj <52713215+anujaraj@users.noreply.github.com>
Date: Thu, 4 Aug 2022 22:25:00 +0530
Subject: [PATCH] Added a forced-color media query to disabled buttons in high
contrast (#8909)
* added a forced-color media query to allow distinct visibiity of disabled buttons
* Also set disabled button border color to GrayText in forced-colors mode
The `button` element was not correctly picking up the same border color as the text, for some reason. This commit fixes that.
---
CHANGELOG.txt | 1 +
client/scss/components/_button.scss | 5 +++++
docs/releases/4.0.md | 1 +
3 files changed, 7 insertions(+)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index a75b1d528f..ee0c1a2c26 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -124,6 +124,7 @@ Changelog
* Fix: Resolve accessibility and styling issues with the expanding status panel (Sage Abdullah)
* Fix: Avoid 503 `AttributeError` when an empty search param `q=` is combined with other filters in the Images index view (Paritosh Kabra)
* Fix: Fix error with string representation of FormSubmission not returning a string (LB (Ben) Johnston)
+ * Fix: Ensure disabled buttons are distinguishable from active buttons in forced colors mode (Anuja Verma)
3.0.1 (16.06.2022)
diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index bc7d929166..7c431d796a 100644
--- a/client/scss/components/_button.scss
+++ b/client/scss/components/_button.scss
@@ -279,6 +279,11 @@
border-color: $color-grey-3;
color: $color-grey-2;
cursor: default;
+ @media (forced-colors: active) {
+ color: GrayText;
+ border-color: GrayText;
+ border-style: dashed;
+ }
}
&.button-secondary:disabled,
diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
index 15e2a3b944..ba9eebbcb5 100644
--- a/docs/releases/4.0.md
+++ b/docs/releases/4.0.md
@@ -55,6 +55,7 @@ In Wagtail 2.16, we introduced support for Windows High Contrast mode (WHCM). Th
* Make checkboxes visible in forced colors mode
* Display the correct color for icons in forced colors mode
* Add a border around modal dialogs so they can be identified in forced colors mode
+* Ensure disabled buttons are distinguishable from active buttons in forced colors mode
### Other features