Apply accessibility improvements to the settings section

6 files changed, 39 insertions, 27 deletions

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>