summaryrefslogtreecommitdiff
path: root/skins/larry
diff options
context:
space:
mode:
authorThomas Bruederli <thomas@roundcube.net>2014-06-03 19:13:54 +0200
committerThomas Bruederli <thomas@roundcube.net>2014-06-03 19:13:54 +0200
commit77043f8469ba8e7b64af5b0192b0297ded5c615f (patch)
tree6f8569cca9ba96488fe3149428421990f6410612 /skins/larry
parentf0928eac13b9161e251a779f229e37ec526fd590 (diff)
Apply accessibility improvements to the settings section
Diffstat (limited to 'skins/larry')
-rw-r--r--skins/larry/includes/footer.html1
-rw-r--r--skins/larry/includes/settingstabs.html8
-rw-r--r--skins/larry/settings.css101
-rw-r--r--skins/larry/templates/addressbook.html4
-rw-r--r--skins/larry/templates/folders.html25
-rw-r--r--skins/larry/templates/identities.html12
-rw-r--r--skins/larry/templates/importcontacts.html2
-rw-r--r--skins/larry/templates/responses.html12
-rw-r--r--skins/larry/templates/settings.html11
-rw-r--r--skins/larry/ui.js4
10 files changed, 99 insertions, 81 deletions
diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html
index f421ec5b0..6cd3e62d1 100644
--- a/skins/larry/includes/footer.html
+++ b/skins/larry/includes/footer.html
@@ -6,6 +6,7 @@
var UI = new rcube_mail_ui();
$(document).ready(function(){
UI.set('errortitle', '<roundcube:label name="errortitle" quoting="javascript" />');
+ UI.set('toggleoptions', '<roundcube:label name="toggleadvancedoptions" quoting="javascript" />');
UI.init();
});
diff --git a/skins/larry/includes/settingstabs.html b/skins/larry/includes/settingstabs.html
index e62695848..d43e8f075 100644
--- a/skins/larry/includes/settingstabs.html
+++ b/skins/larry/includes/settingstabs.html
@@ -1,7 +1,9 @@
-<div id="settings-sections" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="settings" /></h2>
+<div id="settings-sections" class="uibox listbox" role="navigation" aria-labelledby="aria-label-settingstabs">
+<h2 class="boxtitle" id="aria-label-settingstabs"><roundcube:label name="settings" /></h2>
<div id="settings-tabs" class="scroller">
- <roundcube:object name="settingstabs" class="listitem" />
+ <ul class="listing iconized">
+ <roundcube:object name="settingstabs" class="listitem" tagname="li" />
+ </ul>
<roundcube:container name="tabs" id="settings-tabs" />
</div>
</div>
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 675ef9973..0517f3c3a 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -70,7 +70,7 @@
width: 20px;
height: 18px;
background: url('images/listicons.png') 0 -1157px no-repeat;
- text-indent: 1000px;
+ text-indent: -5000px;
overflow: hidden;
}
@@ -78,9 +78,10 @@
background-position: -24px -1137px;
}
-#sections-table tbody td.section,
-#settings-sections span.listitem a,
-#settings-sections span.tablink a {
+#sections-table td.section,
+#sections-table .listitem span,
+#settings-sections .listitem a,
+#settings-sections .tablink a {
padding-left: 36px;
background-image: url(images/listicons.png);
background-position: -100px 0;
@@ -88,120 +89,120 @@
}
/* note: support span.tablink because this is used by plugins */
-#settings-sections span.listitem a,
-#settings-sections span.tablink a {
+#settings-sections .listitem a,
+#settings-sections .tablink a {
background-position: 6px -862px;
}
-#settings-sections span.selected a,
-#settings-sections span.tablink.selected a {
+#settings-sections .selected a,
+#settings-sections .tablink.selected a {
background-position: 6px -887px;
}
-#settings-sections span.preferences a {
+#settings-sections .preferences a {
background-position: 6px -431px;
}
-#settings-sections span.preferences.selected a {
+#settings-sections .preferences.selected a {
background-position: 6px -455px;
}
-#settings-sections span.folders a,
-#sections-table #rcmrowfolders td.section {
+#settings-sections .folders a,
+#sections-table #rcmrowfolders .section {
background-position: 6px 2px;
}
-#settings-sections span.folders.selected a,
-#sections-table #rcmrowfolders.selected td.section {
+#settings-sections .folders.selected a,
+#sections-table #rcmrowfolders.selected .section {
background-position: 6px -22px;
}
-#settings-sections span.identities a {
+#settings-sections .identities a {
background-position: 6px -478px;
}
-#settings-sections span.identities.selected a {
+#settings-sections .identities.selected a {
background-position: 6px -502px;
}
-#settings-sections span.filter a {
+#settings-sections .filter a {
background-position: 6px -1746px;
}
-#settings-sections span.filter.selected a {
+#settings-sections .filter.selected a {
background-position: 6px -1770px;
}
-#settings-sections span.password a {
+#settings-sections .password a {
background-position: 6px -1795px;
}
-#settings-sections span.password.selected a {
+#settings-sections .password.selected a {
background-position: 6px -1819px;
}
-#settings-sections span.responses a {
+#settings-sections .responses a {
background-position: 6px -1972px;
}
-#settings-sections span.responses.selected a {
+#settings-sections .responses.selected a {
background-position: 6px -1996px;
}
-#sections-table #rcmrowgeneral td.section {
- background-position: 6px -573px;
+#sections-table #rcmrowgeneral .section {
+ background-position: 4px -573px;
}
-#sections-table #rcmrowgeneral.selected td.section {
- background-position: 6px -598px;
+#sections-table #rcmrowgeneral.selected .section {
+ background-position: 4px -598px;
}
-#sections-table #rcmrowmailbox td.section {
- background-position: 6px -621px;
+#sections-table #rcmrowmailbox .section {
+ background-position: 4px -621px;
}
-#sections-table #rcmrowmailbox.selected td.section {
- background-position: 6px -646px;
+#sections-table #rcmrowmailbox.selected .section {
+ background-position: 4px -646px;
}
-#sections-table #rcmrowcompose td.section {
- background-position: 6px -670px;
+#sections-table #rcmrowcompose .section {
+ background-position: 4px -670px;
}
-#sections-table #rcmrowcompose.selected td.section {
- background-position: 6px -695px;
+#sections-table #rcmrowcompose.selected .section {
+ background-position: 4px -695px;
}
-#sections-table #rcmrowmailview td.section {
- background-position: 6px -718px;
+#sections-table #rcmrowmailview .section {
+ background-position: 4px -718px;
}
-#sections-table #rcmrowmailview.selected td.section {
- background-position: 6px -742px;
+#sections-table #rcmrowmailview.selected .section {
+ background-position: 4px -742px;
}
-#sections-table #rcmrowaddressbook td.section {
- background-position: 6px -766px;
+#sections-table #rcmrowaddressbook .section {
+ background-position: 4px -766px;
}
-#sections-table #rcmrowaddressbook.selected td.section {
- background-position: 6px -791px;
+#sections-table #rcmrowaddressbook.selected .section {
+ background-position: 4px -791px;
}
-#sections-table #rcmrowserver td.section {
- background-position: 6px -814px;
+#sections-table #rcmrowserver .section {
+ background-position: 4px -814px;
}
-#sections-table #rcmrowserver.selected td.section {
- background-position: 6px -838px;
+#sections-table #rcmrowserver.selected .section {
+ background-position: 4px -838px;
}
-#sections-table #rcmrowcalendar td.section {
- background-position: 6px -526px;
+#sections-table #rcmrowcalendar .section {
+ background-position: 4px -526px;
}
-#sections-table #rcmrowcalendar.selected td.section {
- background-position: 6px -550px;
+#sections-table #rcmrowcalendar.selected .section {
+ background-position: 4px -550px;
}
#folderslist,
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
index c9aa5acad..e1101e648 100644
--- a/skins/larry/templates/addressbook.html
+++ b/skins/larry/templates/addressbook.html
@@ -84,10 +84,10 @@
</div><!-- end addressview-left -->
-<div id="addressview-right" role="main">
+<div id="addressview-right" role="main" aria-labelledby="aria-label-contactslist">
<!-- contacts list -->
-<div id="addresslist" class="uibox listbox" aria-labelledby="aria-label-contactslist">
+<div id="addresslist" class="uibox listbox">
<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" id="aria-label-contactslist" />
<div class="scroller withfooter">
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" />
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html
index 56396bf1d..ffb0a7ee1 100644
--- a/skins/larry/templates/folders.html
+++ b/skins/larry/templates/folders.html
@@ -10,9 +10,11 @@
<div id="mainscreen" class="offset">
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="folders" /></h1>
+
<roundcube:include file="/includes/settingstabs.html" />
-<div id="settings-right">
+<div id="settings-right" role="main">
<div id="folderslist" class="uibox listbox">
<h2 id="folderslist-header" class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2>
@@ -20,11 +22,22 @@
<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" />
</div>
<div id="folderslist-footer" class="boxfooter">
- <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" />
+ <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="createfolder" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="return UI.toggle_popup('mailboxmenu',event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="mailboxoptionsmenu" />
<roundcube:if condition="env:quota" />
+ <span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
<roundcube:endif />
</div>
+
+<div id="mailboxmenu" class="popupmenu" aria-hidden="true">
+ <h3 id="aria-label-mailboxmenu" class="voice"><roundcube:label name="arialabelmailboxmenu" /></h3>
+ <ul class="toolbarmenu" id="mailboxoptionsmenu" role="menu" aria-labelledby="aria-label-mailboxmenu">
+ <li role="menuitem"><roundcube:button command="delete-folder" label="delete" classAct="active" /></li>
+ <li role="menuitem"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
+ <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
+ </ul>
+</div>
+
</div>
<div id="folder-details" class="uibox contentbox">
@@ -37,14 +50,6 @@
</div>
-<div id="mailboxmenu" class="popupmenu">
- <ul class="toolbarmenu" id="mailboxoptionsmenu">
- <li><roundcube:button command="delete-folder" label="delete" classAct="active" /></li>
- <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li>
- <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" />
- </ul>
-</div>
-
<roundcube:include file="/includes/footer.html" />
</body>
diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html
index e3d2cc842..91f7f8f71 100644
--- a/skins/larry/templates/identities.html
+++ b/skins/larry/templates/identities.html
@@ -10,23 +10,25 @@
<div id="mainscreen" class="offset">
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
+
<roundcube:include file="/includes/settingstabs.html" />
-<div id="settings-right">
+<div id="settings-right" role="main" aria-labelledby="aria-label-identitieslist">
<div id="identitieslist" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="identities" /></h2>
+<h2 class="boxtitle" id="aria-label-identitieslist"><roundcube:label name="identities" /></h2>
<div class="scroller withfooter">
-<roundcube:object name="identitiesList" id="identities-table" class="listing" cellspacing="0" summary="Identities list" noheader="true" editIcon="" />
+<roundcube:object name="identitiesList" id="identities-table" class="listing" noheader="true" editIcon="" role="listbox" />
</div>
<div class="boxfooter">
-<roundcube:button command="add" type="link" title="newidentity" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" condition="config:identities_level:0<2" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" condition="config:identities_level:0<2" />
+<roundcube:button command="add" type="link" title="newidentity" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="newidentity" condition="config:identities_level:0<2" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="delete" condition="config:identities_level:0<2" />
</div>
</div>
<div id="identity-details" class="uibox contentbox">
<div class="iframebox">
- <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelidentityeditfrom" />
</div>
</div>
diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html
index a670d0354..2bc1d4a26 100644
--- a/skins/larry/templates/importcontacts.html
+++ b/skins/larry/templates/importcontacts.html
@@ -15,7 +15,7 @@
</div>
<div id="pluginbody" class="offset uibox contentbox">
-<h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2>
+<h1 class="boxtitle"><roundcube:label name="importcontacts" /></h1>
<div id="import-box" class="boxcontent">
<roundcube:object name="importstep" class="propform" />
diff --git a/skins/larry/templates/responses.html b/skins/larry/templates/responses.html
index 8e6884539..503ed2177 100644
--- a/skins/larry/templates/responses.html
+++ b/skins/larry/templates/responses.html
@@ -10,23 +10,25 @@
<div id="mainscreen" class="offset">
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
+
<roundcube:include file="/includes/settingstabs.html" />
-<div id="settings-right">
+<div id="settings-right" role="main" aria-labelledby="aria-label-responseslist">
<div id="identitieslist" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="responses" /></h2>
+<h2 class="boxtitle" id="aria-label-responseslist"><roundcube:label name="responses" /></h2>
<div class="scroller withfooter">
-<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" summary="Responses list" noheader="true" />
+<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" noheader="true" role="listbox" />
</div>
<div class="boxfooter">
-<roundcube:button command="add" type="link" title="savenewresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" />
+<roundcube:button command="add" type="link" title="savenewresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="savenewresponse" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="delete" />
</div>
</div>
<div id="identity-details" class="uibox contentbox">
<div class="iframebox">
- <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelresonseeditfrom" />
</div>
</div>
diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html
index 08df7686e..406b9c9b3 100644
--- a/skins/larry/templates/settings.html
+++ b/skins/larry/templates/settings.html
@@ -10,19 +10,22 @@
<div id="mainscreen" class="offset">
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="preferences" /></h1>
+
<roundcube:include file="/includes/settingstabs.html" />
<div id="settings-right">
-<div id="sectionslist" class="uibox listbox">
+<div id="sectionslist" class="uibox listbox" role="navigation" aria-labelledby="aria-label-pefsection">
+<h2 id="aria-label-pefsection" class="boxtitle"><roundcube:label name="section" /></h2>
<div class="scroller">
- <roundcube:object name="sectionslist" id="sections-table" class="listing" />
+ <roundcube:object name="sectionslist" id="sections-table" class="listing iconized" noheader="true" />
</div>
</div>
-<div id="preferences-box" class="uibox contentbox">
+<div id="preferences-box" class="uibox contentbox" role="main">
<div class="iframebox">
- <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabelpreferencesform" />
</div>
</div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index ff0b2e41a..6385e73b1 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -273,7 +273,9 @@ function rcube_mail_ui()
orientation:'v', relative:true, start:266, min:180, size:12 }).init();
}
else if (rcmail.env.action == 'edit-prefs') {
- $('<a href="#toggle">&#9660;</a>')
+ $('<a href="#toggle"></a>')
+ .text(env.toggleoptions)
+ .attr('title', env.toggleoptions)
.addClass('advanced-toggle')
.appendTo('#preferences-details fieldset.advanced legend');