MDL-67663 mod_forum: Show/hide elements from screen reader on search
authorJun Pataleta <jun@moodle.com>
Tue, 10 Mar 2020 08:59:29 +0000 (16:59 +0800)
committerJun Pataleta <jun@moodle.com>
Thu, 9 Apr 2020 09:50:09 +0000 (17:50 +0800)
* When the search input gets shown, users can still navigate on the
close button and the grading status container which can cause confusion
among users. So hide and show them accordingly as well.
* Hide/show user picker and body container when the search results
container is shown/hidden.

mod/forum/amd/build/local/grades/grader.min.js
mod/forum/amd/build/local/grades/grader.min.js.map
mod/forum/amd/build/local/grades/local/grader/selectors.min.js
mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map
mod/forum/amd/src/local/grades/grader.js
mod/forum/amd/src/local/grades/local/grader/selectors.js
mod/forum/templates/local/grades/local/grader/grading.mustache

index c72ef09..e2d5d5d 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/grader.min.js and b/mod/forum/amd/build/local/grades/grader.min.js differ
index 06ac4ef..ff2c5fc 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/grader.min.js.map and b/mod/forum/amd/build/local/grades/grader.min.js.map differ
index 6999237..8812577 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/selectors.min.js and b/mod/forum/amd/build/local/grades/local/grader/selectors.min.js differ
index 18a5b88..a7dcd1e 100644 (file)
Binary files a/mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map and b/mod/forum/amd/build/local/grades/local/grader/selectors.min.js.map differ
index 6cb345f..06bda81 100644 (file)
@@ -159,6 +159,16 @@ const showUserSearchInput = (toggleSearchButton, searchContainer, searchInput) =
     toggleSearchButton.setAttribute('aria-expanded', 'true');
     toggleSearchButton.classList.add('expand');
     toggleSearchButton.classList.remove('collapse');
+
+    // Hide the grading info container from screen reader.
+    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);
+    gradingInfoContainer.setAttribute('aria-hidden', 'true');
+
+    // Hide the collapse grading drawer button from screen reader.
+    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);
+    collapseGradingDrawer.setAttribute('aria-hidden', 'true');
+    collapseGradingDrawer.setAttribute('tabindex', '-1');
+
     searchInput.focus();
 };
 
@@ -175,6 +185,16 @@ const hideUserSearchInput = (toggleSearchButton, searchContainer, searchInput) =
     toggleSearchButton.classList.add('collapse');
     toggleSearchButton.classList.remove('expand');
     toggleSearchButton.focus();
+
+    // Show the grading info container to screen reader.
+    const gradingInfoContainer = searchContainer.parentElement.querySelector(Selectors.regions.gradingInfoContainer);
+    gradingInfoContainer.removeAttribute('aria-hidden');
+
+    // Show the collapse grading drawer button from screen reader.
+    const collapseGradingDrawer = searchContainer.parentElement.querySelector(Selectors.buttons.collapseGradingDrawer);
+    collapseGradingDrawer.removeAttribute('aria-hidden');
+    collapseGradingDrawer.setAttribute('tabindex', '0');
+
     searchInput.value = '';
 };
 
index e98a2a9..a52b110 100644 (file)
@@ -36,6 +36,7 @@ export default {
     buttons: {
         toggleFullscreen: getDataSelector('action', 'togglefullscreen'),
         closeGrader: getDataSelector('action', 'closegrader'),
+        collapseGradingDrawer: getDataSelector('action', 'collapse-grading-drawer'),
         saveGrade: getDataSelector('action', 'savegrade'),
         selectUser: getDataSelector('action', 'select-user'),
         toggleSearch: getDataSelector('action', 'toggle-search')
@@ -45,6 +46,7 @@ export default {
         moduleContainer: getDataSelector('region', 'module_content_container'),
         moduleReplace: getDataSelector('region', 'module_content'),
         pickerRegion: getDataSelector('region', 'user_picker'),
+        gradingInfoContainer: getDataSelector('region', 'grading-info-container'),
         gradingPanel: getDataSelector('region', 'grade'),
         gradingPanelContainer: getDataSelector('region', 'grading-panel-container'),
         gradingPanelErrors: getDataSelector('region', 'grade-errors'),
index bf6831b..61c7c5e 100644 (file)
         <div class="h-100 w-100 bg-white d-flex flex-column" role="region" aria-label="{{#str}} forumgradingpanel, mod_forum {{/str}}">
             <div class="flex-shrink-0 d-flex flex-column">
                 <div class="header-container bg-light">
-                    <div class="info-container d-flex align-items-center">
+                    <div class="info-container d-flex align-items-center" data-region="grading-info-container">
                         <button
                             class="btn btn-icon icon-size-3 icon-no-margin colour-inherit"
                             data-action="collapse-grading-drawer"
                             aria-controls="grading-drawer-{{uniqid}}"
                             aria-expanded="true"
                             title="{{#str}} closebuttontitle, core {{/str}}"
+                            aria-label="{{#str}} hidegraderpanel, mod_forum {{/str}}"
                         >
                             <span class="dir-ltr-hide">{{#pix}} t/left, core {{/pix}}</span>
                             <span class="dir-rtl-hide">{{#pix}} t/right, core {{/pix}}</span>
                                 aria-controls="searchbox-{{uniqid}}"
                                 data-action="toggle-search"
                             >
-                                <div class="expanded-icon">
-                                    <span aria-hidden="true">{{#pix}} e/cancel, core, {{#str}} hideusersearch, mod_forum {{/str}} {{/pix}}</span>
-                                    <span class="sr-only">{{#str}} hideusersearch, mod_forum {{/str}}</span>
+                                <div class="expanded-icon" data-region="user-search-icon-hide">
+                                    <span>{{#pix}} e/cancel, core, {{#str}} hideusersearch, mod_forum {{/str}} {{/pix}}</span>
                                 </div>
-                                <div class="collapsed-icon">
-                                    <span aria-hidden="true">{{#pix}} i/search, core, {{#str}} showusersearch, mod_forum {{/str}} {{/pix}}</span>
-                                    <span class="sr-only">{{#str}} showusersearch, mod_forum {{/str}}</span>
+                                <div class="collapsed-icon" data-region="user-search-icon-show">
+                                    <span>{{#pix}} i/search, core, {{#str}} showusersearch, mod_forum {{/str}} {{/pix}}</span>
                                 </div>
                             </button>
                         </div>