summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAleksander Machniak <machniak@kolabsys.com>2014-06-16 10:30:23 (GMT)
committerAleksander Machniak <machniak@kolabsys.com>2014-06-16 10:30:23 (GMT)
commit99dcc44960a050e7eb62a0cd3dd67f315b34cd02 (patch)
tree1b6c0390af140987c55cd276f59e81c16bfe64b7
parent1eacbc2e34278ec3fe1215dafcda4113f8248e0e (diff)
downloadroundcubemail-plugins-kolab-99dcc44960a050e7eb62a0cd3dd67f315b34cd02.tar.gz
Accessibility improvements and fixes
-rw-r--r--plugins/kolab_activesync/kolab_activesync.js15
-rw-r--r--plugins/kolab_activesync/kolab_activesync_ui.php6
-rw-r--r--plugins/kolab_activesync/localization/en_US.inc1
-rw-r--r--plugins/kolab_activesync/skins/classic/config.css8
-rw-r--r--plugins/kolab_activesync/skins/larry/config.css13
-rw-r--r--plugins/kolab_activesync/skins/larry/templates/config.html13
-rw-r--r--plugins/kolab_delegation/skins/classic/style.css9
-rw-r--r--plugins/kolab_delegation/skins/larry/style.css10
8 files changed, 37 insertions, 38 deletions
diff --git a/plugins/kolab_activesync/kolab_activesync.js b/plugins/kolab_activesync/kolab_activesync.js
index 1f625e6..9aa78e1 100644
--- a/plugins/kolab_activesync/kolab_activesync.js
+++ b/plugins/kolab_activesync/kolab_activesync.js
@@ -35,8 +35,7 @@ function kolab_activesync_config()
if (rcmail.gui_objects.devicelist) {
var devicelist = new rcube_list_widget(rcmail.gui_objects.devicelist,
{ multiselect:true, draggable:false, keyboard:true });
- devicelist.addEventListener('select', select_device);
- devicelist.init();
+ devicelist.addEventListener('select', select_device).init().focus();
// load frame if there are no devices
if (!rcmail.env.devicecount)
@@ -56,14 +55,16 @@ function kolab_activesync_config()
$('#'+this.id+'_alarm').prop('checked', false);
});
- $('.subscriptionblock thead td.subscription img, .subscriptionblock thead td.alarm img').click(function(e) {
- var $this = $(this),
- classname = $this.parent().get(0).className,
- list = $this.closest('table').find('input.'+classname),
+ var fn = function(elem) {
+ var classname = elem.className,
+ list = $(elem).closest('table').find('input.' + classname),
check = list.not(':checked').length > 0;
list.prop('checked', check).change();
- });
+ };
+
+ $('th.subscription,th.alarm').click(function() { fn(this); })
+ .keydown(function(e) { if (e.which == 13 || e.which == 32) fn(this); });
}
/* private methods */
diff --git a/plugins/kolab_activesync/kolab_activesync_ui.php b/plugins/kolab_activesync/kolab_activesync_ui.php
index 84c8b88..e2ff93f 100644
--- a/plugins/kolab_activesync/kolab_activesync_ui.php
+++ b/plugins/kolab_activesync/kolab_activesync_ui.php
@@ -144,9 +144,11 @@ class kolab_activesync_ui
$alarms = ($attrib['type'] == 'event' || $attrib['type'] == 'task');
$table = new html_table(array('cellspacing' => 0));
- $table->add_header('subscription', $attrib['syncicon'] ? html::img(array('src' => $this->skin_path . $attrib['syncicon'], 'title' => $this->plugin->gettext('synchronize'))) : '');
+ $table->add_header(array('class' => 'subscription', 'title' => $this->plugin->gettext('synchronize'), 'tabindex' => 0),
+ $attrib['syncicon'] ? html::img(array('src' => $this->skin_path . $attrib['syncicon'])) : '');
if ($alarms) {
- $table->add_header('alarm', $attrib['alarmicon'] ? html::img(array('src' => $this->skin_path . $attrib['alarmicon'], 'title' => $this->plugin->gettext('withalarms'))) : '');
+ $table->add_header(array('class' => 'alarm', 'title' => $this->plugin->gettext('withalarms'), 'tabindex' => 0),
+ $attrib['alarmicon'] ? html::img(array('src' => $this->skin_path . $attrib['alarmicon'])) : '');
}
$table->add_header('foldername', $this->plugin->gettext('folder'));
diff --git a/plugins/kolab_activesync/localization/en_US.inc b/plugins/kolab_activesync/localization/en_US.inc
index 378b49e..6d4e0bf 100644
--- a/plugins/kolab_activesync/localization/en_US.inc
+++ b/plugins/kolab_activesync/localization/en_US.inc
@@ -30,5 +30,6 @@ $labels['friendlyname'] = 'Friendly name';
$labels['os'] = 'Operating system';
$labels['oslanguage'] = 'OS language';
$labels['phonenumber'] = 'Phone number';
+$labels['arialabeldeviceframe'] = 'Device synchronization settings form';
?>
diff --git a/plugins/kolab_activesync/skins/classic/config.css b/plugins/kolab_activesync/skins/classic/config.css
index 8d7e13d..cc4b0db 100644
--- a/plugins/kolab_activesync/skins/classic/config.css
+++ b/plugins/kolab_activesync/skins/classic/config.css
@@ -52,22 +52,22 @@ div.subscriptionblock h3.note {
background-position: 5px -76px;
}
-#foldersubscriptions thead td {
+#foldersubscriptions thead th {
color: #999;
font-weight: bold;
padding: 2px;
text-align: center;
}
-#foldersubscriptions thead tr td {
+#foldersubscriptions thead tr th {
border-top: 1px solid #ddd;
}
-#foldersubscriptions thead td img {
+#foldersubscriptions thead th {
cursor: pointer;
}
-#foldersubscriptions thead td.foldername {
+#foldersubscriptions thead th.foldername {
text-align: left;
}
diff --git a/plugins/kolab_activesync/skins/larry/config.css b/plugins/kolab_activesync/skins/larry/config.css
index a676f2c..dc6c3d1 100644
--- a/plugins/kolab_activesync/skins/larry/config.css
+++ b/plugins/kolab_activesync/skins/larry/config.css
@@ -1,13 +1,9 @@
/* Stylesheets for the Kolab ActiveSync configuration UI */
-#sectionslist {
- width: 220px;
-}
-
#prefs-box {
position: absolute;
top: 0;
- left: 232px;
+ left: 272px;
right: 0;
bottom: 0;
}
@@ -57,7 +53,7 @@ div.subscriptionblock h3.note {
background-position: 4px -78px;
}
-#foldersubscriptions thead td {
+#foldersubscriptions thead th {
color: #69939e;
font-weight: bold;
padding: 2px;
@@ -68,11 +64,12 @@ div.subscriptionblock h3.note {
text-align: center;
}
-#foldersubscriptions thead td.foldername {
+#foldersubscriptions thead th.foldername {
text-align: left;
}
-#foldersubscriptions thead td img {
+#foldersubscriptions thead th.alarm,
+#foldersubscriptions thead th.subscription {
cursor: pointer;
}
diff --git a/plugins/kolab_activesync/skins/larry/templates/config.html b/plugins/kolab_activesync/skins/larry/templates/config.html
index f025881..8c93af6 100644
--- a/plugins/kolab_activesync/skins/larry/templates/config.html
+++ b/plugins/kolab_activesync/skins/larry/templates/config.html
@@ -10,11 +10,13 @@
<div id="mainscreen" class="offset">
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="kolab_activesync.tabtitle" /></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="directorylist-title">
<h2 id="directorylist-title" class="boxtitle"><roundcube:label name="kolab_activesync.devices" /></h2>
<div class="boxlistcontent">
<roundcube:object name="plugin.devicelist" id="devices-table" class="listing" cellspacing="0" />
@@ -24,11 +26,10 @@
</div>
</div>
-<div id="prefs-box" class="uibox contentbox">
+<div id="prefs-box" class="uibox contentbox" role="main">
<div class="iframebox">
- <roundcube:frame contentframe="activesync-frame" id="activesync-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+ <roundcube:frame contentframe="activesync-frame" id="activesync-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabeldeviceframe" />
</div>
- <roundcube:object name="message" id="message" class="statusbar" />
</div>
</div>
@@ -39,8 +40,8 @@
<script type="text/javascript">
- var viewsplit = new rcube_splitter({ id:'devicelistsplitter', p1:'#sectionslist', p2:'#prefs-box', orientation:'v', relative:true, start:226, min:150, size:12 });
- rcmail.add_onload('viewsplit.init()');
+var viewsplit = new rcube_splitter({ id:'devicelistsplitter', p1:'#sectionslist', p2:'#prefs-box', orientation:'v', relative:true, start:266, min:150, size:12 });
+rcmail.add_onload('viewsplit.init()');
</script>
diff --git a/plugins/kolab_delegation/skins/classic/style.css b/plugins/kolab_delegation/skins/classic/style.css
index db22720..eff69a7 100644
--- a/plugins/kolab_delegation/skins/classic/style.css
+++ b/plugins/kolab_delegation/skins/classic/style.css
@@ -42,22 +42,23 @@ div.foldersblock h3.note {
background-position: 5px -76px;
}
-#delegatefolders thead td {
+#delegatefolders thead th {
color: #999;
font-weight: bold;
padding: 2px;
text-align: center;
}
-#delegatefolders thead tr td {
+#delegatefolders thead tr th {
border-top: 1px solid #ddd;
}
-#delegatefolders thead td img {
+#delegatefolders thead th.read,
+#delegatefolders thead th.write {
cursor: pointer;
}
-#delegatefolders thead td.foldername {
+#delegatefolders thead th.foldername {
text-align: left;
}
diff --git a/plugins/kolab_delegation/skins/larry/style.css b/plugins/kolab_delegation/skins/larry/style.css
index d026d16..7a29ed2 100644
--- a/plugins/kolab_delegation/skins/larry/style.css
+++ b/plugins/kolab_delegation/skins/larry/style.css
@@ -55,25 +55,21 @@ div.foldersblock h3.note {
background-position: 4px -78px;
}
-#delegatefolders thead td {
+#delegatefolders thead th {
color: #69939e;
font-weight: bold;
padding: 2px;
- padding-top: 4px;
+ padding-top: 4px;
min-width: 2em;
background: #d6eaf3;
border-bottom: 2px solid #fff;
text-align: center;
}
-#delegatefolders thead td.foldername {
+#delegatefolders thead th.foldername {
text-align: left;
}
-#delegatefolders thead td img {
- cursor: pointer;
-}
-
#delegatefolders tbody td {
background: #eee;
padding: 2px;