From 997ac738b0bd04db0e737a11fa6304586865eab5 Mon Sep 17 00:00:00 2001
From: Desaiakshata <51041290+Desaiakshata@users.noreply.github.com>
Date: Mon, 27 Sep 2021 22:31:08 -0700
Subject: [PATCH] dropdown - improve focus and high contrast mode visibility

- Update _dropdown.legacy.scss
- improvement to existing styles for dropdown/up button on focus and windows high contrast mode
- see #7366
---
 CHANGELOG.txt                                |  2 +-
 client/scss/components/_dropdown.legacy.scss | 24 ++++++++++++++++++++
 docs/releases/2.15.rst                       |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 7d3feb1eda..17ba91fd09 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -33,7 +33,7 @@ Changelog
  * Fix: Remove redundant 'clear' button from site root page chooser (Matt Westcott)
  * Fix: Make ModelAdmin IndexView keyboard-navigable (Saptak Sengupta)
  * Fix: Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
- * Fix: Multiple accessibility fixes for Windows high contrast mode; Admin fields, Icon visibility, Page Editor field panels, sidebar menu, sidebar hamburger icon (Dmitrii Faiazov, Chakita Muttaraju, Onkar Apte, Desai Akshata, LB (Ben Johnston), Amy Chan, Dan Braghis)
+ * Fix: Multiple accessibility fixes for Windows high contrast mode; Admin fields, Dropdown button, Icon visibility, Page Editor field panels, sidebar menu, sidebar hamburger icon (Dmitrii Faiazov, Chakita Muttaraju, Onkar Apte, Desai Akshata, LB (Ben Johnston), Amy Chan, Dan Braghis, Desai Akshata)
  * Fix: Menu sidebar hamburger icon on smaller viewports now correctly indicates it is a button to screen readers and can be accessed via keyboard (Amy Chan, Dan Braghis)
  * Fix: `blocks.MultipleChoiceBlock`, `forms.CheckboxSelectMultiple` and `ArrayField` checkboxes will now stack instead of display inline to align with all other checkboxes fields (Seb Brown)
  * Fix: Screen readers can now access login screen field labels (Amy Chan)
diff --git a/client/scss/components/_dropdown.legacy.scss b/client/scss/components/_dropdown.legacy.scss
index f163f39805..8e39ab25db 100644
--- a/client/scss/components/_dropdown.legacy.scss
+++ b/client/scss/components/_dropdown.legacy.scss
@@ -43,6 +43,30 @@
             border-style: solid;
             border-width: 1px 0 0;
             overflow: hidden;
+
+            a:focus,
+            button:focus {
+                border: 3px solid $color-focus-outline;
+            }
+        }
+
+        // Media for Windows High Contrast
+        @media (forced-colors: $media-forced-colours) {
+            li a,
+            li button {
+                forced-color-adjust: none;
+                background-color: $color-black;
+                border-color: $color-white;
+                color: $color-white;
+            }
+
+            li a:focus,
+            li button:focus {
+                background-color: $color-black;
+                forced-color-adjust: none;
+                border: 4px solid #0ff;
+                color: $color-white;
+            }
         }
 
         a {
diff --git a/docs/releases/2.15.rst b/docs/releases/2.15.rst
index befe7eb46d..d7c950e54f 100644
--- a/docs/releases/2.15.rst
+++ b/docs/releases/2.15.rst
@@ -48,7 +48,7 @@ Bug fixes
  * Remove redundant 'clear' button from site root page chooser (Matt Westcott)
  * Make ModelAdmin IndexView keyboard-navigable (Saptak Sengupta)
  * Prevent error on refreshing page previews when multiple preview tabs are open (Alex Tomkins)
- * Multiple accessibility fixes for Windows high contrast mode; Admin fields, Icon visibility, Page Editor field panels, sidebar menu, sidebar hamburger icon (Dmitrii Faiazov, Chakita Muttaraju, Onkar Apte, Desai Akshata, LB (Ben Johnston), Amy Chan, Dan Braghis)
+ * Multiple accessibility fixes for Windows high contrast mode; Admin fields, Dropdown button, Icon visibility, Page Editor field panels, sidebar menu, sidebar hamburger icon (Dmitrii Faiazov, Chakita Muttaraju, Onkar Apte, Desai Akshata, LB (Ben Johnston), Amy Chan, Dan Braghis)
  * Menu sidebar hamburger icon on smaller viewports now correctly indicates it is a button to screen readers and can be accessed via keyboard (Amy Chan, Dan Braghis)
  * ``blocks.MultipleChoiceBlock``, ``forms.CheckboxSelectMultiple`` and ``ArrayField`` checkboxes will now stack instead of display inline to align with all other checkboxes fields (Seb Brown)
  * Screen readers can now access login screen field labels (Amy Chan)