GreenPolyProducts/polymer-starter-kit
5
0
Fork 0
mirror of https://github.com/Polymer/polymer-starter-kit.git synced 2025-02-25 18:55:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

Focus the page header on nav.

Browse Source 
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
This commit is contained in:
Sam Saccone
2016-03-14 16:57:24 -07:00
parent 5d13498548
commit d86b86a48b
4 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/elements/my-greeting/my-greeting.html
View File

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

2
app/elements/routing.html
View File

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

8
app/index.html
View File

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

4
app/styles/main.css
View File

@@ -12,3 +12,7 @@ body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
.page-title {
outline: none;
}