moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-07 09:56:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
Shamim Rezaie 2020-12-03 04:18:01 +11:00
parent 049e9e835c
commit 1320da3240
3 changed files with 21 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
theme/boost/amd/build/aria.min.js vendored
View file

@ -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

2
theme/boost/amd/build/aria.min.js.map
View file

File diff suppressed because one or more lines are too long

39
theme/boost/amd/src/aria.js
View file

@ -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 arrowPrevious = vertical ? arrowUp : (rtl ? arrowRight : arrowLeft);
const arrowNext = vertical ? 'ArrowDown' : (rtl ? 'ArrowLeft' : 'ArrowRight');
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 space:
case 'Enter':
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);
}