docs: allow up/down/page up/page down to scroll docs content (#11712)

don't convert menu-headers to anchors as they have no content
convert skip to content button to an icon button with tooltip
- make it visible always

Fixes #2961

Author: Splaktar

docs/app/css/style.css

@@ -173,22 +173,19 @@ ul.skip-links li {
   padding: 0;
 }
 ul.skip-links li a {
-  background-color: #fff;
-  display: block;
-  margin: 0.5em 0 0.5em 0.5em;
-  opacity: 0;
-  left: 0;
+  color: white;
+  margin: 0.9em 0 0.5em 0.5em !important;
+  right: 0;
   position: absolute;
-  text-decoration: none;
   top: 0;
-  width: 92%;
-  transition: opacity   0.15s linear;
-}
-ul.skip-links li a:focus {
-  background-color: #fff !important;
-  opacity: 1;
   z-index: 2;
 }
+ul.skip-links li a md-icon {
+  color: white;
+}
+.md-breadcrumb:focus {
+  outline: #BDBDC0 solid 2px;
+}
 /*******************
  * CODE HIGHLIGHTING
  *******************/
@@ -346,8 +343,6 @@ body[dir=rtl] .docs-menu .md-button {
   padding: 8px 16px 0;
   text-align: left;
   width: 100%;
-}
-.menu-heading>a {
   color: white;
   font-weight: 700;
   font-size: 12px;

docs/app/js/anchor.js

@@ -21,7 +21,8 @@
     function postLink(scope, element, attr, ctrl) {
 
       // Only create anchors when being inside of a md-content.
-      if (!ctrl) {
+      // Don't create anchors for menu headers as they have no associated content.
+      if (!ctrl || element[0].classList && element[0].classList.contains('menu-heading')) {
         return;
       }
 

docs/app/js/app.js

@@ -643,7 +643,8 @@ function($scope, COMPONENTS, BUILDCONFIG, $mdSidenav, $timeout, $mdDialog, menu,
   this.autoFocusContent = false;
 
 
-  var mainContentArea = document.querySelector("[role='main']");
+  var mainContentArea = document.querySelector("main");
+  var mainContentHeader = mainContentArea.querySelector(".md-breadcrumb");
   var scrollContentEl = mainContentArea.querySelector('md-content[md-scroll-y]');
 
 
@@ -682,12 +683,13 @@ function($scope, COMPONENTS, BUILDCONFIG, $mdSidenav, $timeout, $mdDialog, menu,
   }
 
   function focusMainContent($event) {
+    $scope.closeMenu();
     // prevent skip link from redirecting
     if ($event) { $event.preventDefault(); }
 
     $timeout(function(){
-      mainContentArea.focus();
-    },90);
+      mainContentHeader.focus();
+    }, 90);
 
   }
 
@@ -918,7 +920,7 @@ function($rootScope, $scope, component, demos, $templateRequest) {
 .directive('cacheScrollPosition', ['$route', '$mdUtil', '$timeout', '$location', '$anchorScroll',
   'scrollCache',
 function($route, $mdUtil, $timeout, $location, $anchorScroll, scrollCache) {
-  var mainContentArea = document.querySelector("[role='main']");
+  var mainContentArea = document.querySelector("main");
   var scrollContentEl = mainContentArea.querySelector('md-content[md-scroll-y]');
 
   /**

docs/config/template/index.template.html

@@ -27,8 +27,12 @@ <h1 class="docs-logotype md-heading">AngularJS Material</h1>
     </header>
 
     <ul class="skip-links">
-      <li class="md-whiteframe-z2">
-        <md-button ng-click="focusMainContent($event)" href="#">Skip to content</md-button>
+      <li>
+        <md-button class="md-icon-button" ng-click="focusMainContent($event)" href="#"
+                   aria-label="Skip to main content">
+          <md-tooltip>Focus main content header</md-tooltip>
+          <md-icon md-svg-src="img/icons/ic_chevron_right_24px.svg"></md-icon>
+        </md-button>
       </li>
     </ul>
 
@@ -54,15 +58,15 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
     </md-content>
   </md-sidenav>
 
-  <div layout="column" tabIndex="-1" role="main" flex>
+  <main layout="column" flex>
     <md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar" md-theme="site-toolbar">
 
       <div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
         <md-button class="md-icon-button" ng-click="openMenu()" hide-gt-sm aria-label="Toggle Menu">
           <md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
         </md-button>
         <div layout="row" flex class="fill-height">
-          <h2 class="md-toolbar-item md-breadcrumb md-headline">
+          <h2 class="md-toolbar-item md-breadcrumb md-headline" tabindex="-1">
             <span ng-if="menu.currentPage.name !== menu.currentSection.name">
               <span hide-sm hide-md>{{menu.currentSection.name}}</span>
               <span class="docs-menu-separator-icon" hide-sm hide-md style="transform: translate3d(0, 1px, 0)">
@@ -176,7 +180,7 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline">
 
     </md-content>
 
-  </div>
+  </main>
 
 
   <!-- Preload is (currently) only used for testing jQuery -->