Managesieve: Improved UI accessibility

pull/198/head
Aleksander Machniak 10 years ago
parent ba5c53e5c3
commit 13b33da51a

@ -1,6 +1,7 @@
- Added optional separate interface for out-of-office management (#1488266)
- Fix disabled "create filter" action
- Fix enotify/notify extension handling
- Improved UI accessibility
* version 7.2 [2014-02-14]
-----------------------------------------------------------

@ -216,18 +216,18 @@ class rcube_sieve_vacation extends rcube_sieve_engine
) + $attrib);
// form elements
$subject = new html_inputfield(array('name' => 'vacation_subject', 'size' => 50));
$reason = new html_textarea(array('name' => 'vacation_reason', 'cols' => 60, 'rows' => 8));
$interval = new html_inputfield(array('name' => 'vacation_interval', 'size' => 5));
$addresses = '<textarea name="vacation_addresses" data-type="list" data-size="30" style="display: none">'
$subject = new html_inputfield(array('name' => 'vacation_subject', 'id' => 'vacation_subject', 'size' => 50));
$reason = new html_textarea(array('name' => 'vacation_reason', 'id' => 'vacation_reason', 'cols' => 60, 'rows' => 8));
$interval = new html_inputfield(array('name' => 'vacation_interval', 'id' => 'vacation_interval', 'size' => 5));
$addresses = '<textarea name="vacation_addresses" id="vacation_addresses" data-type="list" data-size="30" style="display: none">'
. rcube::Q(implode("\n", (array) $this->vacation['addresses']), 'strict', false) . '</textarea>';
$status = new html_select(array('name' => 'vacation_status'));
$status = new html_select(array('name' => 'vacation_status', 'id' => 'vacation_status'));
$status->add($this->plugin->gettext('vacation.on'), 'on');
$status->add($this->plugin->gettext('vacation.off'), 'off');
if ($this->rc->config->get('managesieve_vacation') != 2 && count($this->vacation['list'])) {
$after = new html_select(array('name' => 'vacation_after'));
$after = new html_select(array('name' => 'vacation_after', 'id' => 'vacation_after'));
$after->add('', '');
foreach ($this->vacation['list'] as $idx => $rule) {
@ -247,7 +247,7 @@ class rcube_sieve_vacation extends rcube_sieve_engine
}
if ($date_extension) {
$date_from = new html_inputfield(array('name' => 'vacation_datefrom', 'class' => 'datepicker', 'size' => 12));
$date_from = new html_inputfield(array('name' => 'vacation_datefrom', 'id' => 'vacation_datefrom', 'class' => 'datepicker', 'size' => 12));
$date_to = new html_inputfield(array('name' => 'vacation_dateto', 'class' => 'datepicker', 'size' => 12));
$date_format = $this->rc->config->get('date_format', 'Y-m-d');
@ -283,12 +283,12 @@ class rcube_sieve_vacation extends rcube_sieve_engine
// Advanced tab
$table = new html_table(array('cols' => 2));
$table->add('title', $this->plugin->gettext('vacation.addresses'));
$table->add('title', html::label('vacation_addresses', $this->plugin->gettext('vacation.addresses')));
$table->add(null, $addresses);
$table->add('title', $this->plugin->gettext('vacation.interval'));
$table->add('title', html::label('vacation_interval', $this->plugin->gettext('vacation.interval')));
$table->add(null, $interval_txt);
if ($after) {
$table->add('title', $this->plugin->gettext('vacation.after'));
$table->add('title', html::label('vacation_after', $this->plugin->gettext('vacation.after')));
$table->add(null, $after->show($this->vacation['idx'] - 1));
}

@ -177,6 +177,11 @@ $labels['vacation.addresses'] = 'My additional addresses';
$labels['vacation.interval'] = 'Reply interval';
$labels['vacation.after'] = 'Put vacation rule after';
$labels['vacation.saving'] = 'Saving data...';
$labels['arialabelfiltersetactions'] = 'Filter set actions';
$labels['arialabelfilteractions'] = 'Filter actions';
$labels['arialabelfilterform'] = 'Filter properties';
$labels['ariasummaryfilterslist'] = 'List of filters';
$labels['ariasummaryfiltersetslist'] = 'List of filter sets';
$messages = array();
$messages['filterunknownerror'] = 'Unknown server error.';

@ -73,7 +73,7 @@ if (window.rcmail) {
changeMonth: true,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText) { $(this).focus().val(dateText) }
onSelect: function(dateText) { $(this).focus().val(dateText); }
});
$('input.datepicker').datepicker();
}
@ -82,46 +82,47 @@ if (window.rcmail) {
rcmail.enable_command('plugin.managesieve-add', 'plugin.managesieve-setadd', !rcmail.env.sieveconnerror);
}
var i, p = rcmail, setcnt, set = rcmail.env.currentset;
var setcnt, set = rcmail.env.currentset;
if (rcmail.gui_objects.filterslist) {
rcmail.filters_list = new rcube_list_widget(rcmail.gui_objects.filterslist,
{multiselect:false, draggable:true, keyboard:false});
{multiselect:false, draggable:true, keyboard:true});
rcmail.filters_list
.addEventListener('select', function(e) { p.managesieve_select(e); })
.addEventListener('dragstart', function(e) { p.managesieve_dragstart(e); })
.addEventListener('dragend', function(e) { p.managesieve_dragend(e); })
.addEventListener('select', function(e) { rcmail.managesieve_select(e); })
.addEventListener('dragstart', function(e) { rcmail.managesieve_dragstart(e); })
.addEventListener('dragend', function(e) { rcmail.managesieve_dragend(e); })
.addEventListener('initrow', function(row) {
row.obj.onmouseover = function() { p.managesieve_focus_filter(row); };
row.obj.onmouseout = function() { p.managesieve_unfocus_filter(row); };
row.obj.onmouseover = function() { rcmail.managesieve_focus_filter(row); };
row.obj.onmouseout = function() { rcmail.managesieve_unfocus_filter(row); };
})
.init().focus();
.init();
}
if (rcmail.gui_objects.filtersetslist) {
rcmail.filtersets_list = new rcube_list_widget(rcmail.gui_objects.filtersetslist,
{multiselect:false, draggable:false, keyboard:false});
{multiselect:false, draggable:false, keyboard:true});
rcmail.filtersets_list
.addEventListener('select', function(e) { p.managesieve_setselect(e); })
.init().focus();
rcmail.filtersets_list.init().focus();
if (set != null) {
set = rcmail.managesieve_setid(set);
rcmail.filtersets_list.shift_start = set;
rcmail.filtersets_list.highlight_row(set, false);
rcmail.filtersets_list.select(set);
}
// attach select event after initial record was selected
rcmail.filtersets_list.addEventListener('select', function(e) { rcmail.managesieve_setselect(e); });
setcnt = rcmail.filtersets_list.rowcount;
rcmail.enable_command('plugin.managesieve-set', true);
rcmail.enable_command('plugin.managesieve-setact', 'plugin.managesieve-setget', setcnt);
rcmail.enable_command('plugin.managesieve-setdel', setcnt > 1);
// Fix dragging filters over sets list
$('tr', rcmail.gui_objects.filtersetslist).each(function (i, e) { p.managesieve_fixdragend(e); });
$('tr', rcmail.gui_objects.filtersetslist).each(function (i, e) { rcmail.managesieve_fixdragend(e); });
}
}
if (rcmail.gui_objects.sieveform && rcmail.env.rule_disabled)
$('#disabled').attr('checked', true);
});
@ -778,6 +779,7 @@ function smart_field_row(value, name, idx, size)
input = $('input', elem).attr(attrs).keydown(function(e) {
var input = $(this);
// element creation event (on Enter)
if (e.which == 13) {
var name = input.attr('name').replace(/\[\]$/, ''),
@ -787,6 +789,21 @@ function smart_field_row(value, name, idx, size)
input.parent().after(elem);
$('input', elem).focus();
}
// backspace or delete: remove input, focus previous one
else if ((e.which == 8 || e.which == 46) && input.val() == '') {
var parent = input.parent(), siblings = parent.parent().children();
if (siblings.length > 1) {
if (parent.prev().length)
parent.prev().children('input').focus();
else
parent.next().children('input').focus();
parent.remove();
return false;
}
}
});
// element deletion event

@ -306,6 +306,7 @@ a.button.disabled
font-size: 11px;
padding: 1px;
vertical-align: middle;
max-width: 280px;
}
html.mozilla #filter-form select

@ -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>

@ -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">

Loading…
Cancel
Save