From 1c354817a6a8c9358b8fe2e3328caa5fe2393477 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 17 Jan 2018 23:00:33 -0800
Subject: [PATCH] improve a11y

---
 routes/_components/Avatar.html          |  6 +++---
 routes/_components/NavItem.html         |  5 ++++-
 routes/_components/Status.html          | 13 +++++++++++--
 routes/_components/StatusListItem.html  |  2 +-
 routes/_components/Timeline.html        |  5 +++--
 routes/_components/VirtualList.html     |  1 +
 routes/_components/VirtualListItem.html |  2 +-
 routes/_utils/virtualListStore.js       |  2 ++
 8 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 103d8364..27606e0c 100644
--- a/routes/_components/Avatar.html
+++ b/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}}
diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html
index b7268910..34664a09 100644
--- a/routes/_components/NavItem.html
+++ b/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>
diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index e770929d..c6474d13 100644
--- a/routes/_components/Status.html
+++ b/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))
diff --git a/routes/_components/StatusListItem.html b/routes/_components/StatusListItem.html
index 7b15a5f1..56bc54d8 100644
--- a/routes/_components/StatusListItem.html
+++ b/routes/_components/StatusListItem.html
@@ -1,4 +1,4 @@
-<Status status="{{virtualProps}}" />
+<Status status="{{virtualProps}}" index="{{virtualIndex}}" length="{{virtualLength}}"/>
 <script>
   import Status from './Status.html'
 
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 795133e3..3a4e06b1 100644
--- a/routes/_components/Timeline.html
+++ b/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: {
diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html
index 8cde2853..5bada12b 100644
--- a/routes/_components/VirtualList.html
+++ b/routes/_components/VirtualList.html
@@ -5,6 +5,7 @@
                    offset="{{item.offset}}"
                    props="{{item.props}}"
                    key="{{item.key}}"
+                   index="{{item.index}}"
   />
   {{/each}}
 </div>
diff --git a/routes/_components/VirtualListItem.html b/routes/_components/VirtualListItem.html
index ee986bc2..c4a0a1c1 100644
--- a/routes/_components/VirtualListItem.html
+++ b/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 {
diff --git a/routes/_utils/virtualListStore.js b/routes/_utils/virtualListStore.js
index 4f4dd237..048764bf 100644
--- a/routes/_utils/virtualListStore.js
+++ b/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
 }