From 300a399655bba5724f5e60ba898678cd4e6f2eea Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 15 Apr 2018 16:00:09 -0700
Subject: [PATCH] Mark permalinks with icons accessibly (#138)

Fixes #128
---
 routes/_components/ExternalLink.html                 | 1 +
 routes/_components/profile/AccountProfileHeader.html | 6 +++++-
 routes/_components/status/StatusDetails.html         | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/routes/_components/ExternalLink.html b/routes/_components/ExternalLink.html
index 6f8c7939..bcece930 100644
--- a/routes/_components/ExternalLink.html
+++ b/routes/_components/ExternalLink.html
@@ -1,6 +1,7 @@
 <a rel="nofollow noopener"
    target="_blank"
    href="{{href}}"
+   aria-label="{{ariaLabel || ''}}"
    class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
   <slot></slot>{{#if showIcon}}
     <svg class="external-link-svg">
diff --git a/routes/_components/profile/AccountProfileHeader.html b/routes/_components/profile/AccountProfileHeader.html
index 537cf1fe..43463feb 100644
--- a/routes/_components/profile/AccountProfileHeader.html
+++ b/routes/_components/profile/AccountProfileHeader.html
@@ -2,7 +2,11 @@
   <Avatar :account size="big" />
 </div>
 <div class="account-profile-name">
-  <ExternalLink href="{{account.url}}" showIcon="true" normalIconColor="true">
+  <ExternalLink href="{{account.url}}"
+                showIcon="true"
+                normalIconColor="true"
+                ariaLabel="{{account.display_name || account.acct}} (opens in new window)"
+  >
     {{account.display_name || account.acct}}
   </ExternalLink>
 </div>
diff --git a/routes/_components/status/StatusDetails.html b/routes/_components/status/StatusDetails.html
index 0092569d..7d6ef905 100644
--- a/routes/_components/status/StatusDetails.html
+++ b/routes/_components/status/StatusDetails.html
@@ -1,5 +1,9 @@
 <div class="status-details">
-  <ExternalLink class="status-absolute-date" href="{{originalStatus.url}}" showIcon="true">
+  <ExternalLink class="status-absolute-date"
+                href="{{originalStatus.url}}"
+                showIcon="true"
+                ariaLabel="{{formattedDate}} (opens in new window)"
+  >
     <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
   </ExternalLink>
   <a class="status-favs-reblogs"