From 3b5916af0e4ef4bd89972abe80e0dc5b95434bd9 Mon Sep 17 00:00:00 2001
From: Hannah Henderson <hannah@circleci.com>
Date: Tue, 27 Nov 2018 11:04:01 +0100
Subject: [PATCH] Add new-window accessibility icon for social media icons

Visible on-hover of link-transition class, this PR also
adds a description to the social media icons indicating that
they will open in a new window.

This way, users will be able to see and hear (via a reader)
when a tab will open in a new window.

This approach is based on the one outlined here:
https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1
---
 data/webpack_assets.json                      |  2 +-
 layouts/partials/new-window-icon.html         |  2 ++
 layouts/partials/social-follow.html           | 31 +++++++++++++------
 layouts/partials/svg/new-window.svg           |  3 ++
 src/css/_social-icons.css                     | 10 ++++++
 ... app.955516233bcafa4d2a1c13cea63c7b50.css} | 10 ++++++
 6 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 layouts/partials/new-window-icon.html
 create mode 100644 layouts/partials/svg/new-window.svg
 rename static/dist/css/{app.ae770804a077276f2ef3c76521c57fda.css => app.955516233bcafa4d2a1c13cea63c7b50.css} (99%)

diff --git a/data/webpack_assets.json b/data/webpack_assets.json
index a96a3de..253d14f 100644
--- a/data/webpack_assets.json
+++ b/data/webpack_assets.json
@@ -1,6 +1,6 @@
 {
   "app": {
     "js": "js/app.3fc0f988d21662902933.js",
-    "css": "css/app.ae770804a077276f2ef3c76521c57fda.css"
+    "css": "css/app.955516233bcafa4d2a1c13cea63c7b50.css"
   }
 }
\ No newline at end of file
diff --git a/layouts/partials/new-window-icon.html b/layouts/partials/new-window-icon.html
new file mode 100644
index 0000000..8f422ca
--- /dev/null
+++ b/layouts/partials/new-window-icon.html
@@ -0,0 +1,2 @@
+{{ $new_window_icon_size := "8px" }}
+<span class="new-window">{{ partial "svg/new-window.svg" (dict "size" $new_window_icon_size) }}</span>
\ No newline at end of file
diff --git a/layouts/partials/social-follow.html b/layouts/partials/social-follow.html
index 9620497..f087fa7 100644
--- a/layouts/partials/social-follow.html
+++ b/layouts/partials/social-follow.html
@@ -1,42 +1,55 @@
 <!-- TODO: Add follow intents where available TODO: Revisit color and hover color -->
+<div hidden>
+  <span id="new-window-0">Opens in a new window</span>
+  <span id="new-window-1">Opens an external site</span>
+  <span id="new-window-2">Opens an external site in a new window</span>
+</div>
 {{ $icon_size := "32px" }}
 {{ with .Param "facebook" }}
-<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr2" title="Facebook link">
+<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr1" title="Facebook link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "twitter" }}
-<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr2" title="Twitter link">
+<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "instagram" }}
-<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr2" title="Instagram link">
+<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr1" title="Instagram link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "youtube" }}
-<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr2" title="Youtube link">
+<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "linkedin" }}
-<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr2" title="LinkedIn link">
+<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "github" }}
-<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr2" title="Github link">
+<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/github.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "gitlab" }}
-<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr2" title="Gitlab link">
+<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
 {{ end }}
 {{ with .Param "medium" }}
-<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr2" title="Medium link">
+<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr1" title="Medium link" rel="noopener" aria-describedby="new-window-0">
   {{ partial "svg/medium.svg" (dict "size" $icon_size) }}
+  {{- partial "new-window-icon.html" . -}}
 </a>
-{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/svg/new-window.svg b/layouts/partials/svg/new-window.svg
new file mode 100644
index 0000000..ba148ad
--- /dev/null
+++ b/layouts/partials/svg/new-window.svg
@@ -0,0 +1,3 @@
+<svg {{ with .size }} height="{{ . }}" {{ end }} style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" width="{{ .size }}" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
+<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z" style="fill-rule:evenodd;clip-rule:evenodd;fill:{{ .fill }};"/>
+</svg>
diff --git a/src/css/_social-icons.css b/src/css/_social-icons.css
index f608755..dcd299e 100644
--- a/src/css/_social-icons.css
+++ b/src/css/_social-icons.css
@@ -1,6 +1,16 @@
 .facebook, .twitter, .instagram, .youtube, .github, .gitlab, .linkedin, .medium {
   fill: #BABABA;
 }
+
+.new-window {
+  opacity: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+.link-transition:hover .new-window{
+  opacity: 1;
+}
+
 .facebook:hover {
   fill: #3b5998;
 }
diff --git a/static/dist/css/app.ae770804a077276f2ef3c76521c57fda.css b/static/dist/css/app.955516233bcafa4d2a1c13cea63c7b50.css
similarity index 99%
rename from static/dist/css/app.ae770804a077276f2ef3c76521c57fda.css
rename to static/dist/css/app.955516233bcafa4d2a1c13cea63c7b50.css
index 22a1ee5..be3f149 100644
--- a/static/dist/css/app.ae770804a077276f2ef3c76521c57fda.css
+++ b/static/dist/css/app.955516233bcafa4d2a1c13cea63c7b50.css
@@ -5898,6 +5898,16 @@ pre {
   fill: #BABABA;
 }
 
+.new-window {
+  opacity: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.link-transition:hover .new-window{
+  opacity: 1;
+}
+
 .facebook:hover {
   fill: #3b5998;
 }