From 5523816c382a9aad86e2341733d2b763c23217db Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 23 Jun 2022 14:32:36 +0800
Subject: [PATCH 1/2] MDL-75055 theme_boost: Darken close button colour in
 notification alerts

This is in order for the close button to have a good contrast against
the alert background and meet the minimum Level AA contrast ratio of 3:1
---
 theme/boost/scss/moodle/core.scss | 11 +++++++++--
 theme/boost/style/moodle.css      | 32 +++++++++++++++++++++++++++++++
 theme/classic/style/moodle.css    | 32 +++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 1e52cf0e685..9dc9eb561fd 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2678,8 +2678,15 @@ $picker-emojis-per-row: 7 !default;
 }
 
 @each $color, $value in $theme-colors {
-    .alert-#{$color} a {
-        color: darken(theme-color-level($color, $alert-color-level), 10%);
+    .alert-#{$color} {
+        a {
+            color: darken(theme-color-level($color, $alert-color-level), 10%);
+        }
+        // Darken the close button text colour inside notification alerts for better contrast.
+        .close {
+            color: darken(theme-color-level($color, $alert-color-level), 20%);
+            opacity: 0.6;
+        }
     }
 }
 .alert a {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c7f28338393..c9365b5ae9d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12007,27 +12007,59 @@ input[disabled] {
 .alert-primary a {
   color: #041d34; }
 
+.alert-primary .close {
+  color: #000305;
+  opacity: 0.6; }
+
 .alert-secondary a {
   color: #525557; }
 
+.alert-secondary .close {
+  color: #393b3d;
+  opacity: 0.6; }
+
 .alert-success a, .environmenttable .ok a {
   color: #0c1b0b; }
 
+.alert-success .close, .environmenttable .ok .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert-info a {
   color: #00171b; }
 
+.alert-info .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert-warning a, .environmenttable .warn a {
   color: #573e1c; }
 
+.alert-warning .close, .environmenttable .warn .close {
+  color: #302310;
+  opacity: 0.6; }
+
 .alert-danger a, .environmenttable .error a {
   color: #3d0f0a; }
 
+.alert-danger .close, .environmenttable .error .close {
+  color: #110403;
+  opacity: 0.6; }
+
 .alert-light a {
   color: #686868; }
 
+.alert-light .close {
+  color: #4e4e4f;
+  opacity: 0.6; }
+
 .alert-dark a {
   color: #040505; }
 
+.alert-dark .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert a {
   font-weight: 700; }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 13fd887f2c0..c4df1726b4c 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12007,27 +12007,59 @@ input[disabled] {
 .alert-primary a {
   color: #041d34; }
 
+.alert-primary .close {
+  color: #000305;
+  opacity: 0.6; }
+
 .alert-secondary a {
   color: #525557; }
 
+.alert-secondary .close {
+  color: #393b3d;
+  opacity: 0.6; }
+
 .alert-success a, .environmenttable .ok a {
   color: #0c1b0b; }
 
+.alert-success .close, .environmenttable .ok .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert-info a {
   color: #00171b; }
 
+.alert-info .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert-warning a, .environmenttable .warn a {
   color: #573e1c; }
 
+.alert-warning .close, .environmenttable .warn .close {
+  color: #302310;
+  opacity: 0.6; }
+
 .alert-danger a, .environmenttable .error a {
   color: #3d0f0a; }
 
+.alert-danger .close, .environmenttable .error .close {
+  color: #110403;
+  opacity: 0.6; }
+
 .alert-light a {
   color: #686868; }
 
+.alert-light .close {
+  color: #4e4e4f;
+  opacity: 0.6; }
+
 .alert-dark a {
   color: #040505; }
 
+.alert-dark .close {
+  color: black;
+  opacity: 0.6; }
+
 .alert a {
   font-weight: 700; }
 

From ebb328750a77cdf3e4bb86d4c6b21724c8afdfb0 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 23 Jun 2022 14:36:11 +0800
Subject: [PATCH 2/2] MDL-75055 templates: Apply .alert-dismissible class

- Apply the .alert-dismissible class for notification alerts with
close button to fix its positioning. As an added bonus, the
.alert-dismissible class also enlarges the clickable area of the
close button which is great for accessibility.
- Improve example context for the notification alerts templates.
---
 lib/templates/notification_error.mustache   | 9 +++++++--
 lib/templates/notification_info.mustache    | 9 +++++++--
 lib/templates/notification_success.mustache | 9 +++++++--
 lib/templates/notification_warning.mustache | 9 +++++++--
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/lib/templates/notification_error.mustache b/lib/templates/notification_error.mustache
index 52e81b38626..f88c60f0787 100644
--- a/lib/templates/notification_error.mustache
+++ b/lib/templates/notification_error.mustache
@@ -34,9 +34,14 @@
     * announce Whether the notification should be announced to screen readers.
 
     Example context (json):
-    { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
+    {
+        "message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
+        "closebutton": 1,
+        "announce": 1,
+        "extraclasses": "foo bar"
+    }
 }}
-<div class="alert alert-danger alert-block fade in {{ extraclasses }}" {{!
+<div class="alert alert-danger alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
     }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
     }}>
     {{{ message }}}
diff --git a/lib/templates/notification_info.mustache b/lib/templates/notification_info.mustache
index a173a74d98c..15567008097 100644
--- a/lib/templates/notification_info.mustache
+++ b/lib/templates/notification_info.mustache
@@ -34,9 +34,14 @@
     * announce Whether the notification should be announced to screen readers.
 
     Example context (json):
-    { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
+    {
+        "message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
+        "closebutton": 1,
+        "announce": 1,
+        "extraclasses": "foo bar"
+    }
 }}
-<div class="alert alert-info alert-block fade in {{ extraclasses }}" {{!
+<div class="alert alert-info alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
     }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
     }}>
     {{{ message }}}
diff --git a/lib/templates/notification_success.mustache b/lib/templates/notification_success.mustache
index 7b2d1a0d56e..be07993a7a1 100644
--- a/lib/templates/notification_success.mustache
+++ b/lib/templates/notification_success.mustache
@@ -34,9 +34,14 @@
     * announce Whether the notification should be announced to screen readers.
 
     Example context (json):
-    { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
+    {
+        "message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
+        "closebutton": 1,
+        "announce": 1,
+        "extraclasses": "foo bar"
+    }
 }}
-<div class="alert alert-success alert-block fade in {{ extraclasses }}" {{!
+<div class="alert alert-success alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
     }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
     }}>
     {{{ message }}}
diff --git a/lib/templates/notification_warning.mustache b/lib/templates/notification_warning.mustache
index a02e3eb4665..57f129a461a 100644
--- a/lib/templates/notification_warning.mustache
+++ b/lib/templates/notification_warning.mustache
@@ -34,9 +34,14 @@
     * announce Whether the notification should be announced to screen readers.
 
     Example context (json):
-    { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
+    {
+        "message": "<p>Hello <a href=\"#\">World!</a></p><p>Your pants are on fire!</p>",
+        "closebutton": 1,
+        "announce": 1,
+        "extraclasses": "foo bar"
+    }
 }}
-<div class="alert alert-warning alert-block fade in {{ extraclasses }}" {{!
+<div class="alert alert-warning alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
     }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
     }}>
     {{{ message }}}