Apply accessibility improvements to the settings section

pull/195/head
Thomas Bruederli 11 years ago
parent f0928eac13
commit 77043f8469

@ -417,11 +417,13 @@ body.iframe.mail #filter-form
/* vacation form */ /* vacation form */
#settings-sections span.vacation a { #settings-sections .vacation a {
background: url(images/vacation_icons.png) no-repeat 7px 1px; background-image: url(images/vacation_icons.png);
background-repeat: no-repeat;
background-position: 7px 1px;
} }
#settings-sections span.vacation.selected a { #settings-sections .vacation.selected a {
background-position: 7px -23px; background-position: 7px -23px;
} }

@ -1088,14 +1088,17 @@ class rcmail extends rcube
} }
else { else {
foreach ($table_data as $row_data) { foreach ($table_data as $row_data) {
$class = !empty($row_data['class']) ? $row_data['class'] : ''; $class = !empty($row_data['class']) ? $row_data['class'] : null;
if (!empty($attrib['rowclass']))
$class = trim($class . ' ' . $attrib['rowclass']);
$rowid = 'rcmrow' . rcube_utils::html_identifier($row_data[$id_col]); $rowid = 'rcmrow' . rcube_utils::html_identifier($row_data[$id_col]);
$table->add_row(array('id' => $rowid, 'class' => $class)); $table->add_row(array('id' => $rowid, 'class' => $class));
// format each col // format each col
foreach ($a_show_cols as $col) { foreach ($a_show_cols as $col) {
$table->add($col, $this->Q(is_array($row_data[$col]) ? $row_data[$col][0] : $row_data[$col])); $val = is_array($row_data[$col]) ? $row_data[$col][0] : $row_data[$col];
$table->add($col, empty($attrib['ishtml']) ? $this->Q($val) : $val);
} }
} }
} }

@ -474,6 +474,7 @@ $labels['miscfolding'] = 'RFC 2047/2231 (MS Outlook)';
$labels['2047folding'] = 'Full RFC 2047 (other)'; $labels['2047folding'] = 'Full RFC 2047 (other)';
$labels['force7bit'] = 'Use MIME encoding for 8-bit characters'; $labels['force7bit'] = 'Use MIME encoding for 8-bit characters';
$labels['advancedoptions'] = 'Advanced options'; $labels['advancedoptions'] = 'Advanced options';
$labels['toggleadvancedoptions'] = 'Toggle advanced options';
$labels['focusonnewmessage'] = 'Focus browser window on new message'; $labels['focusonnewmessage'] = 'Focus browser window on new message';
$labels['checkallfolders'] = 'Check all folders for new messages'; $labels['checkallfolders'] = 'Check all folders for new messages';
$labels['displaynext'] = 'After message delete/move display the next message'; $labels['displaynext'] = 'After message delete/move display the next message';
@ -605,6 +606,9 @@ $labels['arialabelattachmentpreview'] = 'Attachment preview';
$labels['ariasummarycomposecontacts'] = 'List of contacts and groups to select as recipients'; $labels['ariasummarycomposecontacts'] = 'List of contacts and groups to select as recipients';
$labels['arialabelcontactexportoptions'] = 'Contact export options'; $labels['arialabelcontactexportoptions'] = 'Contact export options';
$labels['arialabelabookgroupoptions'] = 'Addressbook/group options'; $labels['arialabelabookgroupoptions'] = 'Addressbook/group options';
$labels['arialabelpreferencesform'] = 'Preferences form';
$labels['arialabelidentityeditfrom'] = 'Identity edit form';
$labels['arialabelresonseeditfrom'] = 'Response edit form';
$labels['helplistnavigation'] = 'List keyboard navigation'; $labels['helplistnavigation'] = 'List keyboard navigation';
$labels['helplistkeyboardnavigation'] = "Arrows up/down: Move row focus/selection. $labels['helplistkeyboardnavigation'] = "Arrows up/down: Move row focus/selection.

