MDL-66247 accessibility: Correct notification alert role support

lib/templates/notification_error.mustache

@@ -36,7 +36,7 @@
     Example context (json):
     { "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
 }}
-<div class="alert alert-error alert-block fade in {{ extraclasses }}" {{!
+<div class="alert alert-error alert-block fade in {{ extraclasses }}" id="notification-{{uniqid}}"{{!
     }}{{# announce }} role="alert"{{/ announce }}{{!
     }}>
     {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
@@ -47,4 +47,12 @@ require(['jquery', 'theme_bootstrapbase/bootstrap'], function($) {
     // Setup closing of bootstrap alerts.
     $().alert();
 });
+
+window.addEventListener('load', function() {
+    // This is a hack to ensure that the role="alert" is read out.
+    var alert = document.querySelector('#notification-{{uniqid}}[role="alert"]');
+    if (alert) {
+        alert.innerHTML += ' ';
+    }
+});
 {{/ js }}

lib/templates/notification_info.mustache

@@ -36,7 +36,7 @@
     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 }}" {{!
+<div class="alert alert-info alert-block fade in {{ extraclasses }}" id="notification-{{uniqid}}"{{!
     }}{{# announce }} role="alert"{{/ announce }}{{!
     }}>
     {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
@@ -47,4 +47,12 @@ require(['jquery', 'theme_bootstrapbase/bootstrap'], function($) {
     // Setup closing of bootstrap alerts.
     $().alert();
 });
+
+window.addEventListener('load', function() {
+    // This is a hack to ensure that the role="alert" is read out.
+    var alert = document.querySelector('#notification-{{uniqid}}[role="alert"]');
+    if (alert) {
+        alert.innerHTML += ' ';
+    }
+});
 {{/ js }}

lib/templates/notification_success.mustache

@@ -36,7 +36,7 @@
     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 }}" {{!
+<div class="alert alert-success alert-block fade in {{ extraclasses }}" id="notification-{{uniqid}}"{{!
     }}{{# announce }} role="alert"{{/ announce }}{{!
     }}>
     {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
@@ -47,4 +47,12 @@ require(['jquery', 'theme_bootstrapbase/bootstrap'], function($) {
     // Setup closing of bootstrap alerts.
     $().alert();
 });
+
+window.addEventListener('load', function() {
+    // This is a hack to ensure that the role="alert" is read out.
+    var alert = document.querySelector('#notification-{{uniqid}}[role="alert"]');
+    if (alert) {
+        alert.innerHTML += ' ';
+    }
+});
 {{/ js }}

lib/templates/notification_warning.mustache

@@ -36,7 +36,7 @@
     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 }}" {{!
+<div class="alert alert-warning alert-block fade in {{ extraclasses }}" id="notification-{{uniqid}}"{{!
     }}{{# announce }} role="alert"{{/ announce }}{{!
     }}>
     {{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
@@ -47,4 +47,12 @@ require(['jquery', 'theme_bootstrapbase/bootstrap'], function($) {
     // Setup closing of bootstrap alerts.
     $().alert();
 });
+
+window.addEventListener('load', function() {
+    // This is a hack to ensure that the role="alert" is read out.
+    var alert = document.querySelector('#notification-{{uniqid}}[role="alert"]');
+    if (alert) {
+        alert.innerHTML += ' ';
+    }
+});
 {{/ js }}

theme/boost/amd/src/aria.js

@@ -186,16 +186,14 @@ define(['jquery', 'core/pending'], function($, Pending) {
             });
 
             // After page load, focus on any element with special autofocus attribute.
-            var delayedFocusPromise = new Pending('core/aria:delayed-focus');
-            $(function() {
-                window.setTimeout(function(pendingPromise) {
-                    var alerts = $('[role="alert"][data-aria-autofocus="true"]');
-                    if (alerts.length > 0) {
-                        $(alerts[0]).attr('tabindex', '0');
-                        $(alerts[0]).focus();
-                    }
-                    pendingPromise.resolve();
-                }, 300, delayedFocusPromise);
+            window.addEventListener("load", function() {
+                var alerts = document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');
+                Array.prototype.forEach.call(alerts, function(autofocusElement) {
+                    // According to the specification an role="alert" region is only read out on change to the content
+                    // of that region.
+                    autofocusElement.innerHTML += ' ';
+                    autofocusElement.removeAttribute('data-aria-autofocus');
+                });
             });
         }
     };