From 9183c0c91ad0dffd9c1186380b05dcd5fce262a0 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Wed, 1 Apr 2020 11:33:38 +0800 Subject: [PATCH] MDL-67663 core: Do not use aria-hidden="false" on drawer From https://www.w3.org/TR/wai-aria-1.1/#aria-hidden: * "aria-hidden="false" is known to work inconsistently in browsers" --- lib/amd/build/drawer.min.js | 2 +- lib/amd/build/drawer.min.js.map | 2 +- lib/amd/src/drawer.js | 2 +- lib/templates/drawer.mustache | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/amd/build/drawer.min.js b/lib/amd/build/drawer.min.js index 0f035c102ea..141e33951f0 100644 --- a/lib/amd/build/drawer.min.js +++ b/lib/amd/build/drawer.min.js @@ -1,2 +1,2 @@ -define ("core/drawer",["exports","jquery","core/pubsub","core/drawer_events"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=e(b);c=function(a){if(a&&a.__esModule){return a}else{var b={};if(null!=a){for(var c in a){if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};if(d.get||d.set){Object.defineProperty(b,c,d)}else{b[c]=a[c]}}}}b.default=a;return b}}(c);d=e(d);function e(a){return a&&a.__esModule?a:{default:a}}var f=function(a){a.removeClass("hidden");a.attr("aria-expanded",!0);a.attr("aria-hidden",!1);a.focus();c.publish(d.default.DRAWER_SHOWN,a)},g=function(a){a.addClass("hidden");a.attr("aria-expanded",!1);a.attr("aria-hidden",!0);c.publish(d.default.DRAWER_HIDDEN,a)},h=function(a){var b=a.hasClass("hidden");return!b},i=function(a){if(h(a)){g(a)}else{f(a)}},j=function(a){a=(0,b.default)(a);return a.closest("[data-region=\"right-hand-drawer\"]")};a.default={hide:g,show:f,isVisible:h,toggle:i,registerToggles:function registerToggles(a,b){var c=null;b.attr("aria-expanded",h(a));b.on("click",function(d){d.preventDefault();var e=h(a);i(a);b.attr("aria-expanded",!e);if(!e){c=b.filter(function(a,b){return b==d.target||b.contains(d.target)})}else if(c){c.focus();c=null}})},getDrawerRoot:j};return a.default}); +define ("core/drawer",["exports","jquery","core/pubsub","core/drawer_events"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=e(b);c=function(a){if(a&&a.__esModule){return a}else{var b={};if(null!=a){for(var c in a){if(Object.prototype.hasOwnProperty.call(a,c)){var d=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(a,c):{};if(d.get||d.set){Object.defineProperty(b,c,d)}else{b[c]=a[c]}}}}b.default=a;return b}}(c);d=e(d);function e(a){return a&&a.__esModule?a:{default:a}}var f=function(a){a.removeClass("hidden");a.attr("aria-expanded",!0);a.removeAttr("aria-hidden");a.focus();c.publish(d.default.DRAWER_SHOWN,a)},g=function(a){a.addClass("hidden");a.attr("aria-expanded",!1);a.attr("aria-hidden",!0);c.publish(d.default.DRAWER_HIDDEN,a)},h=function(a){var b=a.hasClass("hidden");return!b},i=function(a){if(h(a)){g(a)}else{f(a)}},j=function(a){a=(0,b.default)(a);return a.closest("[data-region=\"right-hand-drawer\"]")};a.default={hide:g,show:f,isVisible:h,toggle:i,registerToggles:function registerToggles(a,b){var c=null;b.attr("aria-expanded",h(a));b.on("click",function(d){d.preventDefault();var e=h(a);i(a);b.attr("aria-expanded",!e);if(!e){c=b.filter(function(a,b){return b==d.target||b.contains(d.target)})}else if(c){c.focus();c=null}})},getDrawerRoot:j};return a.default}); //# sourceMappingURL=drawer.min.js.map diff --git a/lib/amd/build/drawer.min.js.map b/lib/amd/build/drawer.min.js.map index 9f97f5bdfaa..267e20a2fc9 100644 --- a/lib/amd/build/drawer.min.js.map +++ b/lib/amd/build/drawer.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/drawer.js"],"names":["show","root","removeClass","attr","focus","PubSub","publish","DrawerEvents","DRAWER_SHOWN","hide","addClass","DRAWER_HIDDEN","isVisible","isHidden","hasClass","toggle","getDrawerRoot","contentRoot","closest","registerToggles","toggleElements","openTrigger","on","e","preventDefault","wasVisible","filter","index","element","target","contains"],"mappings":"+KAsBA,OACA,kUACA,O,sDAOMA,CAAAA,CAAI,CAAG,SAACC,CAAD,CAAU,CACnBA,CAAI,CAACC,WAAL,CAAiB,QAAjB,EACAD,CAAI,CAACE,IAAL,CAAU,eAAV,KACAF,CAAI,CAACE,IAAL,CAAU,aAAV,KACAF,CAAI,CAACG,KAAL,GAEAC,CAAM,CAACC,OAAP,CAAeC,UAAaC,YAA5B,CAA0CP,CAA1C,CACH,C,CAOKQ,CAAI,CAAG,SAACR,CAAD,CAAU,CACnBA,CAAI,CAACS,QAAL,CAAc,QAAd,EACAT,CAAI,CAACE,IAAL,CAAU,eAAV,KACAF,CAAI,CAACE,IAAL,CAAU,aAAV,KACAE,CAAM,CAACC,OAAP,CAAeC,UAAaI,aAA5B,CAA2CV,CAA3C,CACH,C,CAQKW,CAAS,CAAG,SAACX,CAAD,CAAU,CACxB,GAAIY,CAAAA,CAAQ,CAAGZ,CAAI,CAACa,QAAL,CAAc,QAAd,CAAf,CACA,MAAO,CAACD,CACX,C,CAOKE,CAAM,CAAG,SAACd,CAAD,CAAU,CACrB,GAAIW,CAAS,CAACX,CAAD,CAAb,CAAqB,CACjBQ,CAAI,CAACR,CAAD,CACP,CAFD,IAEO,CACHD,CAAI,CAACC,CAAD,CACP,CACJ,C,CAsCKe,CAAa,CAAG,SAACC,CAAD,CAAiB,CACnCA,CAAW,CAAG,cAAEA,CAAF,CAAd,CACA,MAAOA,CAAAA,CAAW,CAACC,OAAZ,CAAoB,qCAApB,CACV,C,WAEc,CACXT,IAAI,CAAEA,CADK,CAEXT,IAAI,CAAEA,CAFK,CAGXY,SAAS,CAAEA,CAHA,CAIXG,MAAM,CAAEA,CAJG,CAKXI,eAAe,CAxCK,QAAlBA,CAAAA,eAAkB,CAAClB,CAAD,CAAOmB,CAAP,CAA0B,CAC9C,GAAIC,CAAAA,CAAW,CAAG,IAAlB,CACAD,CAAc,CAACjB,IAAf,CAAoB,eAApB,CAAqCS,CAAS,CAACX,CAAD,CAA9C,EAEAmB,CAAc,CAACE,EAAf,CAAkB,OAAlB,CAA2B,SAACC,CAAD,CAAO,CAC9BA,CAAC,CAACC,cAAF,GACA,GAAMC,CAAAA,CAAU,CAAGb,CAAS,CAACX,CAAD,CAA5B,CACAc,CAAM,CAACd,CAAD,CAAN,CACAmB,CAAc,CAACjB,IAAf,CAAoB,eAApB,CAAqC,CAACsB,CAAtC,EAEA,GAAI,CAACA,CAAL,CAAiB,CAEbJ,CAAW,CAAGD,CAAc,CAACM,MAAf,CAAsB,SAACC,CAAD,CAAQC,CAAR,CAAoB,CACpD,MAAOA,CAAAA,CAAO,EAAIL,CAAC,CAACM,MAAb,EAAuBD,CAAO,CAACE,QAAR,CAAiBP,CAAC,CAACM,MAAnB,CACjC,CAFa,CAGjB,CALD,IAKO,IAAIR,CAAJ,CAAiB,CAGpBA,CAAW,CAACjB,KAAZ,GACAiB,CAAW,CAAG,IACjB,CACJ,CAjBD,CAkBH,CAac,CAMXL,aAAa,CAAEA,CANJ,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Controls the drawer.\n *\n * @module core/drawer\n * @copyright 2019 Jun Pataleta \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport $ from 'jquery';\nimport * as PubSub from 'core/pubsub';\nimport DrawerEvents from 'core/drawer_events';\n\n/**\n * Show the drawer.\n *\n * @param {Object} root The drawer container.\n */\nconst show = (root) => {\n root.removeClass('hidden');\n root.attr('aria-expanded', true);\n root.attr('aria-hidden', false);\n root.focus();\n\n PubSub.publish(DrawerEvents.DRAWER_SHOWN, root);\n};\n\n/**\n * Hide the drawer.\n *\n * @param {Object} root The drawer container.\n */\nconst hide = (root) => {\n root.addClass('hidden');\n root.attr('aria-expanded', false);\n root.attr('aria-hidden', true);\n PubSub.publish(DrawerEvents.DRAWER_HIDDEN, root);\n};\n\n/**\n * Check if the drawer is visible.\n *\n * @param {Object} root The drawer container.\n * @return {boolean}\n */\nconst isVisible = (root) => {\n let isHidden = root.hasClass('hidden');\n return !isHidden;\n};\n\n/**\n * Toggle the drawer visibility.\n *\n * @param {Object} root The drawer container.\n */\nconst toggle = (root) => {\n if (isVisible(root)) {\n hide(root);\n } else {\n show(root);\n }\n};\n\n/**\n * Add event listeners to toggle the drawer.\n *\n * @param {Object} root The drawer container.\n * @param {Object} toggleElements The toggle elements.\n */\nconst registerToggles = (root, toggleElements) => {\n let openTrigger = null;\n toggleElements.attr('aria-expanded', isVisible(root));\n\n toggleElements.on('click', (e) => {\n e.preventDefault();\n const wasVisible = isVisible(root);\n toggle(root);\n toggleElements.attr('aria-expanded', !wasVisible);\n\n if (!wasVisible) {\n // Remember which trigger element opened the drawer.\n openTrigger = toggleElements.filter((index, element) => {\n return element == e.target || element.contains(e.target);\n });\n } else if (openTrigger) {\n // The drawer has gone from open to close so we need to set the focus back\n // to the element that openend it.\n openTrigger.focus();\n openTrigger = null;\n }\n });\n};\n\n/**\n * Find the root element of the drawer based on the using the drawer content root's ID.\n *\n * @param {Object} contentRoot The drawer content's root element.\n * @returns {*|jQuery}\n */\nconst getDrawerRoot = (contentRoot) => {\n contentRoot = $(contentRoot);\n return contentRoot.closest('[data-region=\"right-hand-drawer\"]');\n};\n\nexport default {\n hide: hide,\n show: show,\n isVisible: isVisible,\n toggle: toggle,\n registerToggles: registerToggles,\n getDrawerRoot: getDrawerRoot\n};\n"],"file":"drawer.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/drawer.js"],"names":["show","root","removeClass","attr","removeAttr","focus","PubSub","publish","DrawerEvents","DRAWER_SHOWN","hide","addClass","DRAWER_HIDDEN","isVisible","isHidden","hasClass","toggle","getDrawerRoot","contentRoot","closest","registerToggles","toggleElements","openTrigger","on","e","preventDefault","wasVisible","filter","index","element","target","contains"],"mappings":"+KAsBA,OACA,kUACA,O,sDAOMA,CAAAA,CAAI,CAAG,SAACC,CAAD,CAAU,CACnBA,CAAI,CAACC,WAAL,CAAiB,QAAjB,EACAD,CAAI,CAACE,IAAL,CAAU,eAAV,KACAF,CAAI,CAACG,UAAL,CAAgB,aAAhB,EACAH,CAAI,CAACI,KAAL,GAEAC,CAAM,CAACC,OAAP,CAAeC,UAAaC,YAA5B,CAA0CR,CAA1C,CACH,C,CAOKS,CAAI,CAAG,SAACT,CAAD,CAAU,CACnBA,CAAI,CAACU,QAAL,CAAc,QAAd,EACAV,CAAI,CAACE,IAAL,CAAU,eAAV,KACAF,CAAI,CAACE,IAAL,CAAU,aAAV,KACAG,CAAM,CAACC,OAAP,CAAeC,UAAaI,aAA5B,CAA2CX,CAA3C,CACH,C,CAQKY,CAAS,CAAG,SAACZ,CAAD,CAAU,CACxB,GAAIa,CAAAA,CAAQ,CAAGb,CAAI,CAACc,QAAL,CAAc,QAAd,CAAf,CACA,MAAO,CAACD,CACX,C,CAOKE,CAAM,CAAG,SAACf,CAAD,CAAU,CACrB,GAAIY,CAAS,CAACZ,CAAD,CAAb,CAAqB,CACjBS,CAAI,CAACT,CAAD,CACP,CAFD,IAEO,CACHD,CAAI,CAACC,CAAD,CACP,CACJ,C,CAsCKgB,CAAa,CAAG,SAACC,CAAD,CAAiB,CACnCA,CAAW,CAAG,cAAEA,CAAF,CAAd,CACA,MAAOA,CAAAA,CAAW,CAACC,OAAZ,CAAoB,qCAApB,CACV,C,WAEc,CACXT,IAAI,CAAEA,CADK,CAEXV,IAAI,CAAEA,CAFK,CAGXa,SAAS,CAAEA,CAHA,CAIXG,MAAM,CAAEA,CAJG,CAKXI,eAAe,CAxCK,QAAlBA,CAAAA,eAAkB,CAACnB,CAAD,CAAOoB,CAAP,CAA0B,CAC9C,GAAIC,CAAAA,CAAW,CAAG,IAAlB,CACAD,CAAc,CAAClB,IAAf,CAAoB,eAApB,CAAqCU,CAAS,CAACZ,CAAD,CAA9C,EAEAoB,CAAc,CAACE,EAAf,CAAkB,OAAlB,CAA2B,SAACC,CAAD,CAAO,CAC9BA,CAAC,CAACC,cAAF,GACA,GAAMC,CAAAA,CAAU,CAAGb,CAAS,CAACZ,CAAD,CAA5B,CACAe,CAAM,CAACf,CAAD,CAAN,CACAoB,CAAc,CAAClB,IAAf,CAAoB,eAApB,CAAqC,CAACuB,CAAtC,EAEA,GAAI,CAACA,CAAL,CAAiB,CAEbJ,CAAW,CAAGD,CAAc,CAACM,MAAf,CAAsB,SAACC,CAAD,CAAQC,CAAR,CAAoB,CACpD,MAAOA,CAAAA,CAAO,EAAIL,CAAC,CAACM,MAAb,EAAuBD,CAAO,CAACE,QAAR,CAAiBP,CAAC,CAACM,MAAnB,CACjC,CAFa,CAGjB,CALD,IAKO,IAAIR,CAAJ,CAAiB,CAGpBA,CAAW,CAACjB,KAAZ,GACAiB,CAAW,CAAG,IACjB,CACJ,CAjBD,CAkBH,CAac,CAMXL,aAAa,CAAEA,CANJ,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Controls the drawer.\n *\n * @module core/drawer\n * @copyright 2019 Jun Pataleta \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport $ from 'jquery';\nimport * as PubSub from 'core/pubsub';\nimport DrawerEvents from 'core/drawer_events';\n\n/**\n * Show the drawer.\n *\n * @param {Object} root The drawer container.\n */\nconst show = (root) => {\n root.removeClass('hidden');\n root.attr('aria-expanded', true);\n root.removeAttr('aria-hidden');\n root.focus();\n\n PubSub.publish(DrawerEvents.DRAWER_SHOWN, root);\n};\n\n/**\n * Hide the drawer.\n *\n * @param {Object} root The drawer container.\n */\nconst hide = (root) => {\n root.addClass('hidden');\n root.attr('aria-expanded', false);\n root.attr('aria-hidden', true);\n PubSub.publish(DrawerEvents.DRAWER_HIDDEN, root);\n};\n\n/**\n * Check if the drawer is visible.\n *\n * @param {Object} root The drawer container.\n * @return {boolean}\n */\nconst isVisible = (root) => {\n let isHidden = root.hasClass('hidden');\n return !isHidden;\n};\n\n/**\n * Toggle the drawer visibility.\n *\n * @param {Object} root The drawer container.\n */\nconst toggle = (root) => {\n if (isVisible(root)) {\n hide(root);\n } else {\n show(root);\n }\n};\n\n/**\n * Add event listeners to toggle the drawer.\n *\n * @param {Object} root The drawer container.\n * @param {Object} toggleElements The toggle elements.\n */\nconst registerToggles = (root, toggleElements) => {\n let openTrigger = null;\n toggleElements.attr('aria-expanded', isVisible(root));\n\n toggleElements.on('click', (e) => {\n e.preventDefault();\n const wasVisible = isVisible(root);\n toggle(root);\n toggleElements.attr('aria-expanded', !wasVisible);\n\n if (!wasVisible) {\n // Remember which trigger element opened the drawer.\n openTrigger = toggleElements.filter((index, element) => {\n return element == e.target || element.contains(e.target);\n });\n } else if (openTrigger) {\n // The drawer has gone from open to close so we need to set the focus back\n // to the element that openend it.\n openTrigger.focus();\n openTrigger = null;\n }\n });\n};\n\n/**\n * Find the root element of the drawer based on the using the drawer content root's ID.\n *\n * @param {Object} contentRoot The drawer content's root element.\n * @returns {*|jQuery}\n */\nconst getDrawerRoot = (contentRoot) => {\n contentRoot = $(contentRoot);\n return contentRoot.closest('[data-region=\"right-hand-drawer\"]');\n};\n\nexport default {\n hide: hide,\n show: show,\n isVisible: isVisible,\n toggle: toggle,\n registerToggles: registerToggles,\n getDrawerRoot: getDrawerRoot\n};\n"],"file":"drawer.min.js"} \ No newline at end of file diff --git a/lib/amd/src/drawer.js b/lib/amd/src/drawer.js index a24cd3031e5..3c776060802 100644 --- a/lib/amd/src/drawer.js +++ b/lib/amd/src/drawer.js @@ -32,7 +32,7 @@ import DrawerEvents from 'core/drawer_events'; const show = (root) => { root.removeClass('hidden'); root.attr('aria-expanded', true); - root.attr('aria-hidden', false); + root.removeAttr('aria-hidden'); root.focus(); PubSub.publish(DrawerEvents.DRAWER_SHOWN, root); diff --git a/lib/templates/drawer.mustache b/lib/templates/drawer.mustache index e21fd2f037f..4daa4dfd7e4 100644 --- a/lib/templates/drawer.mustache +++ b/lib/templates/drawer.mustache @@ -35,7 +35,7 @@ id="{{$drawerid}}drawer-{{uniqid}}{{/drawerid}}" class="{{$drawerclasses}}{{/drawerclasses}} drawer bg-white {{^show}}hidden{{/show}}" aria-expanded="{{#show}}true{{/show}}{{^show}}false{{/show}}" - aria-hidden="{{#show}}false{{/show}}{{^show}}true{{/show}}" + {{^show}}aria-hidden="true"{{/show}} data-region="right-hand-drawer" role="region" tabindex="-1"