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
moodle · May 23, 2022 · a7db400 · a7db400
1 parent 2affa30
commit a7db400
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>