From 453c3ac47d51ea4ab6a4236a47c23aa7002d97c0 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 23 Jun 2022 14:43:50 +0800
Subject: [PATCH] MDL-75055 templates: Apply the .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_base.mustache | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/templates/notification_base.mustache b/lib/templates/notification_base.mustache
index 5e549cd9660..df377029342 100644
--- a/lib/templates/notification_base.mustache
+++ b/lib/templates/notification_base.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 {{$alertclass}}alert-secondary{{/alertclass}} alert-block fade in {{ extraclasses }}" {{!
+<div class="alert {{$alertclass}}alert-secondary{{/alertclass}} alert-block fade in {{ extraclasses }} {{#closebutton}}alert-dismissible{{/closebutton}}" {{!
         }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}>
     {{{ message }}}
     {{# closebutton }}{{!