MDL-67863 theme_boost: change keyboard tab order

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/src/drawer.js

@@ -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');
             }

theme/boost/scss/moodle/drawer.scss

@@ -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;
 

theme/boost/style/moodle.css

@@ -13626,6 +13626,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;

theme/boost/templates/columns2.mustache

@@ -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>
 

theme/classic/style/moodle.css

@@ -13884,6 +13884,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;

user/tests/behat/view_participants.feature

@@ -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"