Managesieve: Improved UI accessibility

3 files changed, 30 insertions, 22 deletions

diff --git a/plugins/managesieve/skins/larry/managesieve.css b/plugins/managesieve/skins/larry/managesieve.css
index 2172c60b2..a0526eb68 100644
--- a/plugins/managesieve/skins/larry/managesieve.css
+++ b/plugins/managesieve/skins/larry/managesieve.css
@@ -306,6 +306,7 @@ a.button.disabled
   font-size: 11px;
   padding: 1px;
   vertical-align: middle;
+  max-width: 280px;
 }
 
 html.mozilla #filter-form select
diff --git a/plugins/managesieve/skins/larry/templates/managesieve.html b/plugins/managesieve/skins/larry/templates/managesieve.html
index 471bbf4d2..8d648dbdc 100644
--- a/plugins/managesieve/skins/larry/templates/managesieve.html
+++ b/plugins/managesieve/skins/larry/templates/managesieve.html
@@ -8,35 +8,38 @@
 
 <roundcube:include file="/includes/header.html" />
 
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="managesieve.filters" /></h1>
+
 <div id="mainscreen" class="offset">
 
 <roundcube:include file="/includes/settingstabs.html" />
 
-<div id="settings-right">
-<div id="filtersetslistbox" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="managesieve.filtersets" /></h2>
+<div id="settings-right" role="main">
+<div id="filtersetslistbox" class="uibox listbox" aria-labelledby="aria-label-filtersets">
+<h2 class="boxtitle" id="aria-label-filtersets"><roundcube:label name="managesieve.filtersets" /></h2>
 <div class="scroller withfooter">
-  <roundcube:object name="filtersetslist" id="filtersetslist" class="listing" cellspacing="0" summary="Filters list" type="list" noheader="true" />
+  <roundcube:object name="filtersetslist" id="filtersetslist" class="listing" summary="managesieve.ariasummaryfiltersetslist" type="list" noheader="true" role="listbox" />
 </div>
 <div class="boxfooter">
-  <roundcube:button command="plugin.managesieve-setadd" type="link" title="managesieve.filtersetadd" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="filtersetmenulink" id="filtersetmenulink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('filtersetmenu');return false" innerClass="inner" content="&#9881;" />
+  <roundcube:button command="plugin.managesieve-setadd" type="link" title="managesieve.filtersetadd" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="filtersetmenulink" id="filtersetmenulink" type="link" title="moreactions" class="listbutton groupactions" onclick="return UI.toggle_popup('filtersetmenu', event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="filtersetmenu-menu" />
 </div>
 </div>
 
 <div id="filtersscreen">
-<div id="filterslistbox" class="uibox listbox">
-<h2 class="boxtitle"><roundcube:label name="managesieve.filters" /></h2>
+<div id="filterslistbox" class="uibox listbox" aria-labelledby="aria-label-filters">
+<h2 class="boxtitle" id="aria-label-filters"><roundcube:label name="managesieve.filters" /></h2>
 <div class="scroller withfooter">
-  <roundcube:object name="filterslist" id="filterslist" class="listing" cellspacing="0" summary="Filters list" noheader="true" />
+  <roundcube:object name="filterslist" id="filterslist" class="listing" summary="managesieve.ariasummaryfilterslist" noheader="true" role="listbox" />
 </div>
 <div class="boxfooter">
-  <roundcube:button command="plugin.managesieve-add" type="link" title="managesieve.filteradd" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="filtermenulink" id="filtermenulink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('filtermenu');return false" innerClass="inner" content="&#9881;" />
+  <roundcube:button command="plugin.managesieve-add" type="link" title="managesieve.filteradd" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="filtermenulink" id="filtermenulink" type="link" title="moreactions" class="listbutton groupactions" onclick="return UI.toggle_popup('filtermenu', event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="filtermenu-menu" />
 </div>
 </div>
 
 <div id="filter-box" class="uibox contentbox">
-  <div class="iframebox">
-    <roundcube:object name="filterframe" id="filter-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" />
+  <div class="iframebox" role="complementary" aria-labelledby="aria-label-filterform">
+    <h2 id="aria-label-filterframe" class="voice"><roundcube:label name="managesieve.arialabelfilterform" /></h2>
+    <roundcube:object name="filterframe" id="filter-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" title="managesieve.arialabelfilterform" />
   </div>
 </div>
 
@@ -44,19 +47,21 @@
 </div>
 </div>
 
-<div id="filtersetmenu" class="popupmenu">
-  <ul class="toolbarmenu">
-    <li><roundcube:button command="plugin.managesieve-setact" label="managesieve.enable" classAct="active" /></li>
-    <li><roundcube:button command="plugin.managesieve-setdel" label="delete" classAct="active" /></li>
-    <li class="separator_above"><roundcube:button command="plugin.managesieve-setget" label="download" classAct="active" /></li>
+<div id="filtersetmenu" class="popupmenu" aria-hidden="true">
+  <h3 id="aria-label-setactions" class="voice"><roundcube:label name="managesieve.arialabelfiltersetactions" /></h3>
+  <ul class="toolbarmenu" id="filtersetmenu-menu" role="menu" aria-labelledby="aria-label-setactions">
+    <li role="menuitem"><roundcube:button command="plugin.managesieve-setact" label="managesieve.enable" classAct="active" /></li>
+    <li role="menuitem"><roundcube:button command="plugin.managesieve-setdel" label="delete" classAct="active" /></li>
+    <li role="menuitem" class="separator_above"><roundcube:button command="plugin.managesieve-setget" label="download" classAct="active" /></li>
     <roundcube:container name="filtersetoptions" id="filtersetmenu" />
   </ul>
 </div>
 
-<div id="filtermenu" class="popupmenu">
-  <ul class="toolbarmenu">
-    <li><roundcube:button command="plugin.managesieve-act" label="managesieve.enable" classAct="active" /></li>
-    <li><roundcube:button command="plugin.managesieve-del" label="delete" classAct="active" /></li>
+<div id="filtermenu" class="popupmenu" aria-hidden="true">
+  <h3 id="aria-label-filteractions" class="voice"><roundcube:label name="managesieve.arialabelfilteractions" /></h3>
+  <ul class="toolbarmenu" id="filtermenu-menu" role="menu" aria-labelledby="aria-label-filteractions">
+    <li role="menuitem"><roundcube:button command="plugin.managesieve-act" label="managesieve.enable" classAct="active" /></li>
+    <li role="menuitem"><roundcube:button command="plugin.managesieve-del" label="delete" classAct="active" /></li>
     <roundcube:container name="filteroptions" id="filtermenu" />
   </ul>
 </div>
diff --git a/plugins/managesieve/skins/larry/templates/vacation.html b/plugins/managesieve/skins/larry/templates/vacation.html
index c91eb87c8..26dd2027b 100644
--- a/plugins/managesieve/skins/larry/templates/vacation.html
+++ b/plugins/managesieve/skins/larry/templates/vacation.html
@@ -10,11 +10,13 @@
 
 <div id="mainscreen" class="offset">
 
+<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="managesieve.vacation" /></h1>
+
 <roundcube:include file="/includes/settingstabs.html" />
 
-<div id="managesieve-vacation" class="uibox contentbox">
+<div id="managesieve-vacation" class="uibox contentbox" role="main" aria-labelledby="aria-label-vacationform">
   <div>
-    <h2 class="boxtitle"><roundcube:label name="managesieve.vacation" /></h2>
+    <h2 class="boxtitle" id="aria-label-vacationform"><roundcube:label name="managesieve.vacation" /></h2>
     <roundcube:object name="vacationform" id="vacationform" class="propform boxcontent tabbed" />
   </div>
   <div class="footerleft formbuttons">