fix a11y

[github/shaarli/Shaarli.git] / tpl / default / tag.list.html
diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html

index 81d6e5af7d428bf3a3b48dfd7ecc7d30a213d4f2..d5777465ce3177e62fc59f52c0cd70506e32306b 100644 (file)
--- a/tpl/default/tag.list.html
+++ b/tpl/default/tag.list.html
@@ -1,5 +1,5 @@
  <!DOCTYPE html>
-<html>
+<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
  <head>
    {include="includes"}
  </head>
@@ -13,23 +13,27 @@
    <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
      {$countTags=count($tags)}
      <h2 class="window-title">{'Tag list'|t} - {$countTags} {'tags'|t}</h2>
-    <p style="text-align: center">
-      <a href="?searchtags={$search_tags|urlencode}">{'List all links with those tags'|t}</a>
-    </p>
+    {if="!empty($search_tags)"}
+      <p class="center">
+        <a href="?searchtags={$search_tags|urlencode}" class="pure-button pure-button-shaarli">
+          {'List all links with those tags'|t}
+        </a>
+      </p>
+    {/if}
  
-    <div id="search-tagcloud" class="pure-g">
+    <div id="search-tagcloud" class="pure-g searchform-block search-tagcloud">
        <div class="pure-u-lg-1-4"></div>
        <div class="pure-u-1 pure-u-lg-1-2">
          <form method="GET">
            <input type="hidden" name="do" value="taglist">
-          <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}"
+          <input type="text" name="searchtags" aria-label="{'Filter by tag'|t}" placeholder="{'Filter by tag'|t}"
                   {if="!empty($search_tags)"}
                   value="{$search_tags}"
                   {/if}
            autocomplete="off" data-multiple data-autofirst data-minChars="1"
            data-list="{loop="$tags"}{$key}, {/loop}"
            >
-          <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+          <button type="submit" class="search-button" aria-label="{'Search'|t}"><i class="fa fa-search" aria-hidden="true"></i></button>
          </form>
        </div>
        <div class="pure-u-lg-1-4"></div>
@@ -41,14 +45,14 @@
        {/loop}
      </div>
  
-    <div id="taglist">
+    <div id="taglist" class="taglist-container">
        {loop="tags"}
          <div class="tag-list-item pure-g" data-tag="{$key}">
            <div class="pure-u-1">
-            {if="isLoggedIn()===true"}
-              <a href="#" class="delete-tag"><i class="fa fa-trash"></i></a>&nbsp;&nbsp;
-              <a href="?do=changetag&fromtag={$key|urlencode}" class="rename-tag">
-                <i class="fa fa-pencil-square-o {$key}"></i>
+            {if="$is_logged_in===true"}
+              <a href="#" class="delete-tag" aria-label="{'Delete'|t}"><i class="fa fa-trash" aria-hidden="true"></i></a>&nbsp;&nbsp;
+              <a href="?do=changetag&fromtag={$key|urlencode}" class="rename-tag" aria-label="{'Rename tag'|t}">
+                <i class="fa fa-pencil-square-o {$key}" aria-hidden="true"></i>
                </a>
              {/if}
  
@@ -59,10 +63,10 @@
                {$value}
              {/loop}
            </div>
-          {if="isLoggedIn()===true"}
+          {if="$is_logged_in===true"}
              <div class="rename-tag-form pure-u-1">
                <input type="text" name="{$key}" value="{$key}" class="rename-tag-input" />
-              <a href="#" class="validate-rename-tag"><i class="fa fa-check"></i></a>
+              <a href="#" class="validate-rename-tag"><i class="fa fa-check" aria-hidden="true"></i></a>
              </div>
            {/if}
          </div>
@@ -77,12 +81,10 @@
    </div>
  </div>
  
-{if="isLoggedIn()===true"}
+{if="$is_logged_in===true"}
    <input type="hidden" name="taglist" value="{loop="$tags"}{$key} {/loop}"
  {/if}
  
-{include="tag.sort"}
-
  {include="page.footer"}
  </body>
  </html>