Merge branch 'MDL-70792-311-2' of https://github.com/junpataleta/moodle into MOODLE_311_STABLE

lib/outputcomponents.php

@@ -4321,6 +4321,7 @@ class action_menu implements renderable, templatable {
     public function add_primary_action($action) {
         if ($action instanceof action_link || $action instanceof pix_icon) {
             $action->attributes['role'] = 'menuitem';
+            $action->attributes['tabindex'] = '-1';
             if ($action instanceof action_menu_link) {
                 $action->actionmenu = $this;
             }
@@ -4336,6 +4337,7 @@ class action_menu implements renderable, templatable {
     public function add_secondary_action($action) {
         if ($action instanceof action_link || $action instanceof pix_icon) {
             $action->attributes['role'] = 'menuitem';
+            $action->attributes['tabindex'] = '-1';
             if ($action instanceof action_menu_link) {
                 $action->actionmenu = $this;
             }
@@ -4393,7 +4395,8 @@ class action_menu implements renderable, templatable {
             'title' => $title,
             'aria-label' => $label,
             'id' => 'action-menu-toggle-'.$this->instance,
-            'role' => 'menuitem'
+            'role' => 'menuitem',
+            'tabindex' => '-1',
         );
         $link = html_writer::link('#', $string . $this->menutrigger . $pixicon, $attributes);
         if ($this->prioritise) {

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

@@ -5,6 +5,6 @@ define("theme_boost/aria",["exports","jquery","core/pending"],(function(_exports
    * @module     theme_boost/aria
    * @copyright  2018 Damyon Wiese <damyon@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);var dropdownFix=function(){var focusEnd=!1;document.addEventListener("keydown",(function(e){if(e.target.matches('[data-toggle="dropdown"]')){var trigger=e.key;"ArrowUp"==trigger&&(focusEnd=!0)," "!=trigger&&"Enter"!=trigger||(e.preventDefault(),e.target.click())}}));var shiftFocus=function(element){setTimeout((function(pendingPromise){element.focus(),pendingPromise.resolve()}),50,new _pending.default("core/aria:delayed-focus"))};(0,_jquery.default)(".dropdown").on("shown.bs.dropdown",(function(e){var result,menu=e.target.querySelector('[role="menu"]'),menuItems=!1,foundMenuItem=!1;menu&&(menuItems=menu.querySelectorAll('[role="menuitem"]')),menuItems&&menuItems.length>0&&(result=focusEnd,focusEnd=!1,foundMenuItem=result?menuItems[menuItems.length-1]:menuItems[0]),foundMenuItem&&shiftFocus(foundMenuItem)})),document.addEventListener("keypress",(function(e){if(e.target.matches('.dropdown [role="menu"] [role="menuitem"]')){var menu=e.target.closest('[role="menu"]');if(!menu)return;var menuItems=menu.querySelectorAll('[role="menuitem"]');if(!menuItems)return;for(var trigger=e.key.toLowerCase(),i=0;i<menuItems.length;i++){var item=menuItems[i];if(0==item.text.trim().toLowerCase().indexOf(trigger)){shiftFocus(item);break}}}})),document.addEventListener("keydown",(function(e){if(e.target.matches('.dropdown [role="menu"] [role="menuitem"]')){var trigger=e.key,next=!1,menu=e.target.closest('[role="menu"]');if(!menu)return;var menuItems=menu.querySelectorAll('[role="menuitem"]');if(!menuItems)return;if("ArrowDown"==trigger){for(var i=0;i<menuItems.length-1;i++)if(menuItems[i]==e.target){next=menuItems[i+1];break}next||(next=menuItems[0])}else if("ArrowUp"==trigger){for(var _i=1;_i<menuItems.length;_i++)if(menuItems[_i]==e.target){next=menuItems[_i-1];break}next||(next=menuItems[menuItems.length-1])}else"Home"==trigger?next=menuItems[0]:"End"==trigger&&(next=menuItems[menuItems.length-1]);next&&(e.preventDefault(),shiftFocus(next))}else;})),(0,_jquery.default)(".dropdown").on("hidden.bs.dropdown",(function(e){var trigger=e.target.querySelector('[data-toggle="dropdown"]');trigger&&shiftFocus(trigger)}))},tabElementFix=function(){document.addEventListener("keydown",(function(e){["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","Enter"," "].includes(e.key)&&e.target.matches('[role="tablist"] [role="tab"]')&&function(e){for(var tabList=e.target.closest('[role="tablist"]'),vertical="vertical"==tabList.getAttribute("aria-orientation"),rtl=window.right_to_left(),arrowNext=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",arrowPrevious=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft",tabs=Array.prototype.filter.call(tabList.querySelectorAll('[role="tab"]'),(function(tab){return"none"!==getComputedStyle(tab).display})),i=0;i<tabs.length;i++)tabs[i].index=i;switch(e.key){case arrowNext:e.preventDefault(),void 0!==e.target.index&&tabs[e.target.index+1]?tabs[e.target.index+1].focus():tabs[0].focus();break;case arrowPrevious:e.preventDefault(),void 0!==e.target.index&&tabs[e.target.index-1]?tabs[e.target.index-1].focus():tabs[tabs.length-1].focus();break;case"Home":e.preventDefault(),tabs[0].focus();break;case"End":e.preventDefault(),tabs[tabs.length-1].focus();break;case"Enter":case" ":e.preventDefault(),(0,_jquery.default)(e.target).tab("show"),tabs.forEach((function(tab){tab.tabIndex=-1})),e.target.tabIndex=0}}(e)})),document.addEventListener("click",(function(e){if(e.target.matches('[role="tablist"] [role="tab"]')){var tabs=e.target.closest('[role="tablist"]').querySelectorAll('[role="tab"]');e.preventDefault(),(0,_jquery.default)(e.target).tab("show"),tabs.forEach((function(tab){tab.tabIndex=-1})),e.target.tabIndex=0}}))};_exports.init=function(){dropdownFix(),window.addEventListener("load",(function(){var alerts=document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');Array.prototype.forEach.call(alerts,(function(autofocusElement){autofocusElement.innerHTML+=" ",autofocusElement.removeAttribute("data-aria-autofocus")}))})),tabElementFix()}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);var dropdownFix=function(){var focusEnd=!1,focusBackToTrigger=!0,setFocusEnd=function(){var end=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];focusEnd=end},shiftFocus=function(element){setTimeout((function(pendingPromise){element.focus(),pendingPromise.resolve()}),50,new _pending.default("core/aria:delayed-focus"))},handleMenuButton=function(e){var trigger=e.key,fixFocus=!1;if(" "!==trigger&&"Enter"!==trigger||(fixFocus=!0,e.preventDefault(),e.target.click()),"ArrowUp"!==trigger&&"ArrowDown"!==trigger||(fixFocus=!0),"Tab"===trigger&&(focusBackToTrigger=!1),fixFocus){var result,menu=e.target.parentElement.querySelector('[role="menu"]'),menuItems=!1,foundMenuItem=!1;menu&&(menuItems=menu.querySelectorAll('[role="menuitem"]')),menuItems&&menuItems.length>0&&("ArrowUp"===trigger?setFocusEnd():setFocusEnd(!1),result=focusEnd,focusEnd=!1,foundMenuItem=result?menuItems[menuItems.length-1]:menuItems[0]),foundMenuItem&&shiftFocus(foundMenuItem)}};document.addEventListener("keypress",(function(e){if(e.target.matches('.dropdown [role="menu"] [role="menuitem"]')){var menu=e.target.closest('[role="menu"]');if(!menu)return;var menuItems=menu.querySelectorAll('[role="menuitem"]');if(!menuItems)return;for(var trigger=e.key.toLowerCase(),i=0;i<menuItems.length;i++){var item=menuItems[i];if(0==item.text.trim().toLowerCase().indexOf(trigger)){shiftFocus(item);break}}}})),document.addEventListener("keydown",(function(e){if(e.target.matches('[data-toggle="dropdown"]')&&handleMenuButton(e),e.target.matches('.dropdown [role="menu"] [role="menuitem"]')){var trigger=e.key,next=!1,menu=e.target.closest('[role="menu"]');if(!menu)return;var menuItems=menu.querySelectorAll('[role="menuitem"]');if(!menuItems)return;if("ArrowDown"==trigger){for(var i=0;i<menuItems.length-1;i++)if(menuItems[i]==e.target){next=menuItems[i+1];break}next||(next=menuItems[0])}else if("ArrowUp"==trigger){for(var _i=1;_i<menuItems.length;_i++)if(menuItems[_i]==e.target){next=menuItems[_i-1];break}next||(next=menuItems[menuItems.length-1])}else"Home"==trigger?next=menuItems[0]:"End"==trigger?next=menuItems[menuItems.length-1]:"Tab"==trigger&&(focusBackToTrigger=!1);next&&(e.preventDefault(),shiftFocus(next))}else;})),(0,_jquery.default)(".dropdown").on("hidden.bs.dropdown",(function(e){var trigger=e.target.querySelector('[data-toggle="dropdown"]');trigger&&focusBackToTrigger&&shiftFocus(trigger),focusBackToTrigger=!0}))},tabElementFix=function(){document.addEventListener("keydown",(function(e){["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","Enter"," "].includes(e.key)&&e.target.matches('[role="tablist"] [role="tab"]')&&function(e){for(var tabList=e.target.closest('[role="tablist"]'),vertical="vertical"==tabList.getAttribute("aria-orientation"),rtl=window.right_to_left(),arrowNext=vertical?"ArrowDown":rtl?"ArrowLeft":"ArrowRight",arrowPrevious=vertical?"ArrowUp":rtl?"ArrowRight":"ArrowLeft",tabs=Array.prototype.filter.call(tabList.querySelectorAll('[role="tab"]'),(function(tab){return"none"!==getComputedStyle(tab).display})),i=0;i<tabs.length;i++)tabs[i].index=i;switch(e.key){case arrowNext:e.preventDefault(),void 0!==e.target.index&&tabs[e.target.index+1]?tabs[e.target.index+1].focus():tabs[0].focus();break;case arrowPrevious:e.preventDefault(),void 0!==e.target.index&&tabs[e.target.index-1]?tabs[e.target.index-1].focus():tabs[tabs.length-1].focus();break;case"Home":e.preventDefault(),tabs[0].focus();break;case"End":e.preventDefault(),tabs[tabs.length-1].focus();break;case"Enter":case" ":e.preventDefault(),(0,_jquery.default)(e.target).tab("show"),tabs.forEach((function(tab){tab.tabIndex=-1})),e.target.tabIndex=0}}(e)})),document.addEventListener("click",(function(e){if(e.target.matches('[role="tablist"] [role="tab"]')){var tabs=e.target.closest('[role="tablist"]').querySelectorAll('[role="tab"]');e.preventDefault(),(0,_jquery.default)(e.target).tab("show"),tabs.forEach((function(tab){tab.tabIndex=-1})),e.target.tabIndex=0}}))};_exports.init=function(){dropdownFix(),window.addEventListener("load",(function(){var alerts=document.querySelectorAll('[data-aria-autofocus="true"][role="alert"]');Array.prototype.forEach.call(alerts,(function(autofocusElement){autofocusElement.innerHTML+=" ",autofocusElement.removeAttribute("data-aria-autofocus")}))})),tabElementFix()}}));
 
 //# sourceMappingURL=aria.min.js.map

theme/boost/amd/src/aria.js

@@ -29,8 +29,9 @@ import Pending from 'core/pending';
  */
 const dropdownFix = () => {
     let focusEnd = false;
-    const setFocusEnd = () => {
-        focusEnd = true;
+    let focusBackToTrigger = true;
+    const setFocusEnd = (end = true) => {
+        focusEnd = end;
     };
     const getFocusEnd = () => {
         const result = focusEnd;
@@ -38,27 +39,6 @@ const dropdownFix = () => {
         return result;
     };
 
-    // Special handling for "up" keyboard control.
-    document.addEventListener('keydown', e => {
-        if (e.target.matches('[data-toggle="dropdown"]')) {
-            const trigger = e.key;
-
-            // Up key opens the menu at the end.
-            if (trigger == 'ArrowUp') {
-                // Focus the end of the menu, not the beginning.
-                setFocusEnd();
-            }
-
-            // Space key or Enter key opens the menu.
-            if (trigger == ' ' || trigger == 'Enter') {
-                // Cancel random scroll.
-                e.preventDefault();
-                // Open the menu instead.
-                e.target.click();
-            }
-        }
-    });
-
     // Special handling for navigation keys when menu is open.
     const shiftFocus = element => {
         const delayedFocus = pendingPromise => {
@@ -68,9 +48,37 @@ const dropdownFix = () => {
         setTimeout(delayedFocus, 50, new Pending('core/aria:delayed-focus'));
     };
 
-    $('.dropdown').on('shown.bs.dropdown', e => {
-        // We need to focus on the first menuitem.
-        const menu = e.target.querySelector('[role="menu"]');
+    // Event handling for the dropdown menu button.
+    const handleMenuButton = e => {
+        const trigger = e.key;
+        let fixFocus = false;
+
+        // Space key or Enter key opens the menu.
+        if (trigger === ' ' || trigger === 'Enter') {
+            fixFocus = true;
+            // Cancel random scroll.
+            e.preventDefault();
+            // Open the menu instead.
+            e.target.click();
+        }
+
+        // Up and Down keys also open the menu.
+        if (trigger === 'ArrowUp' || trigger === 'ArrowDown') {
+            fixFocus = true;
+        }
+
+        // Pressing tab on the menu button should focus on the next element in the DOM and not back to the menu trigger.
+        if (trigger === 'Tab') {
+            focusBackToTrigger = false;
+        }
+
+        if (!fixFocus) {
+            // No need to fix the focus. Return early.
+            return;
+        }
+
+        // Fix the focus on the menu items when the menu is opened.
+        const menu = e.target.parentElement.querySelector('[role="menu"]');
         let menuItems = false;
         let foundMenuItem = false;
 
@@ -78,6 +86,13 @@ const dropdownFix = () => {
             menuItems = menu.querySelectorAll('[role="menuitem"]');
         }
         if (menuItems && menuItems.length > 0) {
+            // Up key opens the menu at the end.
+            if (trigger === 'ArrowUp') {
+                setFocusEnd();
+            } else {
+                setFocusEnd(false);
+            }
+
             if (getFocusEnd()) {
                 foundMenuItem = menuItems[menuItems.length - 1];
             } else {
@@ -85,10 +100,12 @@ const dropdownFix = () => {
                 foundMenuItem = menuItems[0];
             }
         }
+
         if (foundMenuItem) {
             shiftFocus(foundMenuItem);
         }
-    });
+    };
+
     // Search for menu items by finding the first item that has
     // text starting with the typed character (case insensitive).
     document.addEventListener('keypress', e => {
@@ -117,6 +134,13 @@ const dropdownFix = () => {
 
     // Keyboard navigation for arrow keys, home and end keys.
     document.addEventListener('keydown', e => {
+
+        // We only want to set focus when users access the dropdown via keyboard as per
+        // guidelines defined in w3 aria practices 1.1 menu-button.
+        if (e.target.matches('[data-toggle="dropdown"]')) {
+            handleMenuButton(e);
+        }
+
         if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
             const trigger = e.key;
             let next = false;
@@ -162,7 +186,11 @@ const dropdownFix = () => {
             } else if (trigger == 'End') {
                 // End key.
                 next = menuItems[menuItems.length - 1];
+            } else if (trigger == 'Tab') {
+                // Pressing tab in the menu should focus on the next element in the DOM and not back to the menu trigger.
+                focusBackToTrigger = false;
             }
+
             // Variable next is set if we do want to act on the keypress.
             if (next) {
                 e.preventDefault();
@@ -175,9 +203,11 @@ const dropdownFix = () => {
     $('.dropdown').on('hidden.bs.dropdown', e => {
         // We need to focus on the menu trigger.
         const trigger = e.target.querySelector('[data-toggle="dropdown"]');
-        if (trigger) {
+        if (trigger && focusBackToTrigger) {
             shiftFocus(trigger);
         }
+        // Reset flag to focus back to the menu trigger.
+        focusBackToTrigger = true;
     });
 };
 

theme/boost/scss/moodle/core.scss

@@ -2363,6 +2363,9 @@ $footer-link-color: $bg-inverse-link-color !default;
         display: block;
         width: 100%;
         color: $body-color;
+        &:focus-visible {
+            outline: 0;
+        }
     }
     &:active,
     &:hover,

theme/boost/style/moodle.css

@@ -11560,6 +11560,8 @@ ul {
   display: block;
   width: 100%;
   color: #1d2125; }
+  .dropdown-item a:focus-visible {
+    outline: 0; }
 
 .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
   outline: 0;

theme/classic/style/moodle.css

@@ -11778,6 +11778,8 @@ ul {
   display: block;
   width: 100%;
   color: #1d2125; }
+  .dropdown-item a:focus-visible {
+    outline: 0; }
 
 .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
   outline: 0;