From 5eb718304895fe930cd4b98c71a2076016fa64e8 Mon Sep 17 00:00:00 2001
From: Ringtail Software <toby-github@ringtailsoftware.co.uk>
Date: Sun, 27 Nov 2022 21:22:13 +0000
Subject: [PATCH] feat: make click on reposter's small avatar image go to
 reposter's account page (#2260)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
---
 .../_components/status/StatusHeader.html      | 14 +++++++++---
 tests/spec/010-focus.js                       | 22 ++++++++++++++++---
 tests/utils.js                                |  4 ++++
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/routes/_components/status/StatusHeader.html b/src/routes/_components/status/StatusHeader.html
index ee77e88a..44d25932 100644
--- a/src/routes/_components/status/StatusHeader.html
+++ b/src/routes/_components/status/StatusHeader.html
@@ -1,6 +1,13 @@
 <div class="status-header {isStatusInNotification ? 'status-in-notification' : ''} {notificationType === 'follow' ? 'header-is-follow' : ''}">
   <div class="status-header-avatar {timelineType === 'pinned' || notificationType === 'poll' ? 'hidden' : ''}">
-    <Avatar {account} size="extra-small"/>
+    <a id={avatarElementId}
+       href="/accounts/{accountId}"
+       rel="prefetch"
+       aria-hidden="true"
+       tabindex="-1"
+    >
+      <Avatar {account} size="extra-small"/>
+    </a>
   </div>
   <SvgIcon className="status-header-svg" href={icon} />
 
@@ -10,7 +17,7 @@
         {intl.pinnedStatus}
       </span>
     {:elseif notificationType !== 'poll'}
-      <a id={elementId}
+      <a id={authorElementId}
          href="/accounts/{accountId}"
          rel="prefetch"
          class="status-header-author"
@@ -114,7 +121,8 @@
     },
     store: () => store,
     computed: {
-      elementId: ({ uuid }) => `status-header-${uuid}`,
+      authorElementId: ({ uuid }) => `status-header-author-${uuid}`,
+      avatarElementId: ({ uuid }) => `status-header-avatar-${uuid}`,
       notificationType: ({ notification }) => notification && notification.type,
       icon: ({ notificationType, status, timelineType }) => {
         if (timelineType === 'pinned') {
diff --git a/tests/spec/010-focus.js b/tests/spec/010-focus.js
index 008a4166..c21d613c 100644
--- a/tests/spec/010-focus.js
+++ b/tests/spec/010-focus.js
@@ -14,7 +14,7 @@ import {
   getActiveElementTagName,
   getActiveElementClassList,
   getNthStatusSensitiveMediaButton,
-  getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton
+  getActiveElementAriaLabel, settingsNavButton, getActiveElementHref, communityNavButton, getActiveElementId
 } from '../utils'
 import { loginAsFoobar } from '../roles'
 import { Selector as $ } from 'testcafe'
@@ -59,7 +59,7 @@ test('timeline link preserves focus', async t => {
   await loginAsFoobar(t)
   await t
     .expect(getNthStatus(1).exists).ok({ timeout: 20000 })
-    .click($(`${getNthStatusSelector(1)} .status-header a`))
+    .click($(`${getNthStatusSelector(1)} .status-header-author`))
     .expect(getUrl()).contains('/accounts/')
     .click(goBackButton)
     .expect(getUrl()).eql('http://localhost:4002/')
@@ -73,12 +73,28 @@ test('timeline link preserves focus', async t => {
     .expect(getActiveElementInsideNthStatus()).eql('1')
 })
 
+test('timeline link preserves focus - reblogger avatar', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getNthStatus(1).exists).ok({ timeout: 20000 })
+
+  const avatar = `${getNthStatusSelector(1)} .status-header-avatar a`
+  const id = await $(avatar).getAttribute('id')
+  await t
+    .click($(avatar))
+    .expect(getUrl()).contains('/accounts/')
+    .click(goBackButton)
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getNthStatus(1).exists).ok()
+    .expect(getActiveElementId()).eql(id)
+})
+
 test('notification timeline preserves focus', async t => {
   await loginAsFoobar(t)
   await t
     .navigateTo('/notifications')
   await scrollToStatus(t, 6)
-  await t.click($(`${getNthStatusSelector(6)} .status-header a`))
+  await t.click($(`${getNthStatusSelector(6)} .status-header-author`))
     .expect(getUrl()).contains('/accounts/')
     .click(goBackButton)
     .expect(getUrl()).contains('/notifications')
diff --git a/tests/utils.js b/tests/utils.js
index 7b3050f3..de014857 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -169,6 +169,10 @@ export const getActiveElementInnerText = exec(() =>
   (document.activeElement && document.activeElement.innerText) || ''
 )
 
+export const getActiveElementId = exec(() =>
+  (document.activeElement && document.activeElement.id) || ''
+)
+
 export const getActiveElementRectTop = exec(() => (
   (document.activeElement && document.activeElement.getBoundingClientRect().top) || -1
 ))