From eef54e992b128a845801eb77e8b2fe859c656f75 Mon Sep 17 00:00:00 2001
From: Maxime Le Conte des Floris <mlcdf@users.noreply.github.com>
Date: Tue, 17 Apr 2018 18:42:10 +0200
Subject: [PATCH] focus container on page load (#116)

* focus container on page load

* only focus container on first page load

* add test for container focus on page load

* fix typo
---
 routes/_components/Layout.html | 16 ++++++++++++++--
 tests/spec/010-focus.js        |  4 ++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 2d63634e..ec9d94b3 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -1,6 +1,6 @@
 <Nav :page />
 
-<div class="container">
+<div class="container" tabindex="0" ref:container>
   <main>
     <slot></slot>
   </main>
@@ -13,11 +13,23 @@
   import { store } from '../_store/store'
   import InformationalFooter from './InformationalFooter.html'
 
+  // Only focus the `.container` div on first load so it does not intefere 
+  // with other desired behaviours (e.g. you click a toot, you navigate from
+  // a timeline view to a thread view, you press the back button, and now
+  // you're still focused on the toot).
+  let firstTime = true
+
 	export default {
 		components: {
 			Nav,
       InformationalFooter
-		},
+    },
+    oncreate () {
+      if (firstTime) {
+        firstTime = false
+        this.refs.container.focus()
+      }
+    },
     store: () => store
 	}
 </script>
\ No newline at end of file
diff --git a/tests/spec/010-focus.js b/tests/spec/010-focus.js
index b22d6ec7..51e674b1 100644
--- a/tests/spec/010-focus.js
+++ b/tests/spec/010-focus.js
@@ -83,3 +83,7 @@ test('reply preserves focus and moves focus to the text input', async t => {
     .click(getNthReplyButton(1))
     .expect(getActiveElementClass()).contains('compose-box-input')
 })
+
+test('focus .container div on index page load', async t => {
+  await t.expect(getActiveElementClass()).contains('container')
+})