improve a11y

routes/_components/Avatar.html

@@ -1,11 +1,11 @@
 {{#await imagePromise}}
-<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
+<img class="{{className}} avatar" aria-hidden="true"
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
 {{then src}}
-<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
+<img class="{{className}} avatar" aria-hidden="true"
      src="{{account.avatar}}" />
 {{catch error}}
-<svg class="{{className}} avatar">
+<svg class="{{className}} avatar" aria-hidden="true">
   <use xlink:href="#fa-user" />
 </svg>
 {{/await}}

routes/_components/NavItem.html

@@ -1,4 +1,7 @@
-<a class='{{page === name ? "selected" : ""}}' aria-label='{{page === name ? "Current page" : label}}' href='{{href}}'>
+<a class='{{page === name ? "selected" : ""}}'
+   aria-label='{{page === name ? `${label} (current page)` : label}}'
+   aria-current="page === name"
+   href='{{href}}'>
   <svg>
     <use xlink:href="{{svg}}" />
   </svg>

routes/_components/Status.html

@@ -1,4 +1,4 @@
-<article class="status-article">
+<article class="status-article" tabindex="0" aria-posinset="{{index}}" aria-setsize="{{length}}">
     {{#if status.reblog}}
       <div class="status-boosted">
         <svg>
@@ -19,7 +19,7 @@
       @{{originalAccount.acct}}
     </span>
     <a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
-      {{relativeDate}}
+      <time datetime={{createdAtDate}} title="{{accessibleDate}}">{{relativeDate}}</time>
     </a>
   </div>
   <Avatar account={{originalAccount}} className="status-sidebar"/>
@@ -214,6 +214,15 @@
     },
     computed: {
       createdAtDate: (status) => status.created_at,
+      accessibleDate: (createdAtDate) => {
+        return Intl.DateTimeFormat('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric'
+        }).format(new Date(createdAtDate))
+      },
       relativeDate: (createdAtDate) => {
         mark('compute relativeDate')
         let res = relativeFormat.format(new Date(createdAtDate))

routes/_components/StatusListItem.html

@@ -1,4 +1,4 @@
-<Status status="{{virtualProps}}" />
+<Status status="{{virtualProps}}" index="{{virtualIndex}}" length="{{virtualLength}}"/>
 <script>
   import Status from './Status.html'
 

routes/_components/Timeline.html

@@ -1,4 +1,4 @@
-<div class="timeline">
+<div class="timeline" role="feed" aria-label="{{label}}">
   <VirtualList component="{{StatusListItem}}"
                items="{{keyedStatuses}}"
                on:scrollToBottom="onScrollToBottom()" />
@@ -36,7 +36,8 @@
         props: status,
         key: status.id
       })),
-      lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id
+      lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id,
+      label: (target, $currentInstance) => `${target} timeline for ${$currentInstance}`
     },
     store: () => store,
     components: {

routes/_components/VirtualList.html

@@ -5,6 +5,7 @@
                    offset="{{item.offset}}"
                    props="{{item.props}}"
                    key="{{item.key}}"
+                   index="{{item.index}}"
   />
   {{/each}}
 </div>

routes/_components/VirtualListItem.html

@@ -3,7 +3,7 @@
      ref:node
      style="transform: translate3d(0, {{offset}}px, 0);"
 >
-  <:Component {component} virtualProps="{{props}}" />
+  <:Component {component} virtualProps="{{props}}" virtualIndex="{{index}}" virtualLength="{{$numItems}}"/>
 </div>
 <style>
   .virtual-list-item {

routes/_utils/virtualListStore.js

@@ -87,6 +87,8 @@ virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights
   return sum
 })
 
+virtualListStore.compute('numItems', ['items'], (items) => items.length)
+
 if (process.browser && process.env.NODE_ENV !== 'production') {
   window.virtualListStore = virtualListStore
 }