fix so that page scrollbars can be scrolled by keyboard on page load

The page scrollbars are custom, not rendered on the body element and
with css property overflow set for scroll to be enabled.
For being able to scroll the page using the keyboard when a
page loads, some custom code was needed.
This fix should both work when doing a full reload of a url and when
navigating to other pages/dashboards.
For those pages having an input field that are focused on load,
scrolling by keyboard (arrow up/down) will obviously not work.

public/app/core/components/scroll/page_scroll.ts

@@ -29,7 +29,11 @@ export function pageScrollbar() {
       scope.$on('$routeChangeSuccess', () => {
         lastPos = 0;
         elem[0].scrollTop = 0;
+        elem[0].focus();
       });
+
+      elem[0].tabIndex = -1;
+      elem[0].focus();
     },
   };
 }

public/views/index.template.html

@@ -40,7 +40,7 @@
     </div>
 
     <div class="main-view">
-      <div class="scroll-canvas">
+      <div class="scroll-canvas" page-scrollbar>
         <div ng-view></div>
 
         <footer class="footer">