MDL-67207 forum: Reset focus after closing grader

mod/forum/amd/build/local/layout/fullscreen.min.js

@@ -1,2 +1,2 @@
-define ("mod_forum/local/layout/fullscreen",["exports","core/loadingicon","core/toast","core/local/aria/focuslock"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.createLayout=void 0;d=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}}(d);var e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.fullscreen,e=void 0===b?!0:b,h=a.showLoader,i=void 0===h?!1:h,j=document.createElement("div");document.body.append(j);j.classList.add("layout");j.classList.add("fullscreen");j.setAttribute("aria-role","application");(0,c.addToastRegion)(j);g();d.trapFocus(j);var k=f(j,d);if(i){k.showLoadingIcon()}if(e){k.requestFullscreen()}return k},f=function(a,c){var d=document.createElement("div");a.append(d);var e=document.createElement("div");a.append(e);var f=function(){if(a.requestFullscreen){a.requestFullscreen()}else if(a.msRequestFullscreen){a.msRequestFullscreen()}else if(a.mozRequestFullscreen){a.mozRequestFullscreen()}else if(a.webkitRequestFullscreen){a.webkitRequestFullscreen()}else{a.setTop(0)}},g=function(){if(document.exitRequestFullScreen){if(document.fullScreenElement!==a){return}document.exitRequestFullScreen()}else if(document.msExitFullscreen){if(document.msFullscreenElement!==a){return}document.msExitFullscreen()}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement!==a){return}document.mozCancelFullScreen()}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement!==a){return}document.webkitExitFullscreen()}},i=function(){var a=e.lastElementChild;while(a){e.removeChild(a);a=e.lastElementChild}};return{close:function close(){g();h();c.untrapFocus();a.remove()},toggleFullscreen:function toggleFullscreen(){if(document.exitRequestFullScreen){if(document.fullScreenElement===a){g()}else{f()}}else if(document.msExitFullscreen){if(document.msFullscreenElement===a){g()}else{f()}}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement===a){g()}else{f()}}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement===a){g()}else{f()}}},requestFullscreen:f,exitFullscreen:g,getContainer:function getContainer(){return d},setContent:function setContent(a){i();var b=d.lastElementChild;while(b){d.removeChild(b);b=d.lastElementChild}d.append(a)},showLoadingIcon:function showLoadingIcon(){(0,b.addIconToContainer)(e)},hideLoadingIcon:i}},g=function(){document.querySelector("body").classList.add("overflow-hidden")},h=function(){document.querySelector("body").classList.remove("overflow-hidden")};a.createLayout=e});
+define ("mod_forum/local/layout/fullscreen",["exports","core/loadingicon","core/toast","core/local/aria/focuslock"],function(a,b,c,d){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.createLayout=void 0;d=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}}(d);var e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.fullscreen,e=void 0===b?!0:b,h=a.showLoader,i=void 0===h?!1:h,j=a.focusOnClose,k=void 0===j?null:j,l=document.createElement("div");document.body.append(l);l.classList.add("layout");l.classList.add("fullscreen");l.setAttribute("aria-role","application");(0,c.addToastRegion)(l);g();d.trapFocus(l);var m=f(l,d,k);if(i){m.showLoadingIcon()}if(e){m.requestFullscreen()}return m},f=function(a,c,d){var e=document.createElement("div");a.append(e);var f=document.createElement("div");a.append(f);var g=function(){if(a.requestFullscreen){a.requestFullscreen()}else if(a.msRequestFullscreen){a.msRequestFullscreen()}else if(a.mozRequestFullscreen){a.mozRequestFullscreen()}else if(a.webkitRequestFullscreen){a.webkitRequestFullscreen()}else{a.setTop(0)}},i=function(){if(document.exitRequestFullScreen){if(document.fullScreenElement!==a){return}document.exitRequestFullScreen()}else if(document.msExitFullscreen){if(document.msFullscreenElement!==a){return}document.msExitFullscreen()}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement!==a){return}document.mozCancelFullScreen()}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement!==a){return}document.webkitExitFullscreen()}},j=function(){var a=f.lastElementChild;while(a){f.removeChild(a);a=f.lastElementChild}};return{close:function close(){i();h();c.untrapFocus();a.remove();if(d){try{d.focus()}catch(a){}}},toggleFullscreen:function toggleFullscreen(){if(document.exitRequestFullScreen){if(document.fullScreenElement===a){i()}else{g()}}else if(document.msExitFullscreen){if(document.msFullscreenElement===a){i()}else{g()}}else if(document.mozCancelFullScreen){if(document.mozFullScreenElement===a){i()}else{g()}}else if(document.webkitExitFullscreen){if(document.webkitFullscreenElement===a){i()}else{g()}}},requestFullscreen:g,exitFullscreen:i,getContainer:function getContainer(){return e},setContent:function setContent(a){j();var b=e.lastElementChild;while(b){e.removeChild(b);b=e.lastElementChild}e.append(a)},showLoadingIcon:function showLoadingIcon(){(0,b.addIconToContainer)(f)},hideLoadingIcon:j}},g=function(){document.querySelector("body").classList.add("overflow-hidden")},h=function(){document.querySelector("body").classList.remove("overflow-hidden")};a.createLayout=e});
 //# sourceMappingURL=fullscreen.min.js.map

mod/forum/amd/src/grades/grader.js

@@ -114,7 +114,9 @@ const discussionPostMapper = (discussion) => {
  *
  * @param {HTMLElement} rootNode the root HTML element describing what is to be graded
  */
-const launchWholeForumGrading = async(rootNode) => {
+const launchWholeForumGrading = async(rootNode, {
+    focusOnClose = null,
+} = {}) => {
     const data = rootNode.dataset;
     const gradingPanelFunctions = await Grader.getGradingPanelFunctions(
         'mod_forum',
@@ -138,6 +140,7 @@ const launchWholeForumGrading = async(rootNode) => {
             courseName: data.courseName,
             courseUrl: relativeUrl('/course/view.php', {id: data.courseId}),
             sendStudentNotifications: data.sendStudentNotifications,
+            focusOnClose,
         }
     );
 };
@@ -181,7 +184,9 @@ export const registerLaunchListeners = () => {
                 // at that point and the default action is implemented.
                 e.preventDefault();
                 try {
-                    await launchWholeForumGrading(rootNode);
+                    await launchWholeForumGrading(rootNode, {
+                        focusOnClose: e.target,
+                    });
                 } catch (error) {
                     Notification.exception(error);
                 }

mod/forum/amd/src/local/grades/grader.js

@@ -191,7 +191,7 @@ const searchForUsers = (userList, searchTerm) => {
  * @param {HTMLElement} searchResultsContainer The container element for search results
  * @param {Array} users The list of users to display
  */
-const renderSearchResults = async (searchResultsContainer, users) => {
+const renderSearchResults = async(searchResultsContainer, users) => {
     const {html, js} = await Templates.renderForPromise(templateNames.grader.searchResults, {users});
     Templates.replaceNodeContents(searchResultsContainer, html, js);
 };
@@ -329,10 +329,15 @@ const displayGradingError = async(root, user, err) => {
  * @param {Function} getContentForUser A function to get the content for a specific user
  * @param {Function} getGradeForUser A function get the grade details for a specific user
  * @param {Function} setGradeForUser A function to set the grade for a specific user
- * @param
+ * @param {Object} Preferences for the launch function
  */
 export const launch = async(getListOfUsers, getContentForUser, getGradeForUser, setGradeForUser, {
-    initialUserId = null, moduleName, courseName, courseUrl, sendStudentNotifications
+    initialUserId = null,
+    moduleName,
+    courseName,
+    courseUrl,
+    sendStudentNotifications,
+    focusOnClose = null,
 } = {}) => {
 
     // We need all of these functions to be executed in series, if one step runs before another the interface
@@ -342,8 +347,11 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
         {html, js},
         userList,
     ] = await Promise.all([
-        createFullScreenWindow({fullscreen: false, showLoader: false}),
-
+        createFullScreenWindow({
+            fullscreen: false,
+            showLoader: false,
+            focusOnClose,
+        }),
         Templates.renderForPromise(templateNames.grader.app, {
             moduleName,
             courseName,
@@ -395,6 +403,7 @@ export const launch = async(getListOfUsers, getContentForUser, getGradeForUser,
  *
  * @param {Function} getGradeForUser A function get the grade details for a specific user
  * @param {Number} userid The ID of a specific user
+ * @param {String} moduleName the name of the module
  */
 export const view = async(getGradeForUser, userid, moduleName) => {
 

mod/forum/amd/src/local/layout/fullscreen.js

@@ -32,6 +32,7 @@ import * as FocusLockManager from 'core/local/aria/focuslock';
 const getComposedLayout = ({
     fullscreen = true,
     showLoader = false,
+    focusOnClose = null,
 } = {}) => {
     const container = document.createElement('div');
     document.body.append(container);
@@ -46,7 +47,7 @@ const getComposedLayout = ({
     // Lock tab control.
     FocusLockManager.trapFocus(container);
 
-    const helpers = getLayoutHelpers(container, FocusLockManager);
+    const helpers = getLayoutHelpers(container, FocusLockManager, focusOnClose);
 
     if (showLoader) {
         helpers.showLoadingIcon();
@@ -59,7 +60,7 @@ const getComposedLayout = ({
     return helpers;
 };
 
-const getLayoutHelpers = (layoutNode, FocusLockManager) => {
+const getLayoutHelpers = (layoutNode, FocusLockManager, focusOnClose) => {
     const contentNode = document.createElement('div');
     layoutNode.append(contentNode);
 
@@ -75,6 +76,14 @@ const getLayoutHelpers = (layoutNode, FocusLockManager) => {
         FocusLockManager.untrapFocus();
 
         layoutNode.remove();
+
+        if (focusOnClose) {
+            try {
+                focusOnClose.focus();
+            } catch (e) {
+                // eslint-disable-line
+            }
+        }
     };
 
     /**