From ac2b9ee95cec55a9c5ff2db76a7838765383e397 Mon Sep 17 00:00:00 2001
From: Andrew Nicols <andrew@nicols.co.uk>
Date: Mon, 23 Sep 2019 10:01:44 +0800
Subject: [PATCH] MDL-66247 accessibility: Correct notification alert role
 support

---
 lib/templates/notification_error.mustache   | 10 +++++++++-
 lib/templates/notification_info.mustache    | 10 +++++++++-
 lib/templates/notification_success.mustache | 10 +++++++++-
 lib/templates/notification_warning.mustache | 10 +++++++++-
 theme/boost/amd/build/aria.min.js           |  2 +-
 theme/boost/amd/src/aria.js                 | 18 ++++++++----------
 6 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/lib/templates/notification_error.mustache b/lib/templates/notification_error.mustache
index 0efef7e82bb..81d3bc406af 100644
--- a/lib/templates/notification_error.mustache
+++ b/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 }}
diff --git a/lib/templates/notification_info.mustache b/lib/templates/notification_info.mustache
index df0dc385205..cdcc435aa11 100644
--- a/lib/templates/notification_info.mustache
+++ b/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 }}
diff --git a/lib/templates/notification_success.mustache b/lib/templates/notification_success.mustache
index 9efb6284923..2ac0a1443fb 100644
--- a/lib/templates/notification_success.mustache
+++ b/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 }}
diff --git a/lib/templates/notification_warning.mustache b/lib/templates/notification_warning.mustache
index 8aecc39ad52..b06ed2e6ca5 100644
--- a/lib/templates/notification_warning.mustache
+++ b/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 }}
diff --git a/theme/boost/amd/build/aria.min.js b/theme/boost/amd/build/aria.min.js
index 6a2a8277e49..15ae54e0a18 100644
--- a/theme/boost/amd/build/aria.min.js
+++ b/theme/boost/amd/build/aria.min.js
@@ -1 +1 @@
-define(["jquery","core/pending"],function(a,b){return{init:function(){var c=!1,d=function(){c=!0},e=function(){var a=c;return c=!1,a};a('[data-toggle="dropdown"]').keydown(function(b){var c,e=b.which||b.keyCode;38==e&&d(),27==e&&(c=a(b.target).attr("aria-expanded"),b.preventDefault(),"false"==c&&a(b.target).click()),32!=e&&13!=e||(b.preventDefault(),a(b.target).click())});var f=function(c){var d=function(b){a(this).focus(),b.resolve()}.bind(c);setTimeout(d,50,new b("core/aria:delayed-focus"))};a(".dropdown").on("shown.bs.dropdown",function(b){var c=a(b.target).find('[role="menu"]'),d=!1,g=!1;c&&(d=a(c).find('[role="menuitem"]')),d&&d.length>0&&(g=e()?d[d.length-1]:d[0]),g&&f(g)}),a('.dropdown [role="menu"] [role="menuitem"]').keypress(function(b){var c,d,e=String.fromCharCode(b.which||b.keyCode),g=a(b.target).closest('[role="menu"]'),h=0,i=!1;if(g&&(i=a(g).find('[role="menuitem"]')))for(e=e.toLowerCase(),h=0;h<i.length;h++)if(c=a(i[h]),d=c.text().trim().toLowerCase(),0==d.indexOf(e)){f(c);break}}),a('.dropdown [role="menu"] [role="menuitem"]').keydown(function(b){var c=b.which||b.keyCode,d=!1,e=a(b.target).closest('[role="menu"]'),g=0,h=!1;if(e&&(h=a(e).find('[role="menuitem"]'))){if(40==c){for(g=0;g<h.length-1;g++)if(h[g]==b.target){d=h[g+1];break}d||(d=h[0])}else if(38==c){for(g=1;g<h.length;g++)if(h[g]==b.target){d=h[g-1];break}d||(d=h[h.length-1])}else 36==c?d=h[0]:35==c&&(d=h[h.length-1]);d&&(b.preventDefault(),f(d))}}),a(".dropdown").on("hidden.bs.dropdown",function(b){var c=a(b.target).find('[data-toggle="dropdown"]');c&&f(c)});var g=new b("core/aria:delayed-focus");a(function(){window.setTimeout(function(b){var c=a('[role="alert"][data-aria-autofocus="true"]');c.length>0&&(a(c[0]).attr("tabindex","0"),a(c[0]).focus()),b.resolve()},300,g)})}}});
\ No newline at end of file
+define(["jquery","core/pending"],function(a,b){return{init:function(){var c=!1,d=function(){c=!0},e=function(){var a=c;return c=!1,a};a('[data-toggle="dropdown"]').keydown(function(b){var c,e=b.which||b.keyCode;38==e&&d(),27==e&&(c=a(b.target).attr("aria-expanded"),b.preventDefault(),"false"==c&&a(b.target).click()),32!=e&&13!=e||(b.preventDefault(),a(b.target).click())});var f=function(c){var d=function(b){a(this).focus(),b.resolve()}.bind(c);setTimeout(d,50,new b("core/aria:delayed-focus"))};a(".dropdown").on("shown.bs.dropdown",function(b){var c=a(b.target).find('[role="menu"]'),d=!1,g=!1;c&&(d=a(c).find('[role="menuitem"]')),d&&d.length>0&&(g=e()?d[d.length-1]:d[0]),g&&f(g)}),a('.dropdown [role="menu"] [role="menuitem"]').keypress(function(b){var c,d,e=String.fromCharCode(b.which||b.keyCode),g=a(b.target).closest('[role="menu"]'),h=0,i=!1;if(g&&(i=a(g).find('[role="menuitem"]')))for(e=e.toLowerCase(),h=0;h<i.length;h++)if(c=a(i[h]),d=c.text().trim().toLowerCase(),0==d.indexOf(e)){f(c);break}}),a('.dropdown [role="menu"] [role="menuitem"]').keydown(function(b){var c=b.which||b.keyCode,d=!1,e=a(b.target).closest('[role="menu"]'),g=0,h=!1;if(e&&(h=a(e).find('[role="menuitem"]'))){if(40==c){for(g=0;g<h.length-1;g++)if(h[g]==b.target){d=h[g+1];break}d||(d=h[0])}else if(38==c){for(g=1;g<h.length;g++)if(h[g]==b.target){d=h[g-1];break}d||(d=h[h.length-1])}else 36==c?d=h[0]:35==c&&(d=h[h.length-1]);d&&(b.preventDefault(),f(d))}}),a(".dropdown").on("hidden.bs.dropdown",function(b){var c=a(b.target).find('[data-toggle="dropdown"]');c&&f(c)}),window.addEventListener("load",function(){var a=document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');Array.prototype.forEach.call(a,function(a){a.innerHTML+=" ",a.removeAttribute("data-aria-autofocus")})})}}});
\ No newline at end of file
diff --git a/theme/boost/amd/src/aria.js b/theme/boost/amd/src/aria.js
index 360ffa21500..7a72756e0a7 100644
--- a/theme/boost/amd/src/aria.js
+++ b/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');
+                });
             });
         }
     };