From 94c96751cc0f1ac9de6a7c008e496b47f01a3d1d Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 26 Apr 2016 18:16:41 +0800
Subject: [PATCH] [accessibility] modified 'file view', 'file edit', 'shared
 link'

---
 media/css/seahub.css                  |  1 -
 seahub/templates/file_edit.html       |  4 ++--
 seahub/templates/view_file_base.html  | 14 +++++++-------
 seahub/templates/view_shared_dir.html | 26 ++++++++++++--------------
 4 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 0a7772e8ae..a1a0396372 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2382,7 +2382,6 @@ button.dropdown-toggle:focus {
     text-align:right;
 }
 #file-enc {
-    border:1px solid #ddd;
     padding:0;
 }
 #file-view-tip {
diff --git a/seahub/templates/file_edit.html b/seahub/templates/file_edit.html
index 8290025d1f..1f233518e5 100644
--- a/seahub/templates/file_edit.html
+++ b/seahub/templates/file_edit.html
@@ -127,8 +127,8 @@
     {% if not err and repo.encrypted %}
     <form id="repo-decrypt-form" class="hide" action="" method="post">
         <h3>{% trans 'Library' %} <span class="op-target">{{repo.name}}</span> {% trans 'is encrypted' %}</h3>
-        <label>{% trans 'Password：' %}</label><br />
-        <input type="password" name="password" class="input" />
+        <label for="passwd">{% trans 'Password' %}</label><br />
+        <input type="password" name="password" class="input" id="passwd" />
         <p class="tip">{% trans "The password will be kept in the server for only 1 hour." %}</p>
         <p class="error hide"></p>
         <input type="submit" class="submit" value="{% trans 'Submit' %}" />
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index 074f876ddb..db048a5055 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -11,9 +11,14 @@
 {% block main_panel %}
     <div id="view-hd">
         <h2>{{ filename }}
-            <a id="file-star" class="no-deco {% if is_starred %}icon-star{% else %}icon-star-empty{% endif %}" href="#"></a>
+            {% if is_starred %}
+            <a id="file-star" class="no-deco icon-star" href="#" title="{% trans "starred" %}" aria-label="{% trans "starred" %}"></a>
+            {% else %}
+            <a id="file-star" class="no-deco icon-star-empty" href="#" title="{% trans "unstarred" %}" aria-label="{% trans "unstarred" %}"></a>
+            {% endif %}
+
             {% if is_pro %}
-            <img class="file-locked-icon cspt vam {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" title="{% trans "locked" %}" />
+            <img class="file-locked-icon cspt vam {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" title="{% trans "locked" %}" aria-label="{% trans "locked" %}" />
             {% endif %}
         </h2>
     </div>
@@ -100,9 +105,6 @@
 <script type="text/javascript" src="{{ MEDIA_URL }}js/findAndReplaceDOMText.js"></script>
 {% endif %}
 <script type="text/javascript">
-// rm 'header', so request for unread notices' num won't be sent
-$('#header').remove();
-
 // download
 $(function() {
     var dld_url = $('#download').attr('href');
@@ -239,7 +241,5 @@ $(window).load(function() {
     }
 });
 {% endif %}
-
-$('#main-panel').css('margin-bottom',0);
 </script>
 {% endblock %}
diff --git a/seahub/templates/view_shared_dir.html b/seahub/templates/view_shared_dir.html
index ea748cce2c..471025f9bd 100644
--- a/seahub/templates/view_shared_dir.html
+++ b/seahub/templates/view_shared_dir.html
@@ -24,17 +24,17 @@
         </p>
 
         <div class="fright">
-            <a href="?p={{ path|urlencode }}&mode=list" title="{% trans "List" %}" class="mode-link vam{% if mode == 'list' %} cur-mode-link{% endif %} list-mode-link">
+            <a href="?p={{ path|urlencode }}&mode=list" title="{% trans "List" %}" aria-label="{% trans "List" %}" class="mode-link vam{% if mode == 'list' %} cur-mode-link{% endif %} list-mode-link">
                 {% if mode == 'list' %}
-                    <img src="{{ MEDIA_URL }}img/list-white.png" alt="" width="20" />
+                    <img src="{{ MEDIA_URL }}img/list-white.png" alt="{% trans "List" %}" width="20" />
                 {% else %}
-                    <img src="{{ MEDIA_URL }}img/list.png" alt="" width="20" />
+                    <img src="{{ MEDIA_URL }}img/list.png" alt="{% trans "List" %}" width="20" />
                 {% endif %}
-            </a><a href="?p={{ path|urlencode }}&mode=grid" title="{% trans "Grid" %}" class="mode-link vam{% if mode == 'grid' %} cur-mode-link{% endif %}">
+            </a><a href="?p={{ path|urlencode }}&mode=grid" title="{% trans "Grid" %}" aria-label="{% trans "Grid" %}" class="mode-link vam{% if mode == 'grid' %} cur-mode-link{% endif %}">
                 {% if mode == 'grid' %}
-                    <img src="{{ MEDIA_URL }}img/grid-white.png" alt="" width="20" />
+                    <img src="{{ MEDIA_URL }}img/grid-white.png" alt="{% trans "Grid" %}" width="20" />
                 {% else %}
-                    <img src="{{ MEDIA_URL }}img/grid.png" alt="" width="20" />
+                    <img src="{{ MEDIA_URL }}img/grid.png" alt="{% trans "Grid" %}" width="20" />
                 {% endif %}
             </a>
             {% if not traffic_over_limit %}
@@ -65,8 +65,8 @@
                 <td>{{ dirent.last_modified|translate_seahub_time }}</td>
                 <td>
                     {% if not traffic_over_limit %}
-                    <a class="op-icon vh" href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans 'Download' %}">
-                        <img src="{{MEDIA_URL}}img/download.png" alt="" />
+                    <a class="op-icon vh" href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans 'Download' %}" aria-label="{% trans 'Download' %}">
+                        <img src="{{MEDIA_URL}}img/download.png" alt="{% trans 'Download' %}" />
                     </a>
                     {% endif %}
                 </td>
@@ -97,8 +97,8 @@
                 <td>{{ dirent.last_modified|translate_seahub_time }}</td>
                 <td>
                     {% if not traffic_over_limit %}
-                    <a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}">
-                        <img src="{{MEDIA_URL}}img/download.png" alt="" />
+                    <a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}" aria-label="{% trans "Download"%}">
+                        <img src="{{MEDIA_URL}}img/download.png" alt="{% trans "Download"%}" />
                     </a>
                     {% endif %}
                 </td>
@@ -225,13 +225,11 @@ $(function() {
 
 $('.grid-item').hover(
     function () {
-        $('.img-link', $(this)).addClass('hl');
-        $('.text-link', $(this)).addClass('hl');
+        $('.img-link, .text-link', $(this)).addClass('hl');
         $('.op-icon', $(this)).removeClass('vh');
     },
     function () {
-        $('.img-link', $(this)).removeClass('hl');
-        $('.text-link', $(this)).removeClass('hl');
+        $('.img-link, .text-link', $(this)).removeClass('hl');
         $('.op-icon', $(this)).addClass('vh');
     }
 );