@ -132,6 +132,7 @@ function rcmail_folder_form($attrib)
} }
$select = $RCMAIL->folder_selector(array( $select = $RCMAIL->folder_selector(array(
'id' => '_parent',
'name' => '_parent', 'name' => '_parent',
'noselection' => '---', 'noselection' => '---',
'realnames' => false, 'realnames' => false,
@ -155,7 +156,7 @@ function rcmail_folder_form($attrib)
// Settings: threading // Settings: threading
if ($threading_supported && ($mbox_imap == 'INBOX' || (!$options['noselect'] && !$options['is_root']))) { if ($threading_supported && ($mbox_imap == 'INBOX' || (!$options['noselect'] && !$options['is_root']))) {
$select = new html_select(array('name' => '_viewmode', 'id' => '_listmode')); $select = new html_select(array('name' => '_viewmode', 'id' => '_viewmode'));
$select->add($RCMAIL->gettext('list'), 0); $select->add($RCMAIL->gettext('list'), 0);
$select->add($RCMAIL->gettext('threads'), 1); $select->add($RCMAIL->gettext('threads'), 1);

@ -343,7 +343,7 @@ function rcmail_user_prefs($current = null)
if (is_array($meta) && $meta['name']) { if (is_array($meta) && $meta['name']) {
$skinname = $meta['name']; $skinname = $meta['name'];
$author_link = $meta['url'] ? html::a(array('href' => $meta['url'], 'target' => '_blank'), rcube::Q($meta['author'])) : rcube::Q($meta['author']); $author_link = $meta['url'] ? html::a(array('href' => $meta['url'], 'target' => '_blank'), rcube::Q($meta['author'])) : rcube::Q($meta['author']);
$license_link = $meta['license-url'] ? html::a(array('href' => $meta['license-url'], 'target' => '_blank'), rcube::Q($meta['license'])) : rcube::Q($meta['license']); $license_link = $meta['license-url'] ? html::a(array('href' => $meta['license-url'], 'target' => '_blank', 'tabindex' => '-1'), rcube::Q($meta['license'])) : rcube::Q($meta['license']);
} }
$skinnames[] = mb_strtolower($skinname); $skinnames[] = mb_strtolower($skinname);

@ -95,7 +95,7 @@ function rcmail_responses_list($attrib)
{ {
global $RCMAIL, $OUTPUT; global $RCMAIL, $OUTPUT;
$attrib += array('id' => 'rcmresponseslist', 'tagname' => 'table', 'cols' => 1); $attrib += array('id' => 'rcmresponseslist', 'tagname' => 'table');
$plugin = $RCMAIL->plugins->exec_hook('responses_list', array( $plugin = $RCMAIL->plugins->exec_hook('responses_list', array(
'list' => $RCMAIL->get_compose_responses(true), 'list' => $RCMAIL->get_compose_responses(true),

@ -6,6 +6,7 @@
var UI = new rcube_mail_ui(); var UI = new rcube_mail_ui();
$(document).ready(function(){ $(document).ready(function(){
UI.set('errortitle', '<roundcube:label name="errortitle" quoting="javascript" />'); UI.set('errortitle', '<roundcube:label name="errortitle" quoting="javascript" />');
UI.set('toggleoptions', '<roundcube:label name="toggleadvancedoptions" quoting="javascript" />');
UI.init(); UI.init();
}); });

@ -1,7 +1,9 @@
<div id="settings-sections" class="uibox listbox"> <div id="settings-sections" class="uibox listbox" role="navigation" aria-labelledby="aria-label-settingstabs">
<h2 class="boxtitle"><roundcube:label name="settings" /></h2> <h2 class="boxtitle" id="aria-label-settingstabs"><roundcube:label name="settings" /></h2>
<div id="settings-tabs" class="scroller"> <div id="settings-tabs" class="scroller">
<roundcube:object name="settingstabs" class="listitem" /> <ul class="listing iconized">
<roundcube:object name="settingstabs" class="listitem" tagname="li" />
</ul>
<roundcube:container name="tabs" id="settings-tabs" /> <roundcube:container name="tabs" id="settings-tabs" />
</div> </div>
</div> </div>

@ -70,7 +70,7 @@
width: 20px; width: 20px;
height: 18px; height: 18px;
background: url('images/listicons.png') 0 -1157px no-repeat; background: url('images/listicons.png') 0 -1157px no-repeat;
text-indent: 1000px; text-indent: -5000px;
overflow: hidden; overflow: hidden;
} }
@ -78,9 +78,10 @@
background-position: -24px -1137px; background-position: -24px -1137px;
} }
#sections-table tbody td.section, #sections-table td.section,
#settings-sections span.listitem a, #sections-table .listitem span,
#settings-sections span.tablink a { #settings-sections .listitem a,
#settings-sections .tablink a {
padding-left: 36px; padding-left: 36px;
background-image: url(images/listicons.png); background-image: url(images/listicons.png);
background-position: -100px 0; background-position: -100px 0;
@ -88,120 +89,120 @@
} }
/* note: support span.tablink because this is used by plugins */ /* note: support span.tablink because this is used by plugins */
#settings-sections span.listitem a, #settings-sections .listitem a,
#settings-sections span.tablink a { #settings-sections .tablink a {
background-position: 6px -862px; background-position: 6px -862px;
} }
#settings-sections span.selected a, #settings-sections .selected a,
#settings-sections span.tablink.selected a { #settings-sections .tablink.selected a {
background-position: 6px -887px; background-position: 6px -887px;
} }
#settings-sections span.preferences a { #settings-sections .preferences a {
background-position: 6px -431px; background-position: 6px -431px;
} }
#settings-sections span.preferences.selected a { #settings-sections .preferences.selected a {
background-position: 6px -455px; background-position: 6px -455px;
} }
#settings-sections span.folders a, #settings-sections .folders a,
#sections-table #rcmrowfolders td.section { #sections-table #rcmrowfolders .section {
background-position: 6px 2px; background-position: 6px 2px;
} }
#settings-sections span.folders.selected a, #settings-sections .folders.selected a,
#sections-table #rcmrowfolders.selected td.section { #sections-table #rcmrowfolders.selected .section {
background-position: 6px -22px; background-position: 6px -22px;
} }
#settings-sections span.identities a { #settings-sections .identities a {
background-position: 6px -478px; background-position: 6px -478px;
} }
#settings-sections span.identities.selected a { #settings-sections .identities.selected a {
background-position: 6px -502px; background-position: 6px -502px;
} }
#settings-sections span.filter a { #settings-sections .filter a {
background-position: 6px -1746px; background-position: 6px -1746px;
} }
#settings-sections span.filter.selected a { #settings-sections .filter.selected a {
background-position: 6px -1770px; background-position: 6px -1770px;
} }
#settings-sections span.password a { #settings-sections .password a {
background-position: 6px -1795px; background-position: 6px -1795px;
} }
#settings-sections span.password.selected a { #settings-sections .password.selected a {
background-position: 6px -1819px; background-position: 6px -1819px;
} }
#settings-sections span.responses a { #settings-sections .responses a {
background-position: 6px -1972px; background-position: 6px -1972px;
} }
#settings-sections span.responses.selected a { #settings-sections .responses.selected a {
background-position: 6px -1996px; background-position: 6px -1996px;
} }
#sections-table #rcmrowgeneral td.section { #sections-table #rcmrowgeneral .section {
background-position: 6px -573px; background-position: 4px -573px;
} }
#sections-table #rcmrowgeneral.selected td.section { #sections-table #rcmrowgeneral.selected .section {
background-position: 6px -598px; background-position: 4px -598px;
} }
#sections-table #rcmrowmailbox td.section { #sections-table #rcmrowmailbox .section {
background-position: 6px -621px; background-position: 4px -621px;
} }
#sections-table #rcmrowmailbox.selected td.section { #sections-table #rcmrowmailbox.selected .section {
background-position: 6px -646px; background-position: 4px -646px;
} }
#sections-table #rcmrowcompose td.section { #sections-table #rcmrowcompose .section {
background-position: 6px -670px; background-position: 4px -670px;
} }
#sections-table #rcmrowcompose.selected td.section { #sections-table #rcmrowcompose.selected .section {
background-position: 6px -695px; background-position: 4px -695px;
} }
#sections-table #rcmrowmailview td.section { #sections-table #rcmrowmailview .section {
background-position: 6px -718px; background-position: 4px -718px;
} }
#sections-table #rcmrowmailview.selected td.section { #sections-table #rcmrowmailview.selected .section {
background-position: 6px -742px; background-position: 4px -742px;
} }
#sections-table #rcmrowaddressbook td.section { #sections-table #rcmrowaddressbook .section {
background-position: 6px -766px; background-position: 4px -766px;
} }
#sections-table #rcmrowaddressbook.selected td.section { #sections-table #rcmrowaddressbook.selected .section {
background-position: 6px -791px; background-position: 4px -791px;
} }
#sections-table #rcmrowserver td.section { #sections-table #rcmrowserver .section {
background-position: 6px -814px; background-position: 4px -814px;
} }
#sections-table #rcmrowserver.selected td.section { #sections-table #rcmrowserver.selected .section {
background-position: 6px -838px; background-position: 4px -838px;
} }
#sections-table #rcmrowcalendar td.section { #sections-table #rcmrowcalendar .section {
background-position: 6px -526px; background-position: 4px -526px;
} }
#sections-table #rcmrowcalendar.selected td.section { #sections-table #rcmrowcalendar.selected .section {
background-position: 6px -550px; background-position: 4px -550px;
} }
#folderslist, #folderslist,

@ -84,10 +84,10 @@
</div><!-- end addressview-left --> </div><!-- end addressview-left -->
<div id="addressview-right" role="main"> <div id="addressview-right" role="main" aria-labelledby="aria-label-contactslist">
<!-- contacts list --> <!-- 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" /> <roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="boxtitle" id="aria-label-contactslist" />
<div class="scroller withfooter"> <div class="scroller withfooter">
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" /> <roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" />

@ -10,9 +10,11 @@
<div id="mainscreen" class="offset"> <div id="mainscreen" class="offset">
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="folders" /></h1>
<roundcube:include file="/includes/settingstabs.html" /> <roundcube:include file="/includes/settingstabs.html" />
<div id="settings-right"> <div id="settings-right" role="main">
<div id="folderslist" class="uibox listbox"> <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> <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" /> <roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" />
</div> </div>
<div id="folderslist-footer" class="boxfooter"> <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" /> <roundcube:if condition="env:quota" />
<span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" /> <roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" display="text" />
<roundcube:endif /> <roundcube:endif />
</div> </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>
<div id="folder-details" class="uibox contentbox"> <div id="folder-details" class="uibox contentbox">
@ -37,14 +50,6 @@
</div> </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" /> <roundcube:include file="/includes/footer.html" />
</body> </body>

@ -10,23 +10,25 @@
<div id="mainscreen" class="offset"> <div id="mainscreen" class="offset">
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
<roundcube:include file="/includes/settingstabs.html" /> <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"> <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"> <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>
<div class="boxfooter"> <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> </div>
<div id="identity-details" class="uibox contentbox"> <div id="identity-details" class="uibox contentbox">
<div class="iframebox"> <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>
</div> </div>

@ -15,7 +15,7 @@
</div> </div>
<div id="pluginbody" class="offset uibox contentbox"> <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"> <div id="import-box" class="boxcontent">
<roundcube:object name="importstep" class="propform" /> <roundcube:object name="importstep" class="propform" />

@ -10,23 +10,25 @@
<div id="mainscreen" class="offset"> <div id="mainscreen" class="offset">
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="identities" /></h1>
<roundcube:include file="/includes/settingstabs.html" /> <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"> <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"> <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>
<div class="boxfooter"> <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> </div>
<div id="identity-details" class="uibox contentbox"> <div id="identity-details" class="uibox contentbox">
<div class="iframebox"> <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>
</div> </div>

@ -10,19 +10,22 @@
<div id="mainscreen" class="offset"> <div id="mainscreen" class="offset">
<h1 class="voice"><roundcube:label name="settings" /> : <roundcube:label name="preferences" /></h1>
<roundcube:include file="/includes/settingstabs.html" /> <roundcube:include file="/includes/settingstabs.html" />
<div id="settings-right"> <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"> <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> </div>
<div id="preferences-box" class="uibox contentbox"> <div id="preferences-box" class="uibox contentbox" role="main">
<div class="iframebox"> <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>
</div> </div>

@ -273,7 +273,9 @@ function rcube_mail_ui()
orientation:'v', relative:true, start:266, min:180, size:12 }).init(); orientation:'v', relative:true, start:266, min:180, size:12 }).init();
} }
else if (rcmail.env.action == 'edit-prefs') { else if (rcmail.env.action == 'edit-prefs') {
$('<a href="#toggle">&#9660;</a>') $('<a href="#toggle"></a>')
.text(env.toggleoptions)
.attr('title', env.toggleoptions)
.addClass('advanced-toggle') .addClass('advanced-toggle')
.appendTo('#preferences-details fieldset.advanced legend'); .appendTo('#preferences-details fieldset.advanced legend');

Loading…
Cancel
Save