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

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

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')
+})