MDL-75837 gradebook: accessibility improvements

grade/amd/src/searchwidget/basewidget.js

@@ -22,7 +22,6 @@
  */
 import {debounce} from 'core/utils';
 import * as Templates from 'core/templates';
-import {comboBox} from 'core/aria';
 import * as Selectors from 'core_grades/searchwidget/selectors';
 import Notification from 'core/notification';
 
@@ -69,6 +68,8 @@ export const init = async(widgetContentContainer, bodyPromise, data, searchFunc,
 export const registerListenerEvents = (widgetContentContainer, data, searchFunc) => {
     const searchResultsContainer = widgetContentContainer.querySelector(Selectors.regions.searchResults);
     const searchInput = widgetContentContainer.querySelector(Selectors.actions.search);
+    // We want to focus on the first known user interable element within the dropdown.
+    searchInput.focus();
     const clearSearchButton = widgetContentContainer.querySelector(Selectors.actions.clearSearch);
 
     // The search input is triggered.
@@ -108,9 +109,6 @@ export const registerListenerEvents = (widgetContentContainer, data, searchFunc)
             )
         );
     });
-
-    // Trigger event handling for the results in line with aria guidelines.
-    comboBox(searchInput);
 };
 
 /**

grade/classes/external/get_enrolled_users_for_search_widget.php

@@ -105,6 +105,7 @@ public static function execute(int $courseid, string $actionbaseurl, ?int $group
             $userpicture->size = 1;
             $user->profileimage = $userpicture->get_url($PAGE)->out(false);
             $user->email = $guiuser->email;
+            $user->active = false; // @TODO MDL-76246
 
             $users[] = $user;
         }
@@ -151,6 +152,7 @@ public static function user_description(): \external_description {
                 core_user::get_property_type('email'),
                 'An email address - allow email as root@localhost',
                 VALUE_OPTIONAL),
+            'active' => new external_value(PARAM_BOOL, 'Are we currently on this item?', VALUE_REQUIRED)
         ];
         return new external_single_structure($userfields);
     }

grade/classes/external/get_groups_for_search_widget.php

@@ -116,8 +116,10 @@ protected static function execute(int $courseid, string $actionbaseurl): array {
                     'group' => $group->id
                 ]);
                 return (object) [
+                    'id' => $group->id,
                     'name' => $group->name,
                     'url' => $url->out(false),
+                    'active' => false // @TODO MDL-76246
                 ];
             }, $groupsmenu);
         }
@@ -147,8 +149,10 @@ public static function execute_returns(): external_single_structure {
      */
     public static function group_description(): external_description {
         $groupfields = [
+            'id' => new external_value(PARAM_ALPHANUM, 'An ID for the group', VALUE_REQUIRED),
             'url' => new external_value(PARAM_URL, 'The link that applies the group action', VALUE_REQUIRED),
             'name' => new external_value(PARAM_TEXT, 'The full name of the group', VALUE_REQUIRED),
+            'active' => new external_value(PARAM_BOOL, 'Are we currently on this item?', VALUE_REQUIRED)
         ];
         return new external_single_structure($groupfields);
     }

grade/report/singleview/classes/external/singleview.php

@@ -85,7 +85,7 @@ protected static function get_grade_items_for_search_widget(int $courseid): arra
 
         $gradeitems = array_map(function ($gradeitem) use ($PAGE, $USER, $params) {
             $item = new \stdClass();
-            $item->gid = $gradeitem->id;
+            $item->id = $gradeitem->id;
             $url = new moodle_url('/grade/report/singleview/index.php', [
                     'id' => $params['courseid'],
                     'itemid' => $gradeitem->id,
@@ -94,6 +94,7 @@ protected static function get_grade_items_for_search_widget(int $courseid): arra
             );
             $item->name = $gradeitem->get_name(true);
             $item->url = $url->out(false);
+            $item->active = false; // @TODO MDL-76246
 
             return $item;
         }, $gradeableitems);
@@ -114,13 +115,14 @@ public static function get_grade_items_for_search_widget_returns(): external_sin
         return new external_single_structure([
             'gradeitems' => new external_multiple_structure(
                 new external_single_structure([
-                    'gid'    => new external_value(PARAM_INT, 'ID of the grade item', VALUE_OPTIONAL),
+                    'id'    => new external_value(PARAM_INT, 'ID of the grade item', VALUE_OPTIONAL),
                     'url' => new external_value(
                         PARAM_URL,
                         'The link to the grade report',
                         VALUE_OPTIONAL
                     ),
                     'name' => new external_value(PARAM_TEXT, 'The full name of the grade item', VALUE_OPTIONAL),
+                    'active' => new external_value(PARAM_BOOL, 'Are we currently on this item?', VALUE_REQUIRED)
                 ])
             ),
             'warnings' => new external_warnings(),

grade/report/singleview/templates/zero_state.mustache

@@ -27,7 +27,7 @@
     }
 }}
 <div class="zero-state mx-auto w-50 text-center my-6">
-    <img src="{{imglink}}" alt="{{#str}}pluginname, gradereport_singleview{{/str}}" role="presentation" class="my-5">
+    <img src="{{imglink}}" alt="{{#str}}pluginname, gradereport_singleview{{/str}}" aria-hidden="true" class="my-5">
     <h3>{{#str}}pluginname, gradereport_singleview{{/str}}</h3>
     <p>{{#str}}viewsingleuserorgradeitem, gradereport_singleview{{/str}}</p>
     <div class="justify-content-center d-flex">

grade/report/singleview/templates/zero_state_grade.mustache

@@ -25,7 +25,7 @@
     }
 }}
 <div class="zero-state mx-auto w-50 text-center my-6">
-    <img src="{{imglink}}" alt="{{#str}}viewsinglegradeitem, gradereport_singleview{{/str}}" role="presentation" class="my-5">
+    <img src="{{imglink}}" alt="{{#str}}viewsinglegradeitem, gradereport_singleview{{/str}}" aria-hidden="true" class="my-5">
     <h3>{{#str}}viewsinglegradeitem, gradereport_singleview{{/str}}</h3>
     <p>{{#str}}singleviewdescription, gradereport_singleview{{/str}}</p>
 </div>

grade/report/singleview/templates/zero_state_user.mustache

@@ -25,7 +25,7 @@
     }
 }}
 <div class="zero-state mx-auto w-50 text-center my-6">
-    <img src="{{imglink}}" alt="{{#str}}viewsingleuser, gradereport_singleview{{/str}}" role="presentation" class="my-5">
+    <img src="{{imglink}}" alt="{{#str}}viewsingleuser, gradereport_singleview{{/str}}" aria-hidden="true" class="my-5">
     <h3>{{#str}}viewsingleuser, gradereport_singleview{{/str}}</h3>
     <p>{{#str}}singleviewdescription, gradereport_singleview{{/str}}</p>
 </div>