MDL-66076 forumreport_summary: Groups filter made accessible
authorMichael Hawkins <michaelh@moodle.com>
Tue, 8 Oct 2019 04:46:26 +0000 (12:46 +0800)
committerJun Pataleta <jun@moodle.com>
Fri, 11 Oct 2019 03:09:50 +0000 (11:09 +0800)
mod/forum/report/summary/amd/build/filters.min.js
mod/forum/report/summary/amd/build/filters.min.js.map
mod/forum/report/summary/amd/src/filters.js
mod/forum/report/summary/lang/en/forumreport_summary.php
mod/forum/report/summary/templates/filters.mustache

index 123433e..af21835 100644 (file)
Binary files a/mod/forum/report/summary/amd/build/filters.min.js and b/mod/forum/report/summary/amd/build/filters.min.js differ
index 4b9132a..41efa75 100644 (file)
Binary files a/mod/forum/report/summary/amd/build/filters.min.js.map and b/mod/forum/report/summary/amd/build/filters.min.js.map differ
index cac7f92..3aa2214 100644 (file)
@@ -37,14 +37,20 @@ export const init = (root) => {
 
     // Generic filter handlers.
 
-    // Event handler to clear filters.
-    $(root).on("click", ".filter-clear", function(event) {
+    // Called to clear filters.
+    var clearAll = (event) => {
         // Clear checkboxes.
         let selected = event.target.parentNode.parentNode.parentElement.querySelectorAll('input[type="checkbox"]:checked');
 
         selected.forEach(function(checkbox) {
             checkbox.checked = false;
         });
+    };
+
+    // Event handler for clearing filter by clicking option.
+    $(root).on("click", ".filter-clear", function(event) {
+        event.preventDefault();
+        clearAll(event);
     });
 
     // Called to override click event to trigger a proper generate request with filtering.
@@ -87,10 +93,20 @@ export const init = (root) => {
         });
     };
 
+    // Submit report via filter
+    var submitWithFilter = (containerelement) => {
+        // Close the container (eg popover).
+        $(containerelement).addClass('hidden');
+
+        // Submit the filter values and re-generate report.
+        generateWithFilters(false);
+    };
+
     // Groups filter specific handlers.
 
-    // Event to handle select all groups.
-    $('#filter-groups-popover .select-all').on('click', function() {
+    // Event handler for clicking select all groups.
+    $('#filter-groups-popover .select-all').on('click', function(event) {
+        event.preventDefault();
         selectAll('filter-groups-popover');
     });
 
@@ -102,16 +118,39 @@ export const init = (root) => {
 
         new Popper(referenceElement, popperContent, {placement: 'bottom'});
 
-        // Show popover.
-        $('#filter-groups-popover').removeClass('hidden');
+        // Show popover and switch focus.
+        var groupsbutton = document.getElementById('filter-groups-button'),
+            groupspopover = document.getElementById('filter-groups-popover');
+        groupspopover.classList.remove('hidden');
+        groupsbutton.setAttribute('aria-expanded', true);
+        groupsbutton.classList.add('btn-outline-primary');
+        groupsbutton.classList.remove('btn-primary');
+        groupspopover.querySelector('input').focus();
     });
 
-    // Event handler to save groups filter.
-    $(root).on("click", "#filter-groups-popover .filter-save", function() {
-        // Close the popover.
-        $('#filter-groups-popover').addClass('hidden');
+    // Event handler to click save groups filter.
+    $(root).on("click", "#filter-groups-popover .filter-save", function(event) {
+        event.preventDefault();
+        submitWithFilter('#filter-groups-popover');
+    });
 
-        // Submit the filter values and re-generate report.
-        generateWithFilters(false);
+    // Event handler to support pressing enter/space on groups filter popover actions.
+    $('#filter-groups-popover').on("keydown", ".filter-actions", function(event) {
+    if ((event.charCode === 13 || event.keyCode === 13 || event.charCode === 32 || event.keyCode === 32)
+                && event.target.classList.length > 0) {
+            event.preventDefault();
+
+            switch(event.target.classList[0]) {
+                case 'select-all':
+                    selectAll('filter-groups-popover');
+                    break;
+                case 'filter-clear':
+                    clearAll(event);
+                    break;
+                case 'filter-save':
+                    submitWithFilter('#filter-groups-popover');
+                    break;
+            }
+        }
     });
 };
index 97cebba..d3bb447 100644 (file)
@@ -25,6 +25,7 @@
 $string['attachmentcount'] = 'Number of attachments';
 $string['viewcount'] = 'Number of views';
 $string['earliestpost'] = 'Earliest post';
+$string['filter:groupsbuttonlabel'] = 'Open the groups filter';
 $string['filter:groupsname'] = 'Groups';
 $string['filter:groupscountall'] = 'Groups (all)';
 $string['filter:groupscountnumber'] = 'Groups ({$a})';
index 426b19d..ec243ae 100644 (file)
@@ -44,7 +44,8 @@
         <input type="hidden" name="submitted" value="true">
         <div id="filtersbuttons">
             {{#hasgroups}}
-            <button type="button" id="filter-groups-button" class="btn btn-primary filter-button">
+            <button type="button" id="filter-groups-button" class="btn btn-primary rounded p-1" aria-expanded="false"
+                    aria-haspopup="true" aria-label="{{# str}} filter:groupsbuttonlabel, forumreport_summary {{/ str}}">
                 {{filtergroupsname}}
             </button>
 
                         {{/filtergroups}}
                         <br>
                     </div>
-                    <a href="#"><span class="select-all">{{# str}} selectall {{/ str}}</span></a>
-                    <div class="float-right">
-                        <a href="#"><span class="filter-clear p-1">{{# str}} clear {{/ str}}</span></a>
-                        <a href="#"><span class="filter-save"><strong>{{# str}} save {{/ str}}</strong></span></a>
+                    <div class="filter-actions">
+                        <button type="button" class="select-all btn btn-link p-0 p-r-1" aria-label="{{# str}} selectall {{/ str}}">{{# str}} selectall {{/ str}}</button>
+                        <div class="float-right">
+                            <button type="button" class="filter-clear btn btn-link p-0 p-r-1" aria-label="{{# str}} clear {{/ str}}">{{# str}} clear {{/ str}}</button>
+                            <button type="button" class="filter-save btn btn-link p-0" aria-label="{{# str}} save {{/ str}}">
+                                    <strong>{{# str}} save {{/ str}}</strong></button>
+                        </div>
                     </div>
                 </div>
             </div>