feat: make click on reposter's small avatar image go to reposter's account page (#2260)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

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') {

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

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