ACL: Improved UI accessibility

1 files changed, 12 insertions, 9 deletions

diff --git a/plugins/acl/skins/larry/templates/table.html b/plugins/acl/skins/larry/templates/table.html
index c0b8329c6..3f203e44d 100644
--- a/plugins/acl/skins/larry/templates/table.html
+++ b/plugins/acl/skins/larry/templates/table.html
@@ -1,23 +1,26 @@
 <div id="aclcontainer" class="uibox listbox">
-<div id="acllist-content" class="scroller withfooter">
-    <roundcube:object name="acltable" id="acltable" class="records-table" />
+<div id="acllist-content" class="scroller withfooter" aria-labelledby="aria-label-acltable">
+    <h2 class="boxtitle" id="aria-label-acltable"><roundcube:label name="acl.ariasummaryacltable" /></h2>
+    <roundcube:object name="acltable" id="acltable" class="records-table" summary="acl.ariasummaryacltable" role="listbox" />
 </div>
 <div id="acllist-footer" class="boxfooter">
-    <roundcube:button command="acl-create" id="aclcreatelink" type="link" title="acl.newuser" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="aclmenulink" id="aclmenulink" type="link" title="acl.actions" class="listbutton groupactions"onclick="UI.show_popup('aclmenu', undefined, {above:1});return false" innerClass="inner" content="&#9881;" />
+    <roundcube:button command="acl-create" id="aclcreatelink" type="link" title="acl.newuser" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="aclmenulink" id="aclmenulink" type="link" title="acl.actions" class="listbutton groupactions" onclick="return UI.toggle_popup('aclmenu', event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="aclmenu-menu" />
 </div>
 </div>
 
-<div id="aclmenu" class="popupmenu">
-    <ul class="toolbarmenu selectable iconized">
-        <li><roundcube:button command="acl-edit" label="edit" class="icon" classAct="icon active" innerclass="icon edit" /></li>
-        <li><roundcube:button command="acl-delete" label="delete" class="icon" classAct="icon active" innerclass="icon delete" /></li>
+<div id="aclmenu" class="popupmenu" aria-hidden="true" data-align="bottom">
+    <h3 id="aria-label-aclactions" class="voice"><roundcube:label name="acl.arialabelaclactions" /></h3>
+    <ul id="aclmenu-menu" class="toolbarmenu selectable iconized" role="menu" aria-labelledby="aria-label-aclactions">
+        <li role="menuitem"><roundcube:button command="acl-edit" label="edit" class="icon" classAct="icon active" innerclass="icon edit" /></li>
+        <li role="menuitem"><roundcube:button command="acl-delete" label="delete" class="icon" classAct="icon active" innerclass="icon delete" /></li>
         <roundcube:if condition="!in_array('acl_advanced_mode', (array)config:dont_override)" />
-            <li><roundcube:button name="acl-switch" id="acl-switch" label="acl.advanced" onclick="rcmail.command('acl-mode-switch');return false" class="active" /></li>
+            <li role="menuitem"><roundcube:button name="acl-switch" id="acl-switch" label="acl.advanced" onclick="rcmail.command('acl-mode-switch');return false" class="active" /></li>
         <roundcube:endif />
     </ul>
 </div>
 
-<div id="aclform" class="propform" style="position:absolute; width:480px; top:0; left:0; padding:8px">
+<div id="aclform" class="propform" style="position:absolute; width:480px; top:0; left:0; padding:8px" aria-labelledby="aria-label-aclform" aria-hidden="true" role="dialog">
+    <h3 id="aria-label-aclform" class="voice"><roundcube:label name="acl.arialabelaclform" /></h3>
     <fieldset class="thinbordered"><legend><roundcube:label name="acl.identifier" /></legend>
         <roundcube:object name="acluser" id="acluser" size="35" class="proplist" />
     </fieldset>