fix(): Focus management for docs views

angular · Oct 16, 2014 · 9afe28a · 9afe28a
1 parent a355942
commit 9afe28a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -103,8 +103,6 @@ function(COMPONENTS, DEMOS, $location, $rootScope) {
       url: componentDemos.url
     });
   });
-  console.log(apiDocs);
-  console.log(demoDocs);
 
   sections.unshift({
     name: 'Demos',
@@ -180,18 +178,22 @@ function(COMPONENTS, DEMOS, $location, $rootScope) {
   '$mdDialog',
   'menu',
   '$location',
-function($scope, COMPONENTS, $mdSidenav, $timeout, $mdDialog, menu, $location ) {
+  '$rootScope',
+function($scope, COMPONENTS, $mdSidenav, $timeout, $mdDialog, menu, $location, $rootScope ) {
 
   $scope.COMPONENTS = COMPONENTS;
 
   $scope.menu = menu;
 
   var mainContentArea = document.querySelector("[role='main']");
 
-  $scope.toggleMenu = function() {
-    $timeout(function() {
-      $mdSidenav('left').toggle();
-    });
+  $rootScope.$on('$locationChangeSuccess', openPage);
+
+  $scope.closeMenu = function() {
+    $timeout(function() { $mdSidenav('left').close(); });
+  };
+  $scope.openMenu = function() {
+    $timeout(function() { $mdSidenav('left').open(); });
   };
 
   $scope.path = function() {
@@ -202,6 +204,11 @@ function($scope, COMPONENTS, $mdSidenav, $timeout, $mdDialog, menu, $location )
     menu.selectPage(null, null);
     $location.path( '/' );
   };
+
+  function openPage() {
+    $scope.closeMenu();
+    mainContentArea.focus();
+  }
 }])
 
 .controller('HomeCtrl', [

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -18,7 +18,7 @@
 
     <md-toolbar class="md-theme-light md-medium-tall">
       <h1 class="md-toolbar-tools" style="padding-top:25px;">
-        <a href="#" ng-click="goHome()">Angular<br/>Material Design</a>
+        <a href="#/" ng-click="goHome()">Angular<br/>Material Design</a>
       </h1>
     </md-toolbar>
 
@@ -49,7 +49,7 @@ <h1 class="md-toolbar-tools" style="padding-top:25px;">
   <div layout="vertical" layout-fill tabIndex="-1" role="main">
     <md-toolbar class="md-theme-dark md-medium-tall app-toolbar">
 
-      <div class="md-toolbar-tools" ng-click="toggleMenu()">
+      <div class="md-toolbar-tools" ng-click="openMenu()">
         <button class="menu-icon" hide-md aria-label="Toggle Menu">
           <md-icon icon="img/icons/ic_menu_24px.svg">
           </md-icon>