MDL-67863 theme_boost: change keyboard tab order
authorBas Brands <bas@moodle.com>
Mon, 24 Feb 2020 13:39:31 +0000 (14:39 +0100)
committerBas Brands <bas@moodle.com>
Thu, 27 Feb 2020 16:11:03 +0000 (17:11 +0100)
Move navdrawer up in the dom for a more logical tab order
Hide navdrawer links for tab / screenreader when navdrawer is closed

theme/boost/amd/build/drawer.min.js
theme/boost/amd/build/drawer.min.js.map
theme/boost/amd/src/drawer.js
theme/boost/scss/moodle/drawer.scss
theme/boost/style/moodle.css
theme/boost/templates/columns2.mustache
theme/classic/style/moodle.css
user/tests/behat/view_participants.feature

index a2faa9d..f7469f2 100644 (file)
Binary files a/theme/boost/amd/build/drawer.min.js and b/theme/boost/amd/build/drawer.min.js differ
index 52c8504..287b576 100644 (file)
Binary files a/theme/boost/amd/build/drawer.min.js.map and b/theme/boost/amd/build/drawer.min.js.map differ
index 55b1db1..45b0391 100644 (file)
@@ -128,8 +128,9 @@ define(['jquery', 'core/custom_interaction_events', 'core/log', 'core/pubsub'],
             // Close.
             body.removeClass('drawer-open-' + side);
             trigger.attr('aria-expanded', 'false');
-            drawer.attr('aria-hidden', 'true');
-            drawer.addClass('closed');
+            drawer.addClass('closed').delay(500).queue(function() {
+                $(this).attr('aria-hidden', 'true').dequeue();
+            });
             if (!small) {
                 M.util.set_user_preference(preference, 'false');
             }
index c261e05..c75703d 100644 (file)
@@ -24,6 +24,10 @@ $drawer-offscreen-gutter: 20px !default;
     left: -($drawer-width + $drawer-offscreen-gutter);
 }
 
+#nav-drawer[aria-hidden=true] .list-group-item {
+    display: none;
+}
+
 /* Use a variable for the drawer background colors. */
 $drawer-bg: darken($body-bg, 5%) !default;
 
index 330360e..43a4f4c 100644 (file)
@@ -13389,6 +13389,9 @@ span.editinstructions {
 #nav-drawer.closed {
   left: -305px; }
 
+#nav-drawer[aria-hidden=true] .list-group-item {
+  display: none; }
+
 /* Use a variable for the drawer background colors. */
 [data-region="drawer"] {
   position: fixed;
index 28a50ad..b109c93 100644 (file)
@@ -58,6 +58,7 @@
     {{{ output.standard_top_of_body_html }}}
 
     {{> theme_boost/navbar }}
+    {{> theme_boost/nav-drawer }}
 
     <div id="page" class="container-fluid d-print-block">
         {{{ output.full_header }}}
@@ -89,7 +90,6 @@
         </div>
     </div>
     {{{ output.standard_after_main_region_html }}}
-    {{> theme_boost/nav-drawer }}
     {{> theme_boost/footer }}
 </div>
 
index 4802c14..fbc05ac 100644 (file)
@@ -13603,6 +13603,9 @@ span.editinstructions {
 #nav-drawer.closed {
   left: -305px; }
 
+#nav-drawer[aria-hidden=true] .list-group-item {
+  display: none; }
+
 /* Use a variable for the drawer background colors. */
 [data-region="drawer"] {
   position: fixed;
index 6f433b1..aa732e4 100644 (file)
@@ -113,12 +113,12 @@ Feature: View course participants
     And I am on "Course 1" course homepage
     And I navigate to course participants
     And I follow "Email address"
-    When I follow "2"
+    When I click on "2" "link" in the "//nav[@aria-label='Page']" "xpath_element"
     Then I should not see "student0x@example.com"
     And I should not see "student19x@example.com"
     And I should see "teacher1x@example.com"
     And I follow "Email address"
-    And I follow "2"
+    And I click on "2" "link" in the "//nav[@aria-label='Page']" "xpath_element"
     And I should not see "teacher1x@example.com"
     And I should not see "student19x@example.com"
     And I should not see "student1x@example.com"