MDL-78885 comboboxsearch: Some small fixes

- Remove aria-busy - Remove aria-label from the listbox element. A listbox that is part of a combobox does not need to be labelled. - No need for the aria-label for the select all checkbox because it is already enclosed in the <label> tag. - Having "view results for ..." as aria-label of listbox options is not helpful and only creates noise. - Deprecated (viewresults,core) as it was not used anymore - aria-hidden="true" should not be used on .d-none elements - 'noresults' was falsely documented as a required context variable for resultset.mustache. Not only it was not required, it was not even provided! - Remove duplicate code from user_selector.mustache - Remove the redundant aria-label from search_input_auto. It already has a label. - Fix placeholder missing from one case
moodle · Mar 21, 2024 · 893a9e4 · 893a9e4
1 parent 1c377fc
commit 893a9e4
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 43 deletions.
diff --git a/grade/report/grader/templates/collapse/collapsebody.mustache b/grade/report/grader/templates/collapse/collapsebody.mustache
@@ -50,13 +50,13 @@
     <input type="hidden" name="search" id="collapse-input-{{uniqid}}"/>
 
     <form class="columnsdropdownform flex-column h-100">
-        <ul id="collapse-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" role="listbox" data-region="search-result-items-container" aria-label="{{#cleanstr}} aria:dropdowncolumns, gradereport_grader {{/cleanstr}}" aria-busy="true">
+        <ul id="collapse-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" role="listbox" data-region="search-result-items-container" aria-label="{{#cleanstr}} aria:dropdowncolumns, gradereport_grader {{/cleanstr}}">
             {{>gradereport_grader/collapse/collapseresults}}
         </ul>
         <div class="d-flex mt-2">
             <div class="d-flex align-items-center form-check">
-                <label id="check-all" for="check-all-input" class="selected-option-info text-truncate form-check-label d-block">
-                    <input disabled id="check-all-input" class="form-check-input" type="checkbox" data-action="selectall" aria-label="{{#str}}selectall, core{{/str}}">
+                <label id="check-all" class="selected-option-info text-truncate form-check-label d-block">
+                    <input disabled class="form-check-input" type="checkbox" data-action="selectall">
                     {{#str}}selectall, core{{/str}}
                 </label>
             </div>

diff --git a/grade/report/singleview/templates/grade_item_selector.mustache b/grade/report/singleview/templates/grade_item_selector.mustache
@@ -48,5 +48,5 @@
         </div>
     {{/selectedoption}}
 </div>
-<span class="d-none" data-region="courseid" data-courseid="{{courseid}}" aria-hidden="true"></span>
-<span class="d-none" data-region="itemid" data-itemid="{{itemid}}" aria-hidden="true"></span>
+<span class="d-none" data-region="courseid" data-courseid="{{courseid}}"></span>
+<span class="d-none" data-region="itemid" data-itemid="{{itemid}}"></span>
diff --git a/group/templates/comboboxsearch/group_selector.mustache b/group/templates/comboboxsearch/group_selector.mustache
@@ -31,7 +31,7 @@
         "selectedgroup": "Group 1"
     }
 }}
-<span class="d-none" data-region="groupid" data-groupid="{{group}}" aria-hidden="true"></span>
+<span class="d-none" data-region="groupid" data-groupid="{{group}}"></span>
 <div class="align-items-center d-flex">
     <div class="d-block pr-3 text-truncate">
         <span class="d-block small" aria-hidden="true">

diff --git a/lang/en/deprecated.txt b/lang/en/deprecated.txt
@@ -144,3 +144,4 @@ to,core
 from,core
 aria-toggledropdown,core_grades
 aria:dropdowngrades,core_grades
+viewresults,core
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -159,8 +159,6 @@
 $string['areyousure'] = 'Are you sure?';
 $string['areyousuretorestorethis'] = 'Do you want to continue?';
 $string['areyousuretorestorethisinfo'] = 'Later in this process you will have a choice of adding this backup to an existing course or creating a completely new course.';
-$string['aria-toggledropdown'] = 'Toggle the following dropdown';
-$string['aria-comboboxsearchitems'] = 'Select an option';
 $string['asc'] = 'Ascending';
 $string['assessment'] = 'Assessment';
 $string['assignadmins'] = 'Assign admins';
@@ -2385,7 +2383,6 @@
 $string['viewmore'] = 'View more';
 $string['viewallsubcategories'] = 'View all subcategories';
 $string['viewfileinpopup'] = 'View file in a popup window';
-$string['viewresults'] = 'View results for {$a}';
 $string['viewprofile'] = 'View profile';
 $string['views'] = 'Views';
 $string['viewsolution'] = 'view solution';
@@ -2510,3 +2507,4 @@
 $string['summaryof'] = 'Summary of {$a}';
 $string['from'] = 'From';
 $string['to'] = 'To';
+$string['viewresults'] = 'View results for {$a}';
diff --git a/lib/templates/local/comboboxsearch/resultitem.mustache b/lib/templates/local/comboboxsearch/resultitem.mustache
@@ -21,13 +21,24 @@
     * name - Result item human readable name.
     * link - The link used to redirect upon self to show only this specific result item.
 
+    The shorttext pragma can be used to provide a short text for the result item.
+    This is especially useful when the result item content contains html tags.
+
     Example context (json):
     {
         "id": 2,
         "name": "Foo bar"
     }
 }}
-<li id="result-{{id}}" class="w-100 dropdown-item d-flex px-0 align-items-center" role="option" data-short-text="{{$shorttext}}{{/shorttext}}" data-value="{{id}}" aria-label="{{$arialabel}}{{#str}}viewresults, core, {{name}}{{/str}}{{/arialabel}}">
+<li
+    id="result-{{id}}"
+    class="w-100 dropdown-item d-flex px-0 align-items-center"
+    role="option"
+    {{! aria.js would use the data-short-text attribute if it is provided. }}
+    data-short-text="{{$shorttext}}{{/shorttext}}"
+    data-value="{{id}}"
+    aria-label="{{$arialabel}}{{name}}{{/arialabel}}"
+>
     {{$content}}
         <span class="d-block w-100 px-2 text-truncate">
             {{name}}

diff --git a/lib/templates/local/comboboxsearch/resultset.mustache b/lib/templates/local/comboboxsearch/resultset.mustache
@@ -20,7 +20,6 @@
     * results - Our returned results to render.
     * searchterm - The entered text to find these results.
     * hasresult - Allow the handling where no results exist for the returned search term.
-    * noresults - Our fall through case if nothing matches.
 
     Example context (json):
     {
@@ -39,7 +38,12 @@
     }
 }}
 <div class="d-flex flex-column mh-100 h-100">
-    <ul id="{{$listid}}list{{/listid}}-result-listbox" class="searchresultitemscontainer d-flex flex-column mw-100 position-relative py-2 list-group h-100 mx-0 {{$listclasses}}{{/listclasses}}" role="listbox" data-region="search-result-items-container" aria-label="{{#cleanstr}} aria-comboboxsearchitems, core {{/cleanstr}}">
+    <ul
+        id="{{$listid}}list{{/listid}}-result-listbox"
+        class="searchresultitemscontainer d-flex flex-column mw-100 position-relative py-2 list-group h-100 mx-0 {{$listclasses}}{{/listclasses}}"
+        role="listbox"
+        data-region="search-result-items-container"
+    >
         {{#hasresults}}
             {{$results}}
                 {{#results}}

diff --git a/user/templates/comboboxsearch/resultitem.mustache b/user/templates/comboboxsearch/resultitem.mustache
@@ -33,7 +33,7 @@
     }
 }}
 {{<core/local/comboboxsearch/resultitem }}
-    {{$arialabel}}{{#str}}viewresults, core, {{fullname}}{{/str}}{{/arialabel}}
+    {{$arialabel}}{{fullname}}{{/arialabel}}
     {{$shorttext}}{{fullname}}{{/shorttext}}
     {{$content}}
         <span class="d-block px-2 w-25">

diff --git a/user/templates/comboboxsearch/user_selector.mustache b/user/templates/comboboxsearch/user_selector.mustache
@@ -37,39 +37,24 @@
         "resetlink": "grade/report/grader/index.php?id=2"
     }
 }}
-<span class="d-none" data-region="courseid" data-courseid="{{courseid}}" aria-hidden="true"></span>
-<span class="d-none" data-region="groupid" data-groupid="{{group}}" aria-hidden="true"></span>
+<span class="d-none" data-region="courseid" data-courseid="{{courseid}}"></span>
+<span class="d-none" data-region="groupid" data-groupid="{{group}}"></span>
+{{< core/search_input_auto }}
+    {{$label}}{{#str}}searchusers, core{{/str}}{{/label}}
+    {{$placeholder}}{{#str}}searchusers, core{{/str}}{{/placeholder}}
+    {{$value}}{{currentvalue}}{{/value}}
+    {{$additionalattributes}}
+        role="combobox"
+        aria-expanded="false"
+        aria-controls="user-result-listbox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        data-input-element="user-input-{{uniqid}}"
+    {{/additionalattributes}}
+{{/ core/search_input_auto }}
 {{#currentvalue}}
-    {{< core/search_input_auto }}
-        {{$label}}{{#str}}searchusers, core{{/str}}{{/label}}
-        {{$value}}{{currentvalue}}{{/value}}
-        {{$additionalattributes}}
-            role="combobox"
-            aria-expanded="false"
-            aria-controls="user-result-listbox"
-            aria-autocomplete="list"
-            aria-haspopup="listbox"
-            aria-label="{{#cleanstr}} aria-toggledropdown, core {{/cleanstr}}"
-            data-input-element="user-input-{{uniqid}}"
-        {{/additionalattributes}}
-    {{/ core/search_input_auto }}
     <a class="ml-2 btn btn-link border-0 align-self-center" href="{{resetlink}}" data-action="resetpage" role="link" aria-label="{{#str}}clearsearch, core{{/str}}">
         {{#str}}clear{{/str}}
     </a>
 {{/currentvalue}}
-{{^currentvalue}}
-    {{< core/search_input_auto }}
-        {{$label}}{{#str}}searchusers, core{{/str}}{{/label}}
-        {{$placeholder}}{{#str}}searchusers, core{{/str}}{{/placeholder}}
-        {{$additionalattributes}}
-            role="combobox"
-            aria-expanded="false"
-            aria-controls="user-result-listbox"
-            aria-autocomplete="list"
-            aria-haspopup="listbox"
-            aria-label="{{#cleanstr}} aria-toggledropdown, core {{/cleanstr}}"
-            data-input-element="user-input-{{uniqid}}"
-        {{/additionalattributes}}
-    {{/ core/search_input_auto }}
-{{/currentvalue}}
 <input type="hidden" name="{{name}}" value="{{value}}" id="user-input-{{uniqid}}"/>