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
This commit is contained in:
Maxime Le Conte des Floris 2018-04-17 18:42:10 +02:00 committed by Nolan Lawson
parent 8cdfdd9bc6
commit eef54e992b
2 changed files with 18 additions and 2 deletions

View file

@ -1,6 +1,6 @@
<Nav :page /> <Nav :page />
<div class="container"> <div class="container" tabindex="0" ref:container>
<main> <main>
<slot></slot> <slot></slot>
</main> </main>
@ -13,11 +13,23 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import InformationalFooter from './InformationalFooter.html' 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 { export default {
components: { components: {
Nav, Nav,
InformationalFooter InformationalFooter
}, },
oncreate () {
if (firstTime) {
firstTime = false
this.refs.container.focus()
}
},
store: () => store store: () => store
} }
</script> </script>

View file

@ -83,3 +83,7 @@ test('reply preserves focus and moves focus to the text input', async t => {
.click(getNthReplyButton(1)) .click(getNthReplyButton(1))
.expect(getActiveElementClass()).contains('compose-box-input') .expect(getActiveElementClass()).contains('compose-box-input')
}) })
test('focus .container div on index page load', async t => {
await t.expect(getActiveElementClass()).contains('container')
})