From eaf1247911cf438a9cffe1bd727f9b1450d81f08 Mon Sep 17 00:00:00 2001
From: Patrick Marsceill <patrick.marsceill@gmail.com>
Date: Sun, 16 Dec 2018 15:22:51 -0500
Subject: [PATCH] Auto focus main content for keyboard scrolling

---
 _layouts/default.html      | 4 ++--
 _sass/layout.scss          | 4 ++++
 assets/js/just-the-docs.js | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index ae57564..158fac3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -20,7 +20,7 @@
           {% if site.search_enabled != nil %}
           <div class="search js-search">
             <div class="search-input-wrap">
-              <input type="text" class="js-search-input search-input" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+              <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
               <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
             </div>
             <div class="js-search-results search-results-wrap"></div>
@@ -35,7 +35,7 @@
           {% endif %}
         </div>
       </div>
-      <div class="main-content">
+      <div class="main-content js-main-content" tabindex="1">
         {% unless page.url == "/" %}
           {% if page.parent %}
             <nav class="breadcrumb-nav">
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 27f15e9..11be435 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -74,6 +74,10 @@
   }
 }
 
+.js-main-content:focus {
+  outline: none;
+}
+
 .page-header {
   background-color: $sidebar-color;
 
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 3c0a1b5..bc1365d 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -150,11 +150,18 @@ function initSearch() {
   }
 }
 
+function pageFocus() {
+  var mainContent = document.querySelector('.js-main-content');
+  mainContent.focus();
+  console.log(mainContent)
+}
+
 
 // Document ready
 
 function ready(){
   toggleNav();
+  pageFocus();
   if (typeof lunr !== 'undefined') {
     initSearch();
   }