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

@@ -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;
+            }
+        }
+    }
 }

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;

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;