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

diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js
index 7eb4cbd..51468f9 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js and b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js differ

diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map
index 3c17998..e59ddf6 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map and b/mod/forum/amd/build/local/grades/local/grader/user_picker.min.js.map differ

diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js b/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js
index 99f20c9..df7e533 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js and b/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js differ

diff --git a/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js.map b/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js.map
index 9c9dddc..da9f5c8 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js.map and b/mod/forum/amd/build/local/grades/local/grader/user_picker/selectors.min.js.map differ

diff --git a/mod/forum/amd/src/local/grades/local/grader/user_picker.js b/mod/forum/amd/src/local/grades/local/grader/user_picker.js
index e094674..ba209a4 100644 (file)
--- a/mod/forum/amd/src/local/grades/local/grader/user_picker.js
+++ b/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);
     }
 
     /**

diff --git a/mod/forum/amd/src/local/grades/local/grader/user_picker/selectors.js b/mod/forum/amd/src/local/grades/local/grader/user_picker/selectors.js
index 035240f..0ef8405 100644 (file)
--- a/mod/forum/amd/src/local/grades/local/grader/user_picker/selectors.js
+++ b/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: {

diff --git a/mod/forum/lang/en/forum.php b/mod/forum/lang/en/forum.php
index ae4692a..bd5bf8e 100644 (file)
--- a/mod/forum/lang/en/forum.php
+++ b/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}';

diff --git a/mod/forum/templates/local/grades/local/grader/user_picker.mustache b/mod/forum/templates/local/grades/local/grader/user_picker.mustache
index d81753c..43b5386 100644 (file)
--- a/mod/forum/templates/local/grades/local/grader/user_picker.mustache
+++ b/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>

diff --git a/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache b/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
index 144f2e9..ef04cfe 100644 (file)
--- a/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
+++ b/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}}"
-    title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
+    aria-hidden="true"
 >
 {{/profileimage}}
 <div>