MDL-67663 mod_forum: Make user switching more accessible

* Add a more descriptive label for the next and previous buttons so that
the users would know that clicking on the next or previous buttons will
save the changes they made before proceeding to the next user.
* Add an sr-only div with aria-live to the user picker to let the grader
know the current user that is being graded.
* Hide the user picture from screen readers

mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js

@@ -1,2 +1,2 @@
-define ("mod_forum/local/grades/local/grader/user_picker/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={regions:{userRegion:"[data-region=\"user_picker/user\"]"},actions:{changeUser:"[data-action=\"change-user\"]"}};return a.default});
+define ("mod_forum/local/grades/local/grader/user_picker/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.default={regions:{currentUser:"[data-region=\"user_picker/current_user\"]",userRegion:"[data-region=\"user_picker/user\"]"},actions:{changeUser:"[data-action=\"change-user\"]"}};return a.default});
 //# sourceMappingURL=selectors.min.js.map

mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/local/grades/local/grader/user_picker/selectors.js"],"names":["regions","userRegion","actions","changeUser"],"mappings":"qLAwBe,CACXA,OAAO,CAAE,CACLC,UAAU,CAAE,oCADP,CADE,CAIXC,OAAO,CAAE,CACLC,UAAU,CAAE,+BADP,CAJE,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 <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the grading interface.\n *\n * @module     mod_forum/local/grades/local/grader/user_picker/selectors\n * @package    mod_forum\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    regions: {\n        userRegion: '[data-region=\"user_picker/user\"]',\n    },\n    actions: {\n        changeUser: '[data-action=\"change-user\"]',\n    }\n};\n\n"],"file":"selectors.min.js"}
+{"version":3,"sources":["../../../../../../src/local/grades/local/grader/user_picker/selectors.js"],"names":["regions","currentUser","userRegion","actions","changeUser"],"mappings":"qLAwBe,CACXA,OAAO,CAAE,CACLC,WAAW,CAAE,4CADR,CAELC,UAAU,CAAE,oCAFP,CADE,CAKXC,OAAO,CAAE,CACLC,UAAU,CAAE,+BADP,CALE,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 <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the grading interface.\n *\n * @module     mod_forum/local/grades/local/grader/user_picker/selectors\n * @package    mod_forum\n * @copyright  2019 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    regions: {\n        currentUser: '[data-region=\"user_picker/current_user\"]',\n        userRegion: '[data-region=\"user_picker/user\"]',\n    },\n    actions: {\n        changeUser: '[data-action=\"change-user\"]',\n    }\n};\n\n"],"file":"selectors.min.js"}

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

@@ -24,6 +24,7 @@
 
 import Templates from 'core/templates';
 import Selectors from './user_picker/selectors';
+import {get_string as getString} from 'core/str';
 
 const templatePath = 'mod_forum/local/grades/local/grader';
 
@@ -111,6 +112,10 @@ class UserPicker {
         const [{html, js}] = await Promise.all([this.renderUserChange(user), this.showUserCallback(user)]);
         const userRegion = this.root.querySelector(Selectors.regions.userRegion);
         Templates.replaceNodeContents(userRegion, html, js);
+
+        // Update the hidden now-grading region so screen readers can announce the user that's currently being graded.
+        const currentUserRegion = this.root.querySelector(Selectors.regions.currentUser);
+        currentUserRegion.textContent = await getString('nowgradinguser', 'mod_forum', user.fullname);
     }
 
     /**

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

@@ -24,6 +24,7 @@
 
 export default {
     regions: {
+        currentUser: '[data-region="user_picker/current_user"]',
         userRegion: '[data-region="user_picker/user"]',
     },
     actions: {

mod/forum/lang/en/forum.php

@@ -443,7 +443,7 @@ $string['namenews_help'] = 'The course announcements forum is a special forum fo
 $string['namesocial'] = 'Social forum';
 $string['nameteacher'] = 'Teacher forum';
 $string['nextdiscussiona'] = 'Next discussion: {$a}';
-$string['nextuser'] = 'Next user';
+$string['nextuser'] = 'Save changes and proceed to the next user';
 $string['newforumposts'] = 'New forum posts';
 $string['noattachments'] = 'There are no attachments to this post';
 $string['nodiscussions'] = 'There are no discussion topics yet in this forum';
@@ -522,7 +522,7 @@ $string['poststo'] = 'Posts to';
 $string['posttoforum'] = 'Post to forum';
 $string['postupdated'] = 'Your post was updated';
 $string['potentialsubscribers'] = 'Potential subscribers';
-$string['previoususer'] = 'Previous user';
+$string['previoususer'] = 'Save changes and proceed to the previous user';
 $string['privacy:digesttypenone'] = 'We do not hold any data relating to a preferred forum digest type for this forum.';
 $string['privacy:digesttypepreference'] = 'You have chosen to receive the following forum digest type: "{$a->type}".';
 $string['privacy:discussionsubscriptionpreference'] = 'You have chosen the following discussion subscription preference for this forum: "{$a->preference}"';
@@ -750,6 +750,7 @@ $string['gradeusers'] = 'Grade users';
 $string['graded'] = 'Graded';
 $string['gradedby'] = 'Graded by';
 $string['notgraded'] = 'Not graded';
+$string['nowgradinguser'] = 'Now grading {$a}';
 $string['gradeforrating'] = 'Grade for rating: {$a->str_long_grade}';
 $string['gradeforratinghidden'] = 'Grade for rating hidden';
 $string['gradeforwholeforum'] = 'Grade for forum: {$a->str_long_grade}';

mod/forum/templates/local/grades/local/grader/user_picker.mustache

@@ -36,35 +36,36 @@
 }}
 
 <div class="d-flex align-items-center user-picker-container mb-2 py-2">
+    <div aria-live="polite" data-region="user_picker/current_user"  class="sr-only"></div>
     <div class="d-flex align-items-center" data-region="user_picker/user"></div>
     <div class="ml-auto flex-shrink-0">
         <nav aria-label="{{#str}} usernavigation, mod_forum {{/str}}">
             <ul class="pagination mb-0">
                 <li class="page-item">
-                    <a
+                    <button
                         class="page-link icon-no-margin p-0 text-reset icon-size-3"
                         href="#"
-                        aria-label="{{#str}} previous {{/str}}"
+                        aria-label="{{#str}} previoususer, mod_forum {{/str}}"
                         data-action="change-user"
                         data-direction="-1"
                         title="{{#str}} previoususer, mod_forum {{/str}}"
                     >
                         <span class="dir-ltr-hide">{{#pix}} i/next, core {{/pix}}</span>
                         <span class="dir-rtl-hide">{{#pix}} i/previous, core {{/pix}}</span>
-                    </a>
+                    </button>
                 </li>
                 <li class="page-item">
-                    <a
+                    <button
                         class="page-link icon-no-margin p-0 text-reset icon-size-3 ml-2"
                         href="#"
-                        aria-label="{{#str}} next {{/str}}"
+                        aria-label="{{#str}} nextuser, mod_forum {{/str}}"
                         data-action="change-user"
                         data-direction="1"
                         title="{{#str}} nextuser, mod_forum {{/str}}"
                     >
                         <span class="dir-ltr-hide">{{#pix}} i/previous, core {{/pix}}</span>
                         <span class="dir-rtl-hide">{{#pix}} i/next, core {{/pix}}</span>
-                    </a>
+                    </button>
                 </li>
             </ul>
         </nav>

mod/forum/templates/local/grades/local/grader/user_picker/user.mustache

@@ -42,8 +42,7 @@
 <img
     class="rounded-circle userpicture mr-2"
     src="{{.}}"
-    alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
+    aria-hidden="true"
-    title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
 >
 {{/profileimage}}
 <div>