From 2fcf41dcee524f18c2153a82a5eda5112e588d79 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Mon, 8 Nov 2021 21:43:17 +0800
Subject: [PATCH] MDL-73026 theme: Override Bootstrap modal styles for close
 button

* Adjust the margins to accommodate the button outline so that it
doesn't look clipped.
* Inherit the opacity when the button receives focus to improve the
focus outline's contrast.
---
 theme/boost/scss/moodle/modal.scss | 13 +++++++++++++
 theme/boost/style/moodle.css       |  5 +++++
 theme/classic/style/moodle.css     |  5 +++++
 3 files changed, 23 insertions(+)

diff --git a/theme/boost/scss/moodle/modal.scss b/theme/boost/scss/moodle/modal.scss
index b3802e2b803..23ebb8db601 100644
--- a/theme/boost/scss/moodle/modal.scss
+++ b/theme/boost/scss/moodle/modal.scss
@@ -15,4 +15,17 @@
             }
         }
     }
+
+    // Override Bootstrap .close for better accessibility.
+    .close {
+        // Adjust the margins so the focus outline does not look clipped.
+        margin: -0.8rem -0.8rem -0.8rem auto;
+
+        // Inherit the opacity when focus is received for better focus outline contrast.
+        &:not(:disabled):not(.disabled) {
+            @include hover-focus() {
+                opacity: inherit;
+            }
+        }
+    }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index dc74d32b7f6..172d6fafb5c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -19948,6 +19948,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     left: 50%;
     transform: translate(-50%, -50%); }
 
+.modal .close {
+  margin: -0.8rem -0.8rem -0.8rem auto; }
+  .modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+    opacity: inherit; }
+
 .layout.fullscreen {
   height: 100vh;
   position: fixed;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 11474d12222..ca294fe0860 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -19894,6 +19894,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     left: 50%;
     transform: translate(-50%, -50%); }
 
+.modal .close {
+  margin: -0.8rem -0.8rem -0.8rem auto; }
+  .modal .close:not(:disabled):not(.disabled):hover, .modal .close:not(:disabled):not(.disabled):focus {
+    opacity: inherit; }
+
 .layout.fullscreen {
   height: 100vh;
   position: fixed;