From 120f50919e691bba0cf880c7803a4447be8c2128 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 28 Aug 2018 06:44:36 -0700
Subject: [PATCH] improve a11y of fields, status page, and more (#505)

* improve a11y of fields, status page, and more

* tweak nav name

* fix community page and tweak text

* don't show pinned statuses heading unless there are pinned statuses
---
 routes/_components/DynamicPageBanner.html     | 10 +++++---
 .../_components/community/PageListItem.html   | 11 ++++++++-
 routes/_components/compose/ComposeBox.html    |  2 +-
 .../_components/profile/AccountProfile.html   |  4 +++-
 .../profile/AccountProfileDetails.html        |  1 +
 .../profile/AccountProfileHeader.html         |  1 +
 .../profile/AccountProfileMeta.html           | 13 +++++++++--
 .../profile/AccountProfileNote.html           |  1 +
 routes/_components/status/Status.html         |  5 ++--
 .../_components/timeline/PinnedStatuses.html  | 23 +++++++++++--------
 routes/_components/timeline/Timeline.html     | 12 +++++-----
 routes/_pages/accounts/[accountId].html       |  5 +++-
 routes/_pages/statuses/[statusId]/index.html  |  2 +-
 13 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/routes/_components/DynamicPageBanner.html b/routes/_components/DynamicPageBanner.html
index 705aaf3d..84df219f 100644
--- a/routes/_components/DynamicPageBanner.html
+++ b/routes/_components/DynamicPageBanner.html
@@ -1,12 +1,15 @@
-<div class="dynamic-page-banner {icon ? 'dynamic-page-with-icon' : ''}">
+<div class="dynamic-page-banner {icon ? 'dynamic-page-with-icon' : ''}"
+     role="navigation" aria-label="Page header"
+>
   {#if icon}
   <svg class="dynamic-page-banner-svg">
     <use xlink:href={icon} />
   </svg>
   {/if}
-  <h1 class="dynamic-page-title">{title}</h1>
+  <h1 class="dynamic-page-title" aria-label={ariaTitle}>{title}</h1>
   <button type="button"
           class="dynamic-page-go-back"
+          aria-label="Go back"
           on:click="onGoBack(event)">Back</button>
 </div>
 <style>
@@ -61,7 +64,8 @@
 <script>
   export default {
     data: () => ({
-      icon: void 0
+      icon: void 0,
+      ariaTitle: ''
     }),
     methods: {
       onGoBack (e) {
diff --git a/routes/_components/community/PageListItem.html b/routes/_components/community/PageListItem.html
index 37e92fa5..c9ac73c6 100644
--- a/routes/_components/community/PageListItem.html
+++ b/routes/_components/community/PageListItem.html
@@ -3,7 +3,7 @@
     <svg class="page-list-item-svg">
       <use xlink:href={icon} />
     </svg>
-    <span aria-label="{label} {$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}">
+    <span aria-label={ariaLabel}>
       {label}
     </span>
     {#if pinnable}
@@ -72,6 +72,15 @@
     data: () => ({
       pinnable: false
     }),
+    computed: {
+      ariaLabel: ({label, pinnable, $pinnedPage, href}) => {
+        let res = label
+        if (pinnable) {
+          res += ' (' + ($pinnedPage === href ? 'Pinned page' : 'Unpinned page') + ')'
+        }
+        return res
+      }
+    },
     components: {
       IconButton
     },
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index ff1c182c..d268a7d8 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -1,5 +1,5 @@
 {#if realm === 'home'}
-  <h1 class="sr-only">Compose toot</h1>
+  <h1 class="sr-only">Compose status</h1>
 {/if}
 <div class="{computedClassName} {hideAndFadeIn}">
   <ComposeAuthor />
diff --git a/routes/_components/profile/AccountProfile.html b/routes/_components/profile/AccountProfile.html
index d4853d82..2a255db4 100644
--- a/routes/_components/profile/AccountProfile.html
+++ b/routes/_components/profile/AccountProfile.html
@@ -1,3 +1,4 @@
+<h1 class="sr-only">Profile for {accountName}</h1>
 <div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
      style="background-image: url({headerImage});">
   <div class="account-profile-grid-wrapper">
@@ -79,7 +80,8 @@
     store: () => store,
     computed: {
       headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
-      headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static
+      headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
+      accountName: ({ account }) => (account && (account.display_name || account.username)) || ''
     },
     components: {
       AccountProfileHeader,
diff --git a/routes/_components/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html
index 982a9c6a..2eb59708 100644
--- a/routes/_components/profile/AccountProfileDetails.html
+++ b/routes/_components/profile/AccountProfileDetails.html
@@ -1,3 +1,4 @@
+<h2 class="sr-only">Stats and more options</h2>
 <div class="account-profile-details">
   <div class="account-profile-details-item">
     <span class="account-profile-details-item-title">
diff --git a/routes/_components/profile/AccountProfileHeader.html b/routes/_components/profile/AccountProfileHeader.html
index 42499333..06189c22 100644
--- a/routes/_components/profile/AccountProfileHeader.html
+++ b/routes/_components/profile/AccountProfileHeader.html
@@ -1,3 +1,4 @@
+<h2 class="sr-only">Name and following</h2>
 <div class="account-profile-avatar">
   <Avatar {account} size="big" />
 </div>
diff --git a/routes/_components/profile/AccountProfileMeta.html b/routes/_components/profile/AccountProfileMeta.html
index 4fc9d647..4cc21751 100644
--- a/routes/_components/profile/AccountProfileMeta.html
+++ b/routes/_components/profile/AccountProfileMeta.html
@@ -1,11 +1,20 @@
 {#if emojifiedFields.length}
+  <h2 class="sr-only">Fields</h2>
   <div class="account-profile-meta">
     <div class="account-profile-meta-border"></div>
     {#each emojifiedFields as field, i}
-      <div class="account-profile-meta-cell account-profile-meta-name">
+      <div
+        id="account-profile-meta-name-{i}"
+        class="account-profile-meta-cell account-profile-meta-name"
+        role="term"
+      >
         {field.name}
       </div>
-      <div class="account-profile-meta-cell account-profile-meta-value">
+      <div
+        class="account-profile-meta-cell account-profile-meta-value"
+        role="definition"
+        aria-labelledby="account-profile-meta-name-{i}"
+      >
         {@html field.value}
       </div>
     {/each}
diff --git a/routes/_components/profile/AccountProfileNote.html b/routes/_components/profile/AccountProfileNote.html
index 20e97a8e..de82099e 100644
--- a/routes/_components/profile/AccountProfileNote.html
+++ b/routes/_components/profile/AccountProfileNote.html
@@ -1,3 +1,4 @@
+<h2 class="sr-only">Description</h2>
 <div class="account-profile-note">
   {@html massagedNote}
 </div>
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 42abfb68..7b2fead8 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -217,9 +217,10 @@
         }
         return originalAccountDisplayName
       },
-      ariaLabel: ({ originalAccountAccessibleName, originalStatus, visibility }) => (
+      ariaLabel: ({ originalAccountAccessibleName, originalStatus, visibility, isStatusInOwnThread }) => (
         (visibility === 'direct' ? 'Direct message' : 'Status') +
-          ` by ${originalAccountAccessibleName}`
+          ` by ${originalAccountAccessibleName}` +
+        (isStatusInOwnThread ? ' (focused)' : '')
       ),
       showHeader: ({ notification, status, timelineType }) => (
         (notification && (notification.type === 'reblog' || notification.type === 'favourite')) ||
diff --git a/routes/_components/timeline/PinnedStatuses.html b/routes/_components/timeline/PinnedStatuses.html
index aee06622..8deb5947 100644
--- a/routes/_components/timeline/PinnedStatuses.html
+++ b/routes/_components/timeline/PinnedStatuses.html
@@ -1,13 +1,16 @@
-<div role="feed" aria-label="Pinned toots" class="pinned-statuses">
-  {#each pinnedStatuses as status, index (status.id)}
-    <Status {status}
-            timelineType="pinned"
-            timelineValue={accountId}
-            {index}
-            length={pinnedStatuses.length}
-    />
-  {/each}
-</div>
+{#if pinnedStatuses.length }
+  <h1 class="sr-only">Pinned statuses</h1>
+  <div role="feed" aria-label="Pinned statuses" class="pinned-statuses">
+    {#each pinnedStatuses as status, index (status.id)}
+      <Status {status}
+              timelineType="pinned"
+              timelineValue={accountId}
+              {index}
+              length={pinnedStatuses.length}
+      />
+    {/each}
+  </div>
+{/if}
 <script>
   import { store } from '../../_store/store'
   import Status from '../status/Status.html'
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 37f39165..9db09bbf 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -109,20 +109,20 @@
       },
       label: ({ timeline, $currentInstance, timelineType, timelineValue }) => {
         if (timelines[timeline]) {
-          return `${timelines[timeline].label} timeline for ${$currentInstance}`
+          return `Statuses: ${timelines[timeline].label} timeline on ${$currentInstance}`
         }
 
         switch (timelineType) {
           case 'tag':
-            return `#${timelineValue} timeline for ${$currentInstance}`
+            return `Statuses: #${timelineValue} hashtag`
           case 'status':
-            return 'Status context'
+            return `Statuses: thread`
           case 'account':
-            return `Account #${timelineValue} on ${$currentInstance}`
+            return `Statuses: account timeline`
           case 'list':
-            return `List #${timelineValue} on ${$currentInstance}`
+            return `Statuses: list`
           case 'notifications':
-            return `Notifications for ${$currentInstance}`
+            return `Notifications on ${$currentInstance}`
         }
       },
       timelineType: ({ timeline }) => {
diff --git a/routes/_pages/accounts/[accountId].html b/routes/_pages/accounts/[accountId].html
index 5be2cda7..8893d7d1 100644
--- a/routes/_pages/accounts/[accountId].html
+++ b/routes/_pages/accounts/[accountId].html
@@ -1,6 +1,6 @@
 {#if $isUserLoggedIn}
   <TimelinePage timeline="account/{params.accountId}">
-    <DynamicPageBanner title="" />
+    <DynamicPageBanner title="" ariaTitle="Profile page for {accountName}"/>
     {#if $currentAccountProfile && $currentVerifyCredentials}
     <AccountProfile account={$currentAccountProfile}
                     relationship={$currentAccountRelationship}
@@ -42,6 +42,9 @@
       },
       shortProfileName: ({ $currentAccountProfile }) => {
         return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || ''
+      },
+      accountName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ($currentAccountProfile.display_name || $currentAccountProfile.username)) || ''
       }
     },
     components: {
diff --git a/routes/_pages/statuses/[statusId]/index.html b/routes/_pages/statuses/[statusId]/index.html
index 57fa6d6d..8abfbd44 100644
--- a/routes/_pages/statuses/[statusId]/index.html
+++ b/routes/_pages/statuses/[statusId]/index.html
@@ -1,6 +1,6 @@
 {#if $isUserLoggedIn}
   <TimelinePage timeline="status/{params.statusId}">
-    <DynamicPageBanner title=""/>
+    <DynamicPageBanner title="" ariaTitle="Status thread page" />
   </TimelinePage>
 {:else}
   <HiddenFromSSR>