From d86b86a48b1ba4403e31173028b3f1b304747569 Mon Sep 17 00:00:00 2001
From: Sam Saccone <samccone@gmail.com>
Date: Mon, 14 Mar 2016 16:57:24 -0700
Subject: [PATCH] Focus the page header on nav.

No longer focus the section which caused the header to jump. Note that
we are doing outline none here not to "hide" focus, rather to act
as a focus start for screen readers and tab navigation.

Fixes #717
---
 app/elements/my-greeting/my-greeting.html | 2 +-
 app/elements/routing.html                 | 2 +-
 app/index.html                            | 8 ++++----
 app/styles/main.css                       | 4 ++++
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/elements/my-greeting/my-greeting.html b/app/elements/my-greeting/my-greeting.html
index 5ccf4bea..d64ba09f 100644
--- a/app/elements/my-greeting/my-greeting.html
+++ b/app/elements/my-greeting/my-greeting.html
@@ -24,7 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       }
     </style>
 
-    <h1 class="page-title">{{greeting}}</h1>
+    <h1 class="page-title" tabindex="-1">{{greeting}}</h1>
     <label for="greeting-input">Update text to change the greeting.</label>
     <!-- Listens for "input" event and sets greeting to <input>.value -->
     <input id="greeting-input" value="{{greeting::input}}">
diff --git a/app/elements/routing.html b/app/elements/routing.html
index e3c7a1c0..3939eaba 100644
--- a/app/elements/routing.html
+++ b/app/elements/routing.html
@@ -33,7 +33,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     }
     
     function setFocus(selected){
-      document.querySelector('section[data-route="' + selected + '"]').focus();
+      document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
     }
 
     // Routes
diff --git a/app/index.html b/app/index.html
index 3997b5bf..5af0502e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -156,7 +156,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
             <section data-route="users" tabindex="-1">
               <paper-material elevation="1">
-                <h1 class="page-title">Users</h1>
+                <h1 class="page-title" tabindex="-1">Users</h1>
                 <p>This is the users section</p>
                 <a href$="{{baseUrl}}users/Addy">Addy</a><br>
                 <a href$="{{baseUrl}}users/Rob">Rob</a><br>
@@ -166,15 +166,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             </section>
 
             <section data-route="user-info" tabindex="-1">
-              <paper-material elevation="1">
-                <h1 class="page-title">User: {{params.name}}</h1>
+              <paper-material elevation="-1">
+                <h1 class="page-title" tabindex="-1">User: {{params.name}}</h1>
                 <div>This is {{params.name}}'s section</div>
               </paper-material>
             </section>
 
             <section data-route="contact" tabindex="-1">
               <paper-material elevation="1">
-                <h1 class="page-title">Contact</h1>
+                <h1 class="page-title" tabindex="-1">Contact</h1>
                 <p>This is the contact section</p>
               </paper-material>
             </section>
diff --git a/app/styles/main.css b/app/styles/main.css
index 1c9ea799..fbda6d74 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -12,3 +12,7 @@ body {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #333;
 }
+
+.page-title {
+  outline: none;
+}