Merge pull request #548 from mpourismaiel/fix/global/alt-and-titles

Add alt and title tags along with sr-only to images and icons
okkur · Mar 13, 2019 · 74cd309 · 74cd309
2 parents 8181336 + 0bf2fe8
commit 74cd309
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 50 deletions.
diff --git a/exampleSite/content/fragments/member/code-single-member.md b/exampleSite/content/fragments/member/code-single-member.md
@@ -40,6 +40,7 @@ scope = [
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/members/ella.md b/exampleSite/content/fragments/member/members/ella.md
@@ -14,6 +14,7 @@ scope = [
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/members/gopher.md b/exampleSite/content/fragments/member/members/gopher.md
@@ -14,10 +14,12 @@ scope = [
 
 [[icons]]
   icon = "fab fa-twitter"
+  text = "Twitter"
   url = "#"
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/members/hector.md b/exampleSite/content/fragments/member/members/hector.md
@@ -7,14 +7,17 @@ lives_in = "[Iceland](https://www.google.com/maps/place/Iceland/)"
 
 [[icons]]
   icon = "fab fa-twitter"
+  text = "Twitter"
   url = "#"
 
 [[icons]]
   icon = "fab fa-facebook"
+  text = "Twitter"
   url = "#"
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/members/nancy.md b/exampleSite/content/fragments/member/members/nancy.md
@@ -14,14 +14,17 @@ scope = [
 
 [[icons]]
   icon = "fab fa-twitter"
+  text = "Twitter"
   url = "#"
 
 [[icons]]
   icon = "fab fa-facebook-f"
+  text = "Facebook"
   url = "#"
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/members/yoda.md b/exampleSite/content/fragments/member/members/yoda.md
@@ -14,14 +14,17 @@ scope = [
 
 [[icons]]
   icon = "fab fa-twitter"
+  text = "Twitter"
   url = "#"
 
 [[icons]]
   icon = "fab fa-facebook-f"
+  text = "Facebook"
   url = "#"
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/exampleSite/content/fragments/member/single-member/bio.md b/exampleSite/content/fragments/member/single-member/bio.md
@@ -16,6 +16,7 @@ scope = [
 
 [[icons]]
   icon = "fab fa-linkedin-in"
+  text = "Linkedin"
   url = "#"
 
 [asset]

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -49,7 +49,19 @@
   translation: "Lives in"
 - id: member.reportsTo
   translation: "Reports to"
-
+
+# Navbar
+- id: navbar.search
+  translation: "Search..."
+- id: navbar.github
+  translation: "Github"
+- id: navbar.back_to_top
+  translation: "Back to top"
+
+# Search
+- id: search.search
+  translation: "Search"
+
 # Stripe
 - id: stripe.email
   translation: "Your email address"

diff --git a/layouts/partials/fragments/footer.html b/layouts/partials/fragments/footer.html
@@ -26,13 +26,14 @@ <h4>
       {{- if .Site.Menus.footer_social }}
         <div class="row justify-content-left ml-0">
           {{- range sort .Site.Menus.footer_social }}
-            <span class="fa-stack fa-2x mt-3 mr-1">
+            <span class="fa-stack fa-2x mt-3 mr-1" title="{{ .Name }}">
               <a href="{{ .URL | relLangURL }}" class="ignore-color-change
                 {{- if eq $bg "primary" -}}
                   {{- print " text-dark" -}}
                 {{- end -}}">
                 <i class="fas fa-circle fa-stack-2x"></i>
                 <i class="{{ .Pre }} fa-stack-1x fa-fw text-light"></i>
+                <span class="sr-only">{{ .Name }}</span>
               </a>
             </span>
           {{- end }}

diff --git a/layouts/partials/fragments/hero.html b/layouts/partials/fragments/hero.html
@@ -23,61 +23,72 @@
   {{- if .Params.asset -}}
     {{- with .Params.asset }}
       <div class="row justify-content-center align-items-start">
-        <img class="overlay img-fluid" src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" alt="{{ .title }}"
+        <img
+          class="overlay img-fluid"
+          src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}"
+          alt="
+            {{- if .text -}}
+              {{- print .text -}}
+            {{- else if $.Params.title_page -}}
+              {{- print $.root.Title -}}
+            {{- else -}}
+              {{- print $.Params.title -}}
+            {{- end -}}
+          "
           {{- if .height -}} height="{{ .height }}"{{- end -}}
           {{- if .width -}} width="{{ .width }}"{{- end -}}
         ></img>
       </div>
     {{- end }}
     {{- with .Params.subtitle }}
-    <div class="row justify-content-center align-items-start">
-      <h1 class="overlay jumbotron-heading my-4
-        {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
-      ">
-        {{- . | markdownify -}}
-      </h1>
-    </div>
+      <div class="row justify-content-center align-items-start">
+        <h1 class="overlay jumbotron-heading my-4
+          {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
+        ">
+          {{- . | markdownify -}}
+        </h1>
+      </div>
     {{- end -}}
   {{- else }}
-    {{- if .Params.title_page -}}
-    <div class="row justify-content-center align-items-start">
-      <h1 class="overlay jumbotron-heading
-        {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
-      ">
-        {{ $.root.Title }}
-      </h1>
-    </div>
-    {{- else -}}
-      {{- with .Params.title }}
+    {{- if .Params.title_page }}
       <div class="row justify-content-center align-items-start">
         <h1 class="overlay jumbotron-heading
           {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
         ">
-          {{- . -}}
+          {{ $.root.Title }}
         </h1>
       </div>
+    {{- else -}}
+      {{- with .Params.title }}
+        <div class="row justify-content-center align-items-start">
+          <h1 class="overlay jumbotron-heading
+            {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
+          ">
+            {{- . -}}
+          </h1>
+        </div>
       {{- end -}}
     {{- end -}}
     {{- with .Params.subtitle }}
-    <div class="row justify-content-center align-items-start">
-      <div class="overlay lead
-        {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
-      ">
-        {{- . | markdownify -}}
+      <div class="row justify-content-center align-items-start">
+        <div class="overlay lead
+          {{- partial "helpers/text-color.html" (dict "self" $self.self) -}}
+        ">
+          {{- . | markdownify -}}
+        </div>
       </div>
-    </div>
     {{- end -}}
   {{- end -}}
   {{- range .Params.buttons }}
-    <a class="overlay btn btn-lg m-2{{ if hasPrefix .url " # " }} anchor{{ end }}
-          {{- $color := .color | default "primary" -}}
-          {{- printf " btn-%s " $color -}}
-        " href="{{ .url | relLangURL }}">
-    <div class="column justify-content-center align-content-center">
-      {{- .text -}}
-    </div>
+    <a class="overlay btn btn-lg m-2
+      {{- if hasPrefix .url " # " }} anchor{{ end -}}
+      {{- $color := .color | default "primary" -}}
+      {{- printf " btn-%s " $color -}}
+    " href="{{ .url | relLangURL }}">
+      <div class="column justify-content-center align-content-center">
+        {{- .text -}}
+      </div>
     </a>
-
   {{- end }}
   </div>
 </header>

diff --git a/layouts/partials/fragments/item.html b/layouts/partials/fragments/item.html
@@ -67,9 +67,9 @@ <h5>
             {{- end -}}
             {{- with .Params.asset -}}
               {{- if isset . "image" }}
-                <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="img-fluid p-2" alt="{{ .text }}">
+                <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="img-fluid p-2" alt="{{ .text | default $.Params.title }}">
               {{- else if isset . "icon" }}
-                <span class="fa-stack fa-4x">
+                <span class="fa-stack fa-4x" title="{{ .text | default $.Params.title }}">
                   <i class="fas fa-circle fa-stack-2x
                     {{- if eq $bg "primary" -}}
                       {{- print " text-dark" -}}
@@ -78,6 +78,7 @@ <h5>
                     {{- end -}}
                   "></i>
                   <i class="{{ .icon }} fa-stack-1x fa-inverse"></i>
+                  <span class="sr-only">{{ .text | default $.Params.title }}</span>
                 </span>
               {{- end -}}
             {{- else -}}
@@ -169,11 +170,11 @@ <h5>
         {{- with .Params.asset -}}
           {{- if isset . "image" }}
             <div class="col-12 text-center d-none d-lg-inline">
-              <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="img-fluid p-2" alt="{{ .Params.asset.text }}">
+              <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="img-fluid p-2" alt="{{ .text | default $.Params.title }}">
             </div>
           {{- else if isset . "icon" }}
             <div class="col-12 text-center d-none d-lg-inline">
-              <span class="fa-stack fa-4x">
+              <span class="fa-stack fa-4x" title="{{ .text | default $.Params.title }}">
                 <i class="fas fa-circle fa-stack-2x
                   {{- if eq $bg "primary" -}}
                     {{- print " text-dark" -}}
@@ -182,6 +183,7 @@ <h5>
                   {{- end -}}
                 "></i>
                 <i class="{{ .icon }} fa-stack-1x fa-inverse"></i>
+                <span class="sr-only">{{ .text | default $.Params.title }}</span>
               </span>
             </div>
           {{- end -}}

diff --git a/layouts/partials/fragments/items.html b/layouts/partials/fragments/items.html
@@ -23,9 +23,9 @@
               <div class="row image justify-content-center align-items-center">
                 {{- with $item.asset -}}
                   {{- if .image }}
-                    <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="p-2 w-75 mb-2" alt="{{ .text }}">
+                    <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="p-2 w-75 mb-2" alt="{{ .text | default $item.title }}">
                   {{- else if .icon }}
-                    <span class="fa-stack fa-3x m-2">
+                    <span class="fa-stack fa-3x m-2" title="{{ .text | default $item.title }}">
                       <i class="fas fa-circle fa-stack-2x
                         {{- if eq $bg "primary" -}}
                           {{- print " text-dark" -}}
@@ -34,6 +34,7 @@
                         {{- end -}}
                       "></i>
                       <i class="{{ .icon }} fa-stack-1x fa-inverse"></i>
+                      <span class="sr-only">{{ .text | default $item.title }}</span>
                     </span>
                   {{- end -}}
                 {{- end }}

diff --git a/layouts/partials/fragments/member.html b/layouts/partials/fragments/member.html
@@ -61,14 +61,15 @@ <h6 class="font-italic mb-1">
               {{- with $member.icons -}}
                 <div class="row justify-content-center pt-4">
                   {{- range . -}}
-                    <span class="fa-stack fa-2x m-2">
+                    <span class="fa-stack fa-2x m-2" title="{{ .text }}">
                       <a href="{{ .url }}">
                         <i class="fas fa-circle fa-stack-2x
                           {{- if eq $bg "primary" -}}
                             {{- print " text-dark" -}}
                           {{- end -}}
                         "></i>
                         <i class="{{ .icon }} fa-stack-1x fa-inverse"></i>
+                        <span class="sr-only">{{ .text }}</span>
                       </a>
                     </span>
                   {{- end }}
@@ -150,14 +151,15 @@ <h6 class="font-italic mb-0">
                   <div class="col-12 text-center">
                     <div class="row justify-content-lg-start justify-content-center py-2">
                       {{- range . -}}
-                        <span class="fa-stack fa-2x m-2">
+                        <span class="fa-stack fa-2x m-2" title="{{ .text }}">
                           <a href="{{ .url }}">
                             <i class="fas fa-circle fa-stack-2x
                               {{- if eq $bg "primary" -}}
                                 {{- print " text-dark" -}}
                               {{- end -}}
                             "></i>
                             <i class="{{ .icon }} fa-stack-1x fa-inverse"></i>
+                            <span class="sr-only">{{ .text }}</span>
                           </a>
                         </span>
                       {{- end -}}

diff --git a/layouts/partials/fragments/nav.html b/layouts/partials/fragments/nav.html
@@ -89,7 +89,7 @@
             <div class="input-group my-0">
               <input type="text" class="form-control py-1" id="search-query-{{ .Name }}" name="s" placeholder="{{- i18n "navbar.search" | default "Search..." -}}">
               <div class="input-group-append">
-                <button class="btn btn-primary"><i class="fa fa-search"></i></button>
+                <button class="btn btn-primary" title="{{- i18n "search.search" | default "Search" -}}"><i class="fa fa-search"></i></button>
               </div>
             </div>
           </form>
@@ -111,7 +111,7 @@
   </div>
   {{- with .Params.repo_button }}
     <div class="d-none d-lg-block pl-auto">
-      <a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button">
+      <a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.github" | default "Github" -}}">
         <i class="{{ printf "%s" .icon | default (printf "fab fa-github") }} mr-2"></i>
         {{ .text | default "Star" }}
       </a>
@@ -185,12 +185,15 @@
 <div class="scroll-to-top bg-primary
   {{- if not .Site.Params.fontawesome.disabled -}}
     {{ print " has-font-icon" }}
-  {{- end -}}">
+  {{- end -}}"
+  title="{{- i18n "navbar.back_to_top" | default "Back to top" -}}"
+  >
   {{- if not .Site.Params.fontawesome.disabled -}}
     <i class="fas fa-angle-up"></i>
   {{- else -}}
     Top
   {{- end -}}
+  <span class="sr-only">{{ i18n "navbar.back_to_top" | default "Back to top" }}</span>
 </div>
 {{- if .Params.search }}
 {{ partial "helpers/search-result-template.html" (dict "self" $self "name" .Name "message_class" "p-2" "background" $bg) }}

diff --git a/layouts/partials/fragments/search.html b/layouts/partials/fragments/search.html
@@ -9,7 +9,7 @@
       <div class="input-group my-0">
         <input type="text" class="form-control py-1" id="search-query-{{ .Name }}" name="s" placeholder="{{- i18n "navbar.search" | default "Search..." -}}">
         <div class="input-group-append">
-          <button class="btn btn-primary"><i class="fa fa-search"></i></button>
+          <button class="btn btn-primary" title="{{- i18n "search.search" | default "Search" -}}"><i class="fa fa-search"></i></button>
         </div>
       </div>
     </form>

diff --git a/layouts/partials/fragments/toc.html b/layouts/partials/fragments/toc.html
@@ -65,9 +65,9 @@
     1, otherwise why bother */}}
   {{- if gt (len (split $toc "<li>")) 2 -}}
     {{- partial "helpers/container.html" (dict "start" true "fragment" "TOC" "in_slot" .in_slot "bg" $bg "Name" .Name "padding" .Params.padding) -}}
-        <div class="toc">
-          {{- safeHTML $toc -}}
-        </div>
+      <div class="toc">
+        {{- safeHTML $toc -}}
+      </div>
     {{- partial "helpers/container.html" (dict "end" true "in_slot" .in_slot) -}}
   {{- end -}}
 {{- end -}}