kolab_delegation: accessibility improvements (#3086)

plugins/kolab_delegation/kolab_delegation.js

@@ -49,8 +49,8 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
     if (rcmail.gui_objects.delegatelist) {
       rcmail.delegatelist = new rcube_list_widget(rcmail.gui_objects.delegatelist,
         { multiselect:true, draggable:false, keyboard:true });
-      rcmail.delegatelist.addEventListener('select', function(o) { rcmail.select_delegate(o); });
+      rcmail.delegatelist.addEventListener('select', function(o) { rcmail.select_delegate(o); })
-      rcmail.delegatelist.init();
+        .init();
 
       rcmail.enable_command('delegate-add', true);
     }
@@ -77,14 +77,16 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
           $('input.write', this.parentNode.parentNode).prop('checked', false);
       });
 
-      $('.foldersblock thead td img').click(function(e) {
+      var fn = function(elem) {
-        var $this = $(this),
+        var classname = elem.className,
-          classname = $this.parent().get(0).className,
+          list = $(elem).closest('table').find('input.' + classname),
-          list = $this.closest('table').find('input.'+classname),
           check = list.not(':checked').length > 0;
 
         list.prop('checked', check).change();
-      });
+      };
+
+      $('th.read,th.write').click(function() { fn(this); })
+        .keydown(function(e) { if (e.which == 13 || e.which == 32) fn(this); });
     }
   }
 });

plugins/kolab_delegation/kolab_delegation.php

@@ -497,8 +497,8 @@ class kolab_delegation extends rcube_plugin
         $write_ico = $attrib['writeicon'] ? html::img(array('src' => $path . $attrib['writeicon'], 'title' => $this->gettext('write'))) : '';
 
         $table = new html_table(array('cellspacing' => 0));
-        $table->add_header(array('class' => 'read', 'title' => $this->gettext('read')), $read_ico);
+        $table->add_header(array('class' => 'read', 'title' => $this->gettext('read'), 'tabindex' => 0), $read_ico);
-        $table->add_header(array('class' => 'write', 'title' => $this->gettext('write')), $write_ico);
+        $table->add_header(array('class' => 'write', 'title' => $this->gettext('write'), 'tabindex' => 0), $write_ico);
         $table->add_header('foldername', $this->rc->gettext('folder'));
 
         $checkbox_read  = new html_checkbox(array('name' => 'read[]', 'class' => 'read'));

plugins/kolab_delegation/localization/en_US.inc

@@ -27,4 +27,7 @@ $labels['updateerror'] = 'Could not update delegate.';
 $labels['createsuccess'] = 'The delegate was successfully added.';
 $labels['createerror'] = 'Could not add delegate.';
 
+$labels['arialabeldelegatedelete'] = 'Delegate deletion dialog';
+$labels['arialabeldelegateform'] = 'Delegate properties form';
+
 ?>

plugins/kolab_delegation/package.xml

@@ -15,9 +15,9 @@
 		<email>machniak@kolabsys.com</email>
 		<active>yes</active>
 	</lead>
-	<date>2013-06-25</date>
+	<date>2014-06-13</date>
 	<version>
-		<release>0.3</release>
+		<release>0.4</release>
 		<api>0.1</api>
 	</version>
 	<stability>

plugins/kolab_delegation/skins/larry/style.css

@@ -115,10 +115,12 @@ div.foldersblock h3.note {
   background: url(read.png) center no-repeat;
   width: 18px;
   height: 20px;
+  cursor: pointer;
 }
 
 .foldersblock th.write {
   background: url(write.png) center no-repeat;
   width: 18px;
   height: 20px;
+  cursor: pointer;
 }

plugins/kolab_delegation/skins/larry/templates/settings.html

@@ -10,11 +10,13 @@
 
 <div id="mainscreen" class="offset">
 
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="kolab_delegation.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="delegatelist-title">
 	<h2 id="delegatelist-title" class="boxtitle"><roundcube:label name="kolab_delegation.delegates" /></h2>
 	<div class="boxlistcontent">
 		<roundcube:object name="plugin.delegatelist" id="delegate-table" class="listing" cellspacing="0" />
@@ -24,30 +26,29 @@
 	</div>
 </div>
 
-<div id="prefs-box" class="uibox contentbox">
+<div id="prefs-box" class="uibox contentbox" role="main">
 	<div class="iframebox">
-		<roundcube:frame contentframe="delegation-frame" id="delegation-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+		<roundcube:frame contentframe="delegation-frame" id="delegation-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="arialabeldelegateform" />
 	</div>
-	<roundcube:object name="message" id="message" class="statusbar" />
 </div>
 
+</div>
 </div>
 
+<div id="delegate-delete-dialog" role="dialog" aria-labelledby="aria-label-delegatedeletedialog" aria-hidden="true">
+	<h3 id="aria-label-delegatedeletedialog" class="voice"><roundcube:label name="kolab_delegation.arialabeldelegatedelete" /></h3>
+	<p><roundcube:label name="kolab_delegation.delegatedeleteconfirm" /></p>
+	<span><input type="checkbox" value="1" checked="checked" /><roundcube:label name="kolab_delegation.delegateremoveacl" /></span>
 </div>
 
 <roundcube:include file="/includes/footer.html" />
 
 <script type="text/javascript">
 
-	var viewsplit = new rcube_splitter({ id:'delegatelistsplitter', p1:'#sectionslist', p2:'#prefs-box', orientation:'v', relative:true, start:266, min:150, size:12 });
+var viewsplit = new rcube_splitter({ id:'delegatelistsplitter', p1:'#sectionslist', p2:'#prefs-box', orientation:'v', relative:true, start:266, min:150, size:12 });
-	rcmail.add_onload('viewsplit.init()');
+rcmail.add_onload('viewsplit.init()');
 
 </script>
 
-<div id="delegate-delete-dialog">
-	<p><roundcube:label name="kolab_delegation.delegatedeleteconfirm" /></p>
-	<span><input type="checkbox" value="1" checked="checked" /><roundcube:label name="kolab_delegation.delegateremoveacl" /></span>
-</div>
-
 </body>
 </html>