yacloud/gohugo-theme-ananke
1
0
Fork 0
mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git synced 2025-06-08 09:12:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new-window accessibility icon for social media icons

Browse Source 
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
This commit is contained in:
Hannah Henderson 2018-11-27 11:04:01 +01:00
parent d452b60bd8
commit 3b5916af0e
6 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/webpack_assets.json
View File

@ -1,6 +1,6 @@
{
"app": {
"js": "js/app.3fc0f988d21662902933.js",
"css": "css/app.ae770804a077276f2ef3c76521c57fda.css"
"css": "css/app.955516233bcafa4d2a1c13cea63c7b50.css"
}
}

2
layouts/partials/new-window-icon.html Normal file
View File

@ -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>

29
layouts/partials/social-follow.html
View File

@ -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 }}

3
layouts/partials/svg/new-window.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

10
src/css/_social-icons.css
View File

@ -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;
}

10
static/dist/css/app.ae770804a077276f2ef3c76521c57fda.css → static/dist/css/app.955516233bcafa4d2a1c13cea63c7b50.css vendored
View File

@ -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;
}