From 252dbc96057fb9e520391bbfa220eeefe190c307 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 19 May 2022 22:48:17 +0800
Subject: [PATCH] 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
---
 lib/templates/notification_error.mustache   | 8 +++++++-
 lib/templates/notification_info.mustache    | 9 +++++++--
 lib/templates/notification_success.mustache | 8 +++++++-
 lib/templates/notification_warning.mustache | 8 +++++++-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/lib/templates/notification_error.mustache b/lib/templates/notification_error.mustache
index 3d05b42bde7..87990864088 100644
--- a/lib/templates/notification_error.mustache
+++ b/lib/templates/notification_error.mustache
@@ -39,6 +39,12 @@
 <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 }}}
+    {{# 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>
diff --git a/lib/templates/notification_info.mustache b/lib/templates/notification_info.mustache
index 692751f4fa9..46efe5e55c2 100644
--- a/lib/templates/notification_info.mustache
+++ b/lib/templates/notification_info.mustache
@@ -39,7 +39,12 @@
 <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 }}}
+    {{# 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>
-
diff --git a/lib/templates/notification_success.mustache b/lib/templates/notification_success.mustache
index b33f4aa24aa..a476779f768 100644
--- a/lib/templates/notification_success.mustache
+++ b/lib/templates/notification_success.mustache
@@ -39,6 +39,12 @@
 <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 }}}
+    {{# 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>
diff --git a/lib/templates/notification_warning.mustache b/lib/templates/notification_warning.mustache
index e3f8bda8321..66ce054a6ec 100644
--- a/lib/templates/notification_warning.mustache
+++ b/lib/templates/notification_warning.mustache
@@ -39,6 +39,12 @@
 <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 }}}
+    {{# 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>