From ed0db17ca066072a7d44f5e3fe6acd2b4daedc5b Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 16 Mar 2018 19:04:48 -0700
Subject: [PATCH] add auto-focus to reply input text

---
 routes/_components/IconButton.html           |  4 +++-
 routes/_components/compose/ComposeBox.html   |  2 +-
 routes/_components/compose/ComposeInput.html |  3 +++
 routes/_components/status/StatusToolbar.html |  1 +
 routes/_pages/statuses/[statusId]/reply.html |  2 +-
 tests/spec/010-focus.js                      | 18 +++++++++++++++++-
 tests/utils.js                               | 14 ++++++++++++++
 7 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html
index 868b409..332b250 100644
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@@ -4,7 +4,8 @@
           aria-pressed="{{pressable ? !!pressed : ''}}"
           class="{{computedClass}}"
           :disabled
-          delegate-key="{{delegateKey}}" >
+          delegate-key="{{delegateKey}}"
+          focus-key="{{focusKey || ''}}" >
     <svg class="icon-button-svg">
       <use xlink:href="{{href}}" />
     </svg>
@@ -14,6 +15,7 @@
           aria-label="{{label}}"
           aria-pressed="{{pressable ? !!pressed : ''}}"
           class="{{computedClass}}"
+          focus-key="{{focusKey || ''}}"
           :disabled
           on:click >
     <svg class="icon-button-svg">
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index c7a0ee6..d126191 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -6,7 +6,7 @@
       <ComposeContentWarning :realm :contentWarning />
     </div>
   {{/if}}
-  <ComposeInput :realm :text />
+  <ComposeInput :realm :text :autoFocus />
   <ComposeLengthGauge :length :overLimit />
   <ComposeToolbar :realm :postPrivacy :media :contentWarningShown />
   <ComposeLengthIndicator :length :overLimit />
diff --git a/routes/_components/compose/ComposeInput.html b/routes/_components/compose/ComposeInput.html
index 3757289..054d961 100644
--- a/routes/_components/compose/ComposeInput.html
+++ b/routes/_components/compose/ComposeInput.html
@@ -43,6 +43,9 @@
       setupSyncFromStore() {
         this.observe('text', text => {
           this.set({rawText: text})
+          if (this.get('autoFocus')) {
+            this.refs.textarea.focus()
+          }
         })
       },
       setupSyncToStore() {
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 4485b7b..de55b0b 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@@ -4,6 +4,7 @@
     href="#fa-reply"
     disabled="{{disableReply}}"
     delegateKey="{{replyKey}}"
+    focusKey="{{replyKey}}"
     />
   <IconButton
     label="{{reblogLabel}}"
diff --git a/routes/_pages/statuses/[statusId]/reply.html b/routes/_pages/statuses/[statusId]/reply.html
index 8051cbe..dc4c72b 100644
--- a/routes/_pages/statuses/[statusId]/reply.html
+++ b/routes/_pages/statuses/[statusId]/reply.html
@@ -7,7 +7,7 @@
             timelineValue="{{params.statusId}}"
             :status
     />
-    <ComposeBox realm="{{params.statusId}}" />
+    <ComposeBox realm="{{params.statusId}}" autoFocus="true" />
   {{else}}
     <LoadingPage />
   {{/if}}
diff --git a/tests/spec/010-focus.js b/tests/spec/010-focus.js
index 6148621..3b2e8d0 100644
--- a/tests/spec/010-focus.js
+++ b/tests/spec/010-focus.js
@@ -1,6 +1,6 @@
 import {
   getNthStatus, scrollToStatus, closeDialogButton, modalDialogContents, getActiveElementClass, goBack, getUrl,
-  goBackButton, getActiveElementInnerText
+  goBackButton, getActiveElementInnerText, getNthReplyButton, getActiveElementAriaLabel, getActiveElementInsideNthStatus
 } from '../utils'
 import { foobarRole } from '../roles'
 
@@ -14,6 +14,7 @@ test('modal preserves focus', async t => {
     .click(closeDialogButton)
     .expect(modalDialogContents.exists).notOk()
     .expect(getActiveElementClass()).contains('play-video-button')
+    .expect(getActiveElementInsideNthStatus()).eql('9')
 })
 
 test('timeline preserves focus', async t => {
@@ -24,6 +25,7 @@ test('timeline preserves focus', async t => {
   await goBack()
   await t.expect(getUrl()).eql('http://localhost:4002/')
     .expect(getActiveElementClass()).contains('status-article status-in-timeline')
+    .expect(getActiveElementInsideNthStatus()).eql('0')
 })
 
 test('timeline link preserves focus', async t => {
@@ -38,6 +40,7 @@ test('timeline link preserves focus', async t => {
     .click(goBackButton)
     .expect(getUrl()).eql('http://localhost:4002/')
     .expect(getActiveElementClass()).contains('status-sidebar')
+    .expect(getActiveElementInsideNthStatus()).eql('0')
 })
 
 test('notification timeline preserves focus', async t => {
@@ -49,4 +52,17 @@ test('notification timeline preserves focus', async t => {
     .click(goBackButton)
     .expect(getUrl()).eql('http://localhost:4002/notifications')
     .expect(getActiveElementInnerText()).eql('quux')
+    .expect(getActiveElementInsideNthStatus()).eql('5')
+})
+
+test('reply preserves focus and moves focus to the text input', async t => {
+  await t.useRole(foobarRole)
+    .click(getNthReplyButton(1))
+    .expect(getUrl()).contains('/reply')
+    .expect(getActiveElementClass()).contains('compose-box-input')
+    .click(goBackButton)
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getActiveElementClass()).contains('icon-button')
+    .expect(getActiveElementAriaLabel()).eql('Reply')
+    .expect(getActiveElementInsideNthStatus()).eql('1')
 })
diff --git a/tests/utils.js b/tests/utils.js
index dc51ca8..7d8f24b 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -53,6 +53,20 @@ export const getActiveElementInnerText = exec(() =>
   document.activeElement && document.activeElement.innerText
 )
 
+export const getActiveElementAriaLabel = exec(() =>
+  document.activeElement ? document.activeElement.getAttribute('aria-label') : ''
+)
+
+export const getActiveElementInsideNthStatus = exec(() => {
+  let element = document.activeElement
+  while (element) {
+    if (element.hasAttribute('aria-posinset')) {
+      return element.getAttribute('aria-posinset')
+    }
+    element = element.parentElement
+  }
+})
+
 export const goBack = exec(() => window.history.back())
 
 export const forceOffline = exec(() => window.store.set({online: false}))