click to show toot thread

routes/_components/status/Status.html

@@ -1,6 +1,7 @@
 <article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
-         tabindex="0"
+         tabindex="0" on:click="onClickOrKeydown(event)" on:keydown="onClickOrKeydown(event)"
          aria-posinset="{{index}}" aria-setsize="{{length}}"
+         aria-label="Status by {{originalStatus.account.display_name || originalStatus.account.username}}"
          on:recalculateHeight>
   {{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog}}
     <StatusHeader :notification :status :isStatusInNotification />
@@ -28,6 +29,7 @@
 
 <style>
   .status-article {
+    cursor: pointer;
     max-width: calc(100vw - 40px);
     padding: 10px 20px;
     display: grid;
@@ -84,6 +86,7 @@
   import StatusSpoiler from './StatusSpoiler.html'
   import { store } from '../../_store/store'
   import identity from 'lodash/identity'
+  import { goto } from 'sapper/runtime.js'
 
   export default {
     components: {
@@ -108,6 +111,24 @@
         ].filter(identity).join(' ')
       }
     },
+    methods: {
+      onClickOrKeydown(e) {
+        let { type, keyCode } = e
+        let { localName, parentElement } = e.target
+
+        if ((type === 'click' || (type === 'keydown' && keyCode === 13)) &&
+            localName !== 'a' &&
+            localName !== 'button' &&
+            parentElement.localName !== 'a' &&
+            parentElement.localName !== 'button' &&
+            parentElement.parentElement.localName !== 'a' &&
+            parentElement.parentElement.localName !== 'button') {
+          e.preventDefault()
+          e.stopPropagation()
+          goto(`/statuses/${this.get('statusId')}`)
+        }
+      }
+    },
     computed: {
       originalStatus: (status) => status.reblog ? status.reblog : status,
       statusId: (originalStatus) => originalStatus.id,

routes/_components/status/StatusRelativeDate.html

@@ -1,6 +1,6 @@
 <a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
    href="/statuses/{{status.id}}">
-  <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+  <time datetime={{createdAtDate}} title="{{relativeDate}}" aria-label="{{relativeDate}} – click to show thread">{{relativeDate}}</time>
 </a>
 <style>
   .status-relative-date {