haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 07:55:36 +00:00
Code Issues Releases Wiki Activity

Improve Accessibility (#1113)

Browse Source 
* Add role
* Add aria-hidden to decoration icons
* Add sr-only css and add column header
This commit is contained in:
Daniel Pan
2016-04-13 20:10:30 +08:00
parent ad6591fb82
commit 0320d2e4b2
6 changed files with 62 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
media/css/seahub.css
View File

@@ -355,6 +355,16 @@ p { margin:0.5em 0; }
text-align:center;
margin:0 0 15px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/** for input, textarea in form **/ /* e.g repo-create */
.input, .textarea {
width:260px;

8
seahub/templates/base_for_backbone.html
View File

@@ -24,7 +24,7 @@
</head>
<body>
<div id="wrapper" class="{{ LANGUAGE_CODE }}">
<div id="wrapper" role="application" class="{{ LANGUAGE_CODE }}">
<!--[if lt IE 10]>
<p id="top-browser-tip">{% trans "We no longer support this version of IE. Please upgrade it to version 10 or above." %} <span class="close">{% trans "Close" %}</span></p>
<![endif]-->
@@ -37,7 +37,7 @@
{% endif %}
{% endblock info_bar_message %}
<div id="header">
<div id="header" role="banner">
<div id="header-inner">
{% block notice_panel %}{% endblock %}
<a href="{{ SITE_ROOT }}" id="logo" class="fleft">
@@ -117,9 +117,9 @@
<div id="main" class="clear">
<div id="left-panel">
<div class="side-tabnav hide" id="side-nav"></div>
<div class="side-tabnav hide" id="side-nav" role="navigation" ></div>
</div>
<div id="right-panel">
<div id="right-panel" role="main">
{% block right_panel %}{% endblock %}
</div>
<div id="main-panel" class="clear w100 ovhd">

3
seahub/templates/footer.html
View File

@@ -1,5 +1,5 @@
{% load i18n %}
<div id="footer" class="ovhd">
<div id="footer" role="contentinfo" class="ovhd">
<div class="items fleft">
<div class="item">
<h4>{% trans "Documents" %}</h4>
@@ -21,4 +21,3 @@
<p><a href="http://seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}about/" target="_blank">{% trans "About Us" %}</a></p>
</div>
</div>

67
seahub/templates/js/templates.html
View File

@@ -30,7 +30,7 @@
</script>
<script type="text/template" id="repo-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<% if (name) { %>
<td><span class="repo-name-span"><a href="#my-libs/lib/<%= id %>"><%- name %></a></span></td>
@@ -65,7 +65,7 @@
</script>
<script type="text/template" id="group-repo-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td><a href="#group/<%= group_id %>/lib/<%= id %>"><%- name %></a></td>
<td class="alc">
@@ -81,7 +81,7 @@
</script>
<script type="text/template" id="organization-repo-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td><a href="#org/lib/<%= id %>"><%- name %></a></td>
<td class="alc">
@@ -585,7 +585,7 @@
</script>
<script type="text/template" id="shared-repo-tmpl">
<td>
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="" width="24" />
<img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
</td>
<td><a href="#shared-libs/lib/<%= id %>"><%- name %></a></td>
<td class="alc">
@@ -600,23 +600,24 @@
<h3 class="hd">{% trans "Files" %}</h3>
<ul class="side-tabnav-tabs">
{% if user.permissions.can_add_repo %}
<li class="tab<% if (cur_tab == 'mine') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#my-libs/"><span class="sf2-icon-user"></span>{% trans "Mine" %}</a></li>
{% comment %}
{% if sub_lib_enabled %}
<li class="tab<% if (cur_tab == 'sub-libs') { %> tab-cur<% } %>"><a href="#my-sub-libs/">{% trans "Sub-libraries" %}</a></li>
{% endif %}
{% endcomment %}
<li class="tab<% if (cur_tab == 'mine') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#my-libs/"><span aria-hidden="true" class="sf2-icon-user"></span>{% trans "Mine" %}</a>
</li>
{% endif %}
<li class="tab<% if (cur_tab == 'shared') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#shared-libs/"><span class="sf2-icon-share"></span>{% trans "Shared" %}</a></li>
<li class="tab<% if (cur_tab == 'shared') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#shared-libs/"><span aria-hidden="true" class="sf2-icon-share"></span>{% trans "Shared" %}</a>
</li>
{% if user.permissions.can_view_org %}
<li class="tab<% if (cur_tab == 'org') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#org/"><span class="sf2-icon-organization"></span>{% trans "Organization" %}</a></li>
<li class="tab<% if (cur_tab == 'org') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#org/"><span aria-hidden="true" class="sf2-icon-organization"></span>{% trans "Organization" %}</a>
</li>
{% endif %}
<% if (cur_tab == 'group') { %>
<li class="tab" id="group-nav">
<a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-down fright"></span></a>
<a href="#"><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Groups" %}<span aria-hidden="true" class="toggle-icon icon-caret-down fright"></span></a>
<ul class="grp-list">
<li<% if (cur_group_tab == 'groups') { %> class="tab-cur"<% }%>><a href="{% url 'group_list' %}"><span class="sharp">#</span>{% trans "All Groups" %}</a></li>
<% for (var i = 0, len = groups.length; i < len; i++) { %>
@@ -633,10 +634,10 @@
<% } else { %>
<li class="tab" id="group-nav">
<% if (show_group_list) { %>
<a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-down fright"></span></a>
<a href="#"><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-down fright"></span></a>
<ul class="grp-list">
<% } else { %>
<a href="#"><span class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-left fright"></span></a>
<a href="#"><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Groups" %}<span class="toggle-icon icon-caret-left fright"></span></a>
<ul class="grp-list hide">
<% } %>
<li>
@@ -659,25 +660,39 @@
{% endif %}
</div>
<ul class="side-tabnav-tabs">
<li class="tab<% if (cur_tab == 'starred') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#starred/"><span class="sf2-icon-star"></span>{% trans "Starred" %}</a></li>
<li class="tab<% if (cur_tab == 'starred') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#starred/"><span aria-hidden="true" class="sf2-icon-star"></span>{% trans "Starred" %}</a>
</li>
{% if events_enabled %}
<li class="tab<% if (cur_tab == 'activities') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#activities/"><span class="sf2-icon-clock"></span>{% trans "Activities" %}</a></li>
<li class="tab<% if (cur_tab == 'activities') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#activities/"><span aria-hidden="true" class="sf2-icon-clock"></span>{% trans "Activities" %}</a>
</li>
{% endif %}
<% for (var i = 0, len = mods_enabled.length; i < len; i++) { %>
<% if (mods_enabled[i] == 'personal wiki') { %>
<li class="tab"><a href="{% url 'personal_wiki' %}"><span class="sf2-icon-wiki"></span>{% trans "Personal Wiki" %}</a></li>
<li class="tab">
<a href="{% url 'personal_wiki' %}"><span aria-hidden="true" class="sf2-icon-wiki"></span>{% trans "Personal Wiki" %}</a>
</li>
<% } %>
<% } %>
<li class="tab<% if (cur_tab == 'devices') { %> tab-cur<% } %>"><a href="{{ SITE_ROOT }}#devices/"><span class="sf2-icon-monitor"></span>{% trans "Devices" %}</a></li>
<li class="tab<% if (cur_tab == 'devices') { %> tab-cur<% } %>">
<a href="{{ SITE_ROOT }}#devices/"><span aria-hidden="true" class="sf2-icon-monitor"></span>{% trans "Devices" %}</a>
</li>
</ul>
<h3 class="hd">{% trans "Share Admin" %}</h3>
<ul class="side-tabnav-tabs">
<% if (can_add_repo) { %>
<li class="tab"><a href="{{ SITE_ROOT }}share/"><span class="sf2-icon-library"></span>{% trans "Libraries" %}</a></li>
<li class="tab"><a href="{{ SITE_ROOT }}share/folders/"><span class="sf2-icon-folder"></span>{% trans "Folders" %}</a></li>
<li class="tab">
<a href="{{ SITE_ROOT }}share/"><span aria-hidden="true" class="sf2-icon-library"></span>{% trans "Libraries" %}</a>
</li>
<li class="tab">
<a href="{{ SITE_ROOT }}share/folders/"><span aria-hidden="true" class="sf2-icon-folder"></span>{% trans "Folders" %}</a>
</li>
<% } %>
<li class="tab"><a href="{{ SITE_ROOT }}share/links/"><span class="sf2-icon-link"></span>{% trans "Links" %}</a></li>
<li class="tab">
<a href="{{ SITE_ROOT }}share/links/"><span aria-hidden="true" class="sf2-icon-link"></span>{% trans "Links" %}</a>
</li>
</ul>
</script>
@@ -828,18 +843,18 @@
<script type="text/template" id="my-repos-hd-tmpl">
<tr>
<th width="4%"><!--icon--></th>
<th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
<th width="42%" class="by-name cspt">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></th>
<th width="14%"><!--op--></th>
<th width="14%"><span class="sr-only">{% trans "Actions" %}</span></th>
<th width="20%">{% trans "Size" %}</th>
<th width="20%" class="by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></th>
</tr>
</script>
<script type="text/template" id="shared-repos-hd-tmpl">
<tr>
<th width="4%"><!--icon--></th>
<th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
<th width="40%" class="by-name cspt">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></th>
<th width="8%"><!--op--></th>
<th width="8%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
<th width="14%">{% trans "Size" %}</th>
<th width="18%" class="by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></th>
<th width="16%">{% trans "Shared By" %}</th>

6
seahub/templates/libraries.html
View File

@@ -11,7 +11,7 @@
<script type="text/template" id="my-own-repos-tmpl">
<div class="hd ovhd">
<h3 class="fleft">{% trans "Mine" %}</h3>
<button class="repo-create fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
<button class="repo-create fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
</div>
<table class="my-own-repos-table hide">
<thead></thead>
@@ -43,7 +43,7 @@
<h3 class="fleft">{% trans "Organization" %}</h3>
{% if can_add_pub_repo %}
<div class="fright dropdown js-add-pub-lib-dropdown">
<button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
<button class="dropdown-toggle"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
<ul class="dropdown-menu hide">
<li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
<li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
@@ -68,7 +68,7 @@
<div class="hd ovhd">
<h3 class="fleft">{% trans "My Groups" %}</h3>
{% if user.permissions.can_add_group %}
<button id="add-group" class="fright"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
<button id="add-group" class="fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
{% endif %}
</div>

6
static/scripts/app/models/repo.js
View File

@@ -50,11 +50,11 @@ define([
getIconTitle: function() {
var icon_title = '';
if (this.get('encrypted')) {
icon_title = gettext("Encrypted");
icon_title = gettext("Encrypted library");
} else if (this.get('permission') == "rw") {
icon_title = gettext("Read-Write");
icon_title = gettext("Read-Write library");
} else {
icon_title = gettext("Read-Only");
icon_title = gettext("Read-Only library");
}
return icon_title;