fix empty links and hide <i> for screenreaders

This commit is contained in:
Luce Carević 2019-03-02 13:32:36 +01:00
parent c31dd67c5d
commit de07aad18f
3 changed files with 32 additions and 32 deletions

View file

@ -94,7 +94,7 @@
{'tagged'|t} {'tagged'|t}
{loop="$exploded_tags"} {loop="$exploded_tags"}
<span class="label label-tag" title="{'Remove tag'|t}"> <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> </span>
{/loop} {/loop}
{/if} {/if}
@ -195,18 +195,18 @@ <h2>
<input type="checkbox" class="link-checkbox" value="{$value.id}"> <input type="checkbox" class="link-checkbox" value="{$value.id}">
</span> </span>
<span class="linklist-item-infos-controls-item ctrl-edit"> <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>
<span class="linklist-item-infos-controls-item ctrl-delete"> <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"> 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> </a>
</span> </span>
<span class="linklist-item-infos-controls-item ctrl-pin"> <span class="linklist-item-infos-controls-item ctrl-pin">
<a href="?do=pin&amp;id={$value.id}&amp;token={$token}" <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"> 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"></i> <i class="fa fa-thumb-tack" aria-hidden="true"></i>
</a> </a>
</span> </span>
</div> </div>
@ -248,10 +248,10 @@ <h2>
{ignore}do not add space or line break between these div - Firefox issue{/ignore} {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"> class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
<a href="{$value.real_url}" title="{$value.title}"> <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> </a>
<div class="linklist-item-buttons pure-u-0 pure-u-lg-visible"> <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> </div>
<div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="mobile-buttons pure-u-1 pure-u-lg-0">
@ -264,12 +264,12 @@ <h2>
{/if} {/if}
{if="$is_logged_in"} {if="$is_logged_in"}
&middot; &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"> title="{$strDelete}" class="delete-link confirm-delete">
<i class="fa fa-trash"></i> <i class="fa fa-trash" aria-hidden="true"></i>
</a> </a>
&middot; &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} {/if}
</div> </div>
</div> </div>

View file

@ -6,21 +6,21 @@
{'Filters'|t} {'Filters'|t}
</span> </span>
{if="$is_logged_in"} {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}" class="{if="$visibility==='private'"}filter-on{else}filter-off{/if}"
><i class="fa fa-user-secret"></i></a> ><i class="fa fa-user-secret" aria-hidden="true"></i></a>
<a href="?visibility=public" title="{'Only display public links'|t}" <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}" 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} {/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} class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
><i class="fa fa-tag"></i></a> ><i class="fa fa-tag" aria-hidden="true"></i></a>
<a href="#" title="{'Select all'|t}" <a href="#" aria-label="{'Select all'|t}" title="{'Select all'|t}"
class="filter-off select-all-button" class="filter-off select-all-button"
><i class="fa fa-check-square-o"></i></a> ><i class="fa fa-check-square-o" aria-hidden="true"></i></a>
<a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}"> <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"></i> <i class="fa fa-chevron-up" aria-hidden="true"></i>
</a> </a>
{loop="$action_plugin"} {loop="$action_plugin"}
{$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''} {$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"> <form method="GET" class="pure-u-0 pure-u-lg-visible">
<input type="text" name="linksperpage" placeholder="133"> <input type="text" name="linksperpage" placeholder="133">
</form> </form>
<a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="{'Fold all'|t}"> <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"></i> <i class="fa fa-chevron-up" aria-hidden="true"></i>
</a> </a>
</div> </div>
</div> </div>

View file

@ -20,7 +20,7 @@
{if="$is_logged_in || $openshaarli"} {if="$is_logged_in || $openshaarli"}
<li class="pure-menu-item"> <li class="pure-menu-item">
<a href="?do=addlink" class="pure-menu-link" id="shaarli-menu-shaare"> <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> </a>
</li> </li>
<li class="pure-menu-item" id="shaarli-menu-tools"> <li class="pure-menu-item" id="shaarli-menu-tools">
@ -67,27 +67,27 @@
<li class="pure-menu-item" id="shaarli-menu-desktop-search"> <li class="pure-menu-item" id="shaarli-menu-desktop-search">
<a href="#" class="pure-menu-link subheader-opener" <a href="#" class="pure-menu-link subheader-opener"
data-open-id="search" data-open-id="search"
id="search-button" title="{'Search'|t}"> id="search-button" aria-label="{'Search'|t}" title="{'Search'|t}">
<i class="fa fa-search"></i> <i class="fa fa-search" aria-hidden="true"></i>
</a> </a>
</li> </li>
<li class="pure-menu-item" id="shaarli-menu-desktop-rss"> <li class="pure-menu-item" id="shaarli-menu-desktop-rss">
<a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}"> <a href="?do={$feed_type}{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}">
<i class="fa fa-rss"></i> <i class="fa fa-rss" aria-hidden="true"></i>
</a> </a>
</li> </li>
{if="!$is_logged_in"} {if="!$is_logged_in"}
<li class="pure-menu-item" id="shaarli-menu-desktop-login"> <li class="pure-menu-item" id="shaarli-menu-desktop-login">
<a href="?do=login" class="pure-menu-link" <a href="?do=login" class="pure-menu-link"
data-open-id="header-login-form" data-open-id="header-login-form"
id="login-button" title="{'Login'|t}"> id="login-button" aria-label="{'Login'|t}" title="{'Login'|t}">
<i class="fa fa-user"></i> <i class="fa fa-user" aria-hidden="true"></i>
</a> </a>
</li> </li>
{else} {else}
<li class="pure-menu-item" id="shaarli-menu-desktop-logout"> <li class="pure-menu-item" id="shaarli-menu-desktop-logout">
<a href="?do=logout" class="pure-menu-link" title="{'Logout'|t}"> <a href="?do=logout" class="pure-menu-link" aria-label="{'Logout'|t}" title="{'Logout'|t}">
<i class="fa fa-sign-out"></i> <i class="fa fa-sign-out" aria-hidden="true"></i>
</a> </a>
</li> </li>
{/if} {/if}