clicking avatars goes directly to profile

routes/_components/Avatar.html

@@ -6,8 +6,14 @@
   <img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
      src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
 {{else}}
-  <NonAutoplayImg className="{{className || ''}} avatar size-{{size}}" ariaHidden="true" alt=""
+  <NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
-       src="{{account.avatar}}" staticSrc="{{account.avatar_static}}" on:imgLoadError="set({error: true})" />
+                  ariaHidden="true"
+                  alt=""
+                  src="{{account.avatar}}"
+                  staticSrc="{{account.avatar_static}}"
+                  :isLink
+                  on:imgLoadError="set({error: true})"
+  />
 {{/if}}
 <style>
   :global(.avatar) {

routes/_components/NonAutoplayImg.html

@@ -5,7 +5,7 @@
        src="{{src}}"
        on:imgLoadError />
 {{else}}
-  <img class="{{className || ''}} non-autoplay-zoom-in"
+  <img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
        aria-hidden="{{ariaHidden}}"
        alt="{{alt}}"
        src="{{staticSrc}}"
@@ -17,6 +17,9 @@
   .non-autoplay-zoom-in {
     cursor: zoom-in;
   }
+  .non-autoplay-zoom-in.is-link {
+    cursor: pointer;
+  }
 </style>
 <script>
   import { imgLoadError, mouseover } from '../_utils/events'

routes/_components/status/Status.html

@@ -16,7 +16,8 @@
   {{#if !isStatusInOwnThread}}
     <StatusRelativeDate :isStatusInNotification :originalStatus :originalStatusId :uuid />
   {{/if}}
-  <StatusSidebar :isStatusInOwnThread :originalAccount />
+  <StatusSidebar :isStatusInOwnThread :originalAccount
+                 :originalAccountId :uuid />
   {{#if originalStatus.spoiler_text}}
     <StatusSpoiler :isStatusInOwnThread :isStatusInNotification
                    :originalStatus :uuid :spoilerShown

routes/_components/status/StatusSidebar.html

@@ -1,14 +1,28 @@
+<a class="status-sidebar size-{{size}}"
+   href="/accounts/{{originalAccountId}}"
+   focus-key="{{focusKey}}" >
   <Avatar account={{originalAccount}}
-        className="status-sidebar"
+          isLink="true"
-        size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
+          :size />
+</a>
 <style>
-  :global(.status-sidebar) {
+  .status-sidebar {
     grid-area: sidebar;
     margin-right: 15px;
   }
 
+  .status-sidebar.size-small {
+    width: 48px;
+    height: 48px;
+  }
+
+  .status-sidebar.size-medium {
+    width: 64px;
+    height: 64px;
+  }
+
   @media (max-width: 767px) {
-    :global(.status-sidebar) {
+    .status-sidebar {
       margin-right: 5px;
     }
   }
@@ -18,6 +32,10 @@
   export default {
     components: {
       Avatar
+    },
+    computed: {
+      focusKey: (uuid) => `status-author-avatar-${uuid}`,
+      size: (isStatusInOwnThread) => isStatusInOwnThread ? 'medium' : 'small'
     }
   }
 </script>

tests/spec/010-focus.js

@@ -33,6 +33,11 @@ test('timeline link preserves focus', async t => {
     .click(goBackButton)
     .expect(getUrl()).eql('http://localhost:4002/')
     .expect(getActiveElementInnerText()).eql('admin')
+    .click(getNthStatus(0).find('.status-sidebar'))
+    .expect(getUrl()).contains('/accounts/')
+    .click(goBackButton)
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getActiveElementClass()).contains('status-sidebar')
 })
 
 test('notification timeline preserves focus', async t => {