From: Luce Carević <lcarevic@access42.net>
Date: Sat, 2 Mar 2019 12:32:36 +0000 (+0100)
Subject: fix empty links and hide <i> for screenreaders
X-Git-Tag: v0.11.0~26^2~1
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;ds=sidebyside;h=de07aad18fb35dcef1e222d1d453d8c4dd6f355d;p=github%2Fshaarli%2FShaarli.git

fix empty links and hide <i> for screenreaders
---

diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index d7005c21..1cf00783 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -94,7 +94,7 @@
           {'tagged'|t}
           {loop="$exploded_tags"}
               <span class="label label-tag" title="{'Remove tag'|t}">
-                <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times"></i></span></a>
+                <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times" aria-hidden="true"></i></span></a>
               </span>
           {/loop}
         {/if}
@@ -195,18 +195,18 @@
                       <input type="checkbox" class="link-checkbox" value="{$value.id}">
                     </span>
                     <span class="linklist-item-infos-controls-item ctrl-edit">
-                      <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                      <a href="?edit_link={$value.id}" aria-label="{$strEdit}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link" aria-hidden="true"></i></a>
                     </span>
                     <span class="linklist-item-infos-controls-item ctrl-delete">
-                      <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                      <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" aria-label="{$strDelete}"
                          title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
-                        <i class="fa fa-trash"></i>
+                        <i class="fa fa-trash" aria-hidden="true"></i>
                       </a>
                     </span>
                     <span class="linklist-item-infos-controls-item ctrl-pin">
                       <a href="?do=pin&amp;id={$value.id}&amp;token={$token}"
-                         title="{$strToggleSticky}" class="pin-link {if="$value.sticky"}pinned-link{/if} pure-u-0 pure-u-lg-visible">
-                        <i class="fa fa-thumb-tack"></i>
+                         title="{$strToggleSticky}" aria-label="{$strToggleSticky}" class="pin-link {if="$value.sticky"}pinned-link{/if} pure-u-0 pure-u-lg-visible">
+                        <i class="fa fa-thumb-tack" aria-hidden="true"></i>
                       </a>
                     </span>
                   </div>
@@ -248,10 +248,10 @@
                 {ignore}do not add space or line break between these div - Firefox issue{/ignore}
                 class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
                 <a href="{$value.real_url}" title="{$value.title}">
-                  <i class="fa fa-link"></i> {$value.url}
+                  <i class="fa fa-link" aria-hidden="true"></i> {$value.url}
                 </a>
                 <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
-                  <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
+                  <a href="#" aria-label="{$strFold}" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
                 </div>
               </div>
               <div class="mobile-buttons pure-u-1 pure-u-lg-0">
@@ -264,12 +264,12 @@
                 {/if}
                 {if="$is_logged_in"}
                   &middot;
-                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
+                  <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" aria-label="{$strDelete}"
                      title="{$strDelete}" class="delete-link confirm-delete">
-                    <i class="fa fa-trash"></i>
+                    <i class="fa fa-trash" aria-hidden="true"></i>
                   </a>
                   &middot;
-                  <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                  <a href="?edit_link={$value.id}" aria-label="{$strEdit}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link" aria-hidden="true"></i></a>
                 {/if}
               </div>
             </div>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index fe665a84..4e50495a 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -6,21 +6,21 @@
           {'Filters'|t}
         </span>
         {if="$is_logged_in"}
-        <a href="?visibility=private" title="{'Only display private links'|t}"
+        <a href="?visibility=private" aria-label="{'Only display private links'|t}" title="{'Only display private links'|t}"
            class="{if="$visibility==='private'"}filter-on{else}filter-off{/if}"
-        ><i class="fa fa-user-secret"></i></a>
-        <a href="?visibility=public" title="{'Only display public links'|t}"
+        ><i class="fa fa-user-secret" aria-hidden="true"></i></a>
+        <a href="?visibility=public" aria-label="{'Only display public links'|t}" title="{'Only display public links'|t}"
            class="{if="$visibility==='public'"}filter-on{else}filter-off{/if}"
-        ><i class="fa fa-globe"></i></a>
+        ><i class="fa fa-globe" aria-hidden="true"></i></a>
         {/if}
-        <a href="?untaggedonly" title="{'Filter untagged links'|t}"
+        <a href="?untaggedonly" aria-label="{'Filter untagged links'|t}" title="{'Filter untagged links'|t}"
            class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
-        ><i class="fa fa-tag"></i></a>
-        <a href="#" title="{'Select all'|t}"
+        ><i class="fa fa-tag" aria-hidden="true"></i></a>
+        <a href="#" aria-label="{'Select all'|t}" title="{'Select all'|t}"
            class="filter-off select-all-button"
-        ><i class="fa fa-check-square-o"></i></a>
-        <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
-          <i class="fa fa-chevron-up"></i>
+        ><i class="fa fa-check-square-o" aria-hidden="true"></i></a>
+        <a href="#" class="filter-off fold-all pure-u-lg-0" aria-label="{'Fold all'|t}" title="{'Fold all'|t}">
+          <i class="fa fa-chevron-up" aria-hidden="true"></i>
         </a>
         {loop="$action_plugin"}
           {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
@@ -59,8 +59,8 @@
       <form method="GET" class="pure-u-0 pure-u-lg-visible">
         <input type="text" name="linksperpage" placeholder="133">
       </form>
-      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="{'Fold all'|t}">
-        <i class="fa fa-chevron-up"></i>
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" aria-label="{'Fold all'|t}" title="{'Fold all'|t}">
+        <i class="fa fa-chevron-up" aria-hidden="true"></i>
       </a>
     </div>
   </div>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 4f6dd4d8..5f1e4d66 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -20,7 +20,7 @@
         {if="$is_logged_in || $openshaarli"}
           <li class="pure-menu-item">
             <a href="?do=addlink" class="pure-menu-link" id="shaarli-menu-shaare">
-              <i class="fa fa-plus" ></i> {'Shaare'|t}
+              <i class="fa fa-plus" aria-hidden="true"></i> {'Shaare'|t}
             </a>
           </li>
           <li class="pure-menu-item" id="shaarli-menu-tools">
@@ -67,27 +67,27 @@
           <li class="pure-menu-item" id="shaarli-menu-desktop-search">
             <a href="#" class="pure-menu-link subheader-opener"
                data-open-id="search"
-               id="search-button" title="{'Search'|t}">
-              <i class="fa fa-search"></i>
+               id="search-button" aria-label="{'Search'|t}" title="{'Search'|t}">
+              <i class="fa fa-search" aria-hidden="true"></i>
             </a>
           </li>
           <li class="pure-menu-item" id="shaarli-menu-desktop-rss">
-            <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}">
-              <i class="fa fa-rss"></i>
+            <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}">
+              <i class="fa fa-rss" aria-hidden="true"></i>
             </a>
           </li>
           {if="!$is_logged_in"}
             <li class="pure-menu-item" id="shaarli-menu-desktop-login">
               <a href="?do=login" class="pure-menu-link"
                  data-open-id="header-login-form"
-                 id="login-button" title="{'Login'|t}">
-                <i class="fa fa-user"></i>
+                 id="login-button" aria-label="{'Login'|t}" title="{'Login'|t}">
+                <i class="fa fa-user" aria-hidden="true"></i>
               </a>
             </li>
           {else}
             <li class="pure-menu-item" id="shaarli-menu-desktop-logout">
-              <a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}">
-                <i class="fa fa-sign-out"></i>
+              <a href="?do=logout" class="pure-menu-link" aria-label="{'Logout'|t}" title="{'Logout'|t}">
+                <i class="fa fa-sign-out" aria-hidden="true"></i>
               </a>
             </li>
           {/if}