MDL-74802 core: Improve the accessibility of alert notifications

* Make the ordering of the message and the close button logical on
  the DOM.
* Hide the times HTML entity
* Add sr-only label on the close button for non-sighted users
* Add tooltip on the close button sighted users
* With all the notification templates being the same except for the
  class, I created a base notification template (core/notification_base)
  that alert notifications just override. This avoids code duplication
  and can make maintenance simpler.

lib/templates/notification_base.mustache

@@ -0,0 +1,49 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/notification_base
+
+    Base Moodle notification template.
+
+    The purpose of this template is to render an base template for alert notifications.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * message A cleaned string (use clean_text()) to display.
+    * extraclasses Additional classes to apply to the notification.
+    * closebutton Whether a close button should be displayed to dismiss the message.
+    * 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"}
+}}
+<div class="alert {{$alertclass}}alert-secondary{{/alertclass}} alert-block fade in {{ extraclasses }}" {{!
+        }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}>
+    {{{ message }}}
+    {{# closebutton }}{{!
+    }}<button type="button" class="close" data-dismiss="alert" title="{{#str}}dismissnotification, core{{/str}}"{{!
+            }} data-toggle="tooltip">
+        <span aria-hidden="true">&times;</span>
+        <span class="sr-only">{{#str}}dismissnotification, core{{/str}}</span>
+    </button>{{!
+    }}{{/ closebutton }}
+</div>

lib/templates/notification_error.mustache

@@ -36,9 +36,6 @@
     Example context (json):
     { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
 }}
-<div class="alert alert-danger alert-block fade in {{ extraclasses }}" {{!
-    }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
-    }}>
-    {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
-    {{{ message }}}
-</div>
+{{< core/notification_base}}
+    {{$alertclass}}alert-danger{{/alertclass}}
+{{/core/notification_base}}

lib/templates/notification_info.mustache

@@ -36,10 +36,6 @@
     Example context (json):
     { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
 }}
-<div class="alert alert-info alert-block fade in {{ extraclasses }}" {{!
-    }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
-    }}>
-    {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
-    {{{ message }}}
-</div>
-
+{{< core/notification_base}}
+    {{$alertclass}}alert-info{{/alertclass}}
+{{/core/notification_base}}

lib/templates/notification_success.mustache

@@ -36,9 +36,6 @@
     Example context (json):
     { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
 }}
-<div class="alert alert-success alert-block fade in {{ extraclasses }}" {{!
-    }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
-    }}>
-    {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
-    {{{ message }}}
-</div>
+{{< core/notification_base}}
+    {{$alertclass}}alert-success{{/alertclass}}
+{{/core/notification_base}}

lib/templates/notification_warning.mustache

@@ -36,9 +36,6 @@
     Example context (json):
     { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
 }}
-<div class="alert alert-warning alert-block fade in {{ extraclasses }}" {{!
-    }}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
-    }}>
-    {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
-    {{{ message }}}
-</div>
+{{< core/notification_base}}
+    {{$alertclass}}alert-warning{{/alertclass}}
+{{/core/notification_base}}