MDL-69301 theme_boost: Use event.key in aria.js

Both event.which and event.keyCode are deprecated. So
We switched to using event.key. We can only do so now
because IE is no longer supported.

theme/boost/amd/build/aria.min.js

@@ -1,2 +1,2 @@
-define ("theme_boost/aria",["exports","core/key_codes","jquery","core/pending"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;c=e(c);d=e(d);function e(a){return a&&a.__esModule?a:{default:a}}var f=function(){var a=!1,e=function(){a=!0},f=function(){var b=a;a=!1;return b};document.addEventListener("keydown",function(a){if(a.target.matches("[data-toggle=\"dropdown\"]")){var c=a.which;if(c==b.arrowUp){e()}if(c==b.escape){var d=a.target.getAttribute("aria-expanded");a.preventDefault();if("false"==d){a.target.click()}}if(c==b.space||c==b.enter){a.preventDefault();a.target.click()}}});var g=function(a){setTimeout(function delayedFocus(b){a.focus();b.resolve()},50,new d.default("core/aria:delayed-focus"))};(0,c.default)(".dropdown").on("shown.bs.dropdown",function(a){var b=a.target.querySelector("[role=\"menu\"]"),c=!1,d=!1;if(b){c=b.querySelectorAll("[role=\"menuitem\"]")}if(c&&0<c.length){if(f()){d=c[c.length-1]}else{d=c[0]}}if(d){g(d)}});document.addEventListener("keypress",function(a){if(a.target.matches(".dropdown [role=\"menu\"] [role=\"menuitem\"]")){var b=String.fromCharCode(a.which).toLowerCase(),c=a.target.closest("[role=\"menu\"]");if(!c){return}var f=c.querySelectorAll("[role=\"menuitem\"]");if(!f){return}for(var h=0;h<f.length;h++){var d=f[h],e=d.text.trim().toLowerCase();if(0==e.indexOf(b)){g(d);break}}}});document.addEventListener("keydown",function(a){if(a.target.matches(".dropdown [role=\"menu\"] [role=\"menuitem\"]")){var c=a.which,d=!1,e=a.target.closest("[role=\"menu\"]");if(!e){return}var f=e.querySelectorAll("[role=\"menuitem\"]");if(!f){return}if(c==b.arrowDown){for(var h=0;h<f.length-1;h++){if(f[h]==a.target){d=f[h+1];break}}if(!d){d=f[0]}}else if(c==b.arrowUp){for(var i=1;i<f.length;i++){if(f[i]==a.target){d=f[i-1];break}}if(!d){d=f[f.length-1]}}else if(c==b.home){d=f[0]}else if(c==b.end){d=f[f.length-1]}if(d){a.preventDefault();g(d)}}});(0,c.default)(".dropdown").on("hidden.bs.dropdown",function(a){var b=a.target.querySelector("[data-toggle=\"dropdown\"]");if(b){g(b)}})},g=function(){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")})})},h=function(a){for(var d=a.target.closest("[role=\"tablist\"]"),e="vertical"==d.getAttribute("aria-orientation"),f=window.right_to_left(),g=e?b.arrowDown:f?b.arrowLeft:b.arrowRight,h=e?b.arrowUp:f?b.arrowRight:b.arrowLeft,j=Array.prototype.filter.call(d.querySelectorAll("[role=\"tab\"]"),function(a){return"none"!==getComputedStyle(a).display}),k=0;k<j.length;k++){j[k].index=k}switch(a.keyCode){case g:a.preventDefault();if(a.target.index!==void 0&&j[a.target.index+1]){j[a.target.index+1].focus()}else{j[0].focus()}break;case h:a.preventDefault();if(a.target.index!==void 0&&j[a.target.index-1]){j[a.target.index-1].focus()}else{j[j.length-1].focus()}break;case b.home:a.preventDefault();j[0].focus();break;case b.end:a.preventDefault();j[j.length-1].focus();break;case b.enter:case b.space:a.preventDefault();(0,c.default)(a.target).tab("show");j.forEach(function(a){a.tabIndex=-1});a.target.tabIndex=0;}},i=function(){document.addEventListener("keydown",function(a){if([b.arrowUp,b.arrowDown,b.arrowLeft,b.arrowRight,b.home,b.end,b.enter,b.space].includes(a.keyCode)){if(a.target.matches("[role=\"tablist\"] [role=\"tab\"]")){h(a)}}});document.addEventListener("click",function(a){if(a.target.matches("[role=\"tablist\"] [role=\"tab\"]")){var b=a.target.closest("[role=\"tablist\"]").querySelectorAll("[role=\"tab\"]");a.preventDefault();(0,c.default)(a.target).tab("show");b.forEach(function(a){a.tabIndex=-1});a.target.tabIndex=0}})};a.init=function init(){f();g();i()}});
+define ("theme_boost/aria",["exports","jquery","core/pending"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var e=function(){var a=!1,d=function(){a=!0},e=function(){var b=a;a=!1;return b};document.addEventListener("keydown",function(a){if(a.target.matches("[data-toggle=\"dropdown\"]")){var b=a.key;if("ArrowUp"==b){d()}if("Escape"==b){var c=a.target.getAttribute("aria-expanded");a.preventDefault();if("false"==c){a.target.click()}}if(" "==b||"Enter"==b){a.preventDefault();a.target.click()}}});var f=function(a){setTimeout(function delayedFocus(b){a.focus();b.resolve()},50,new c.default("core/aria:delayed-focus"))};(0,b.default)(".dropdown").on("shown.bs.dropdown",function(a){var b=a.target.querySelector("[role=\"menu\"]"),c=!1,d=!1;if(b){c=b.querySelectorAll("[role=\"menuitem\"]")}if(c&&0<c.length){if(e()){d=c[c.length-1]}else{d=c[0]}}if(d){f(d)}});document.addEventListener("keypress",function(a){if(a.target.matches(".dropdown [role=\"menu\"] [role=\"menuitem\"]")){var g=a.target.closest("[role=\"menu\"]");if(!g){return}var h=g.querySelectorAll("[role=\"menuitem\"]");if(!h){return}for(var b=a.key.toLowerCase(),c=0;c<h.length;c++){var d=h[c],e=d.text.trim().toLowerCase();if(0==e.indexOf(b)){f(d);break}}}});document.addEventListener("keydown",function(a){if(a.target.matches(".dropdown [role=\"menu\"] [role=\"menuitem\"]")){var b=a.key,c=!1,d=a.target.closest("[role=\"menu\"]");if(!d){return}var e=d.querySelectorAll("[role=\"menuitem\"]");if(!e){return}if("ArrowDown"==b){for(var g=0;g<e.length-1;g++){if(e[g]==a.target){c=e[g+1];break}}if(!c){c=e[0]}}else if("ArrowUp"==b){for(var h=1;h<e.length;h++){if(e[h]==a.target){c=e[h-1];break}}if(!c){c=e[e.length-1]}}else if("Home"==b){c=e[0]}else if("End"==b){c=e[e.length-1]}if(c){a.preventDefault();f(c)}}});(0,b.default)(".dropdown").on("hidden.bs.dropdown",function(a){var b=a.target.querySelector("[data-toggle=\"dropdown\"]");if(b){f(b)}})},f=function(){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")})})},g=function(a){for(var c=a.target.closest("[role=\"tablist\"]"),d="vertical"==c.getAttribute("aria-orientation"),e=window.right_to_left(),f=d?"ArrowDown":e?"ArrowLeft":"ArrowRight",g=d?"ArrowUp":e?"ArrowRight":"ArrowLeft",h=Array.prototype.filter.call(c.querySelectorAll("[role=\"tab\"]"),function(a){return"none"!==getComputedStyle(a).display}),j=0;j<h.length;j++){h[j].index=j}switch(a.key){case f:a.preventDefault();if(a.target.index!==void 0&&h[a.target.index+1]){h[a.target.index+1].focus()}else{h[0].focus()}break;case g:a.preventDefault();if(a.target.index!==void 0&&h[a.target.index-1]){h[a.target.index-1].focus()}else{h[h.length-1].focus()}break;case"Home":a.preventDefault();h[0].focus();break;case"End":a.preventDefault();h[h.length-1].focus();break;case"Enter":case" ":a.preventDefault();(0,b.default)(a.target).tab("show");h.forEach(function(a){a.tabIndex=-1});a.target.tabIndex=0;}},h=function(){document.addEventListener("keydown",function(a){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","Enter"," "].includes(a.key)){if(a.target.matches("[role=\"tablist\"] [role=\"tab\"]")){g(a)}}});document.addEventListener("click",function(a){if(a.target.matches("[role=\"tablist\"] [role=\"tab\"]")){var c=a.target.closest("[role=\"tablist\"]").querySelectorAll("[role=\"tab\"]");a.preventDefault();(0,b.default)(a.target).tab("show");c.forEach(function(a){a.tabIndex=-1});a.target.tabIndex=0}})};a.init=function init(){e();f();h()}});
 //# sourceMappingURL=aria.min.js.map

theme/boost/amd/src/aria.js

@@ -21,7 +21,6 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-import {end, escape, arrowUp, arrowDown, arrowLeft, arrowRight, home, enter, space} from 'core/key_codes';
 import $ from 'jquery';
 import Pending from 'core/pending';
 
@@ -42,16 +41,16 @@ const dropdownFix = () => {
     // Special handling for "up" keyboard control.
     document.addEventListener('keydown', e => {
         if (e.target.matches('[data-toggle="dropdown"]')) {
-            const trigger = e.which;
+            const trigger = e.key;
 
             // Up key opens the menu at the end.
-            if (trigger == arrowUp) {
+            if (trigger == 'ArrowUp') {
                 // Focus the end of the menu, not the beginning.
                 setFocusEnd();
             }
 
             // Escape key only closes the menu, it doesn't open it.
-            if (trigger == escape) {
+            if (trigger == 'Escape') {
                 const expanded = e.target.getAttribute('aria-expanded');
                 e.preventDefault();
                 if (expanded == "false") {
@@ -60,7 +59,7 @@ const dropdownFix = () => {
             }
 
             // Space key or Enter key opens the menu.
-            if (trigger == space || trigger == enter) {
+            if (trigger == ' ' || trigger == 'Enter') {
                 // Cancel random scroll.
                 e.preventDefault();
                 // Open the menu instead.
@@ -103,9 +102,7 @@ const dropdownFix = () => {
     // text starting with the typed character (case insensitive).
     document.addEventListener('keypress', e => {
         if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
-            const trigger = String.fromCharCode(e.which).toLowerCase();
             const menu = e.target.closest('[role="menu"]');
-
             if (!menu) {
                 return;
             }
@@ -114,6 +111,8 @@ const dropdownFix = () => {
                 return;
             }
 
+            const trigger = e.key.toLowerCase();
+
             for (let i = 0; i < menuItems.length; i++) {
                 const item = menuItems[i];
                 const itemText = item.text.trim().toLowerCase();
@@ -128,7 +127,7 @@ const dropdownFix = () => {
     // Keyboard navigation for arrow keys, home and end keys.
     document.addEventListener('keydown', e => {
         if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
-            const trigger = e.which;
+            const trigger = e.key;
             let next = false;
             const menu = e.target.closest('[role="menu"]');
 
@@ -140,7 +139,7 @@ const dropdownFix = () => {
                 return;
             }
             // Down key.
-            if (trigger == arrowDown) {
+            if (trigger == 'ArrowDown') {
                 for (let i = 0; i < menuItems.length - 1; i++) {
                     if (menuItems[i] == e.target) {
                         next = menuItems[i + 1];
@@ -152,7 +151,7 @@ const dropdownFix = () => {
                     next = menuItems[0];
                 }
 
-            } else if (trigger == arrowUp) {
+            } else if (trigger == 'ArrowUp') {
                 // Up key.
                 for (let i = 1; i < menuItems.length; i++) {
                     if (menuItems[i] == e.target) {
@@ -165,11 +164,11 @@ const dropdownFix = () => {
                     next = menuItems[menuItems.length - 1];
                 }
 
-            } else if (trigger == home) {
+            } else if (trigger == 'Home') {
                 // Home key.
                 next = menuItems[0];
 
-            } else if (trigger == end) {
+            } else if (trigger == 'End') {
                 // End key.
                 next = menuItems[menuItems.length - 1];
             }
@@ -214,8 +213,8 @@ const updateTabFocus = e => {
     const tabList = e.target.closest('[role="tablist"]');
     const vertical = tabList.getAttribute('aria-orientation') == 'vertical';
     const rtl = window.right_to_left();
-    const arrowNext = vertical ? arrowDown : (rtl ? arrowLeft : arrowRight);
+    const arrowNext = vertical ? 'ArrowDown' : (rtl ? 'ArrowLeft' : 'ArrowRight');
-    const arrowPrevious = vertical ? arrowUp : (rtl ? arrowRight : arrowLeft);
+    const arrowPrevious = vertical ? 'ArrowUp' : (rtl ? 'ArrowRight' : 'ArrowLeft');
     const tabs = Array.prototype.filter.call(
         tabList.querySelectorAll('[role="tab"]'),
         tab => getComputedStyle(tab).display !== 'none'); // We only work with the visible tabs.
@@ -224,7 +223,7 @@ const updateTabFocus = e => {
         tabs[i].index = i;
     }
 
-    switch (e.keyCode) {
+    switch (e.key) {
         case arrowNext:
             e.preventDefault();
             if (e.target.index !== undefined && tabs[e.target.index + 1]) {
@@ -241,16 +240,16 @@ const updateTabFocus = e => {
                 tabs[tabs.length - 1].focus();
             }
             break;
-        case home:
+        case 'Home':
             e.preventDefault();
             tabs[0].focus();
             break;
-        case end:
+        case 'End':
             e.preventDefault();
             tabs[tabs.length - 1].focus();
             break;
-        case enter:
+        case 'Enter':
-        case space:
+        case ' ':
             e.preventDefault();
             $(e.target).tab('show');
             tabs.forEach(tab => {
@@ -265,7 +264,7 @@ const updateTabFocus = e => {
  */
 const tabElementFix = () => {
     document.addEventListener('keydown', e => {
-        if ([arrowUp, arrowDown, arrowLeft, arrowRight, home, end, enter, space].includes(e.keyCode)) {
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter', ' '].includes(e.key)) {
             if (e.target.matches('[role="tablist"] [role="tab"]')) {
                 updateTabFocus(e);
             }