From 17f6f4d7914424796b2ae99c1718f1bb0c7688ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mewen=20Le=20H=C3=B4?=
 <92363071+MewenLeHo@users.noreply.github.com>
Date: Fri, 28 Jul 2023 13:51:17 +0200
Subject: [PATCH] feat(forms): add a visual cue to form elements on error when
 focused for a11y (#2090)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 .bundlewatch.config.json           |  2 +-
 scss/_reboot.scss                  | 10 ++++++----
 scss/mixins/_forms.scss            | 14 ++++++++++++++
 site/content/docs/5.3/migration.md |  6 +++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 08407ba18a..e73322106a 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "4.25 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index c194f8ab2d..936dd905a1 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -88,21 +88,23 @@ body {
 // 1. Default focus state
 // 2. Using the :focus-visible polyfill to hide outline defensively
 //    See https://github.com/WICG/focus-visible
-//    Note: this rule is not applied for our focus ring helper which
+//    Note 1: this rule is not applied for our focus ring helper which
 //    handles itself outline and box shadow
+//    Note 2: this rule is also not applied for invalid select and invalid input files to ensure
+//    sufficient contrast between select elements on error focused vs. non focused
 // 3. Using the :focus-visible pseudo-class if supported by the browser
 // scss-docs-start focus-visibility
 :focus {
   @include focus-visible(); // 1
 }
 
-.js-focus-visible :focus:not([data-focus-visible-added]):not(.focus-ring),
-.js-focus-visible .focus:not([data-focus-visible-added]):not(.focus-ring) { // 2
+.js-focus-visible :focus:not([data-focus-visible-added]):not(.focus-ring):not(.form-select:invalid):not(.form-control[type="file"]:invalid),
+.js-focus-visible .focus:not([data-focus-visible-added]):not(.focus-ring):not(.form-select:invalid):not(.form-control[type="file"]:invalid) { // 2
   outline: 0 !important;
   box-shadow: none;
 }
 
-:focus:not(:focus-visible):not(.focus-ring) { // 3
+:focus:not(:focus-visible):not(.focus-ring):not(.form-select:invalid):not(.form-control[type="file"]:invalid) { // 3
   outline: 0 !important;
   box-shadow: none;
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 4113e10853..65a4a85b49 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -95,6 +95,13 @@
         // Boosted mod: no box-shadow
 
         // Boosted mod: focus styles don't match validation state
+
+        // Boosted mod: apply focus mixin to allow sufficient contrast between error field focused and non focused
+        &:focus {
+          @include focus-visible();
+          border-color: $border-color !important; // stylelint-disable-line declaration-no-important
+        }
+        // End mod
       }
     }
 
@@ -123,6 +130,13 @@
         // Boosted mod: no box-shadow
 
         // Boosted mod: focus styles don't match validation state
+
+        // Boosted mod: apply focus mixin to allow sufficient contrast between error field focused and non focused
+        &:focus {
+          @include focus-visible();
+          border-color: $border-color !important; // stylelint-disable-line declaration-no-important
+        }
+        // End mod
       }
     }
 
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 0f57476d6e..159112cda8 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -22,6 +22,10 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 - **Orange navbar**
   - <span class="badge bg-warning">Warning</span> The minimizing behavior with `.header-minimized` is applied to the `<header>` instead of one of its children directly.
 
+### Forms
+
+- <span class="badge bg-success">New</span> In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any.
+
 ## v5.3.1
 
 <hr class="mb-4">
@@ -1025,7 +1029,7 @@ If you need more details about the changes, please refer to the [v5.2.1 release]
     {{< /markdown >}}
   </details>
 
-- The close icon SVG rendering has changed in modals, offcanvases and close buttons. Although is has no direct impact, you might want apply this same modification within your websites.
+- The close icon SVG rendering has changed in modals, offcanvases and close buttons. Although is has no direct impact, you might want to apply this same modification within your websites.
 
 ### Helpers and utilities