Accessibility improvements (#3088)

This commit is contained in:
Aleksander Machniak 2014-06-18 11:55:47 +02:00
parent 9af610943e
commit 6d9d854e65
5 changed files with 49 additions and 34 deletions

View file

@ -17,7 +17,8 @@ $labels['changed'] = 'Last Modified';
$labels['title'] = 'Title';
$labels['now'] = 'Now';
$labels['sortby'] = 'Sort by';
$labels['createlist'] = 'New Notebook';
$labels['newnotebook'] = 'Create a new notebook';
$labels['addnotebook'] = 'Add notebook';
$labels['editlist'] = 'Edit Notebook';
$labels['listname'] = 'Name';
$labels['tabsharing'] = 'Sharing';
@ -39,3 +40,9 @@ $labels['invalidlistproperties'] = 'Invalid notebook properties! Please set a va
$labels['entertitle'] = 'Please enter a title for this note.';
$labels['aclnorights'] = 'You do not have administrator rights for this notebook.';
$labels['arialabelnoteslist'] = 'List of notes';
$labels['arialabelnotesearchform'] = 'Notes search form';
$labels['arialabelnotesquicksearchbox'] = 'Notes search input';
$labels['arialabelnotessortmenu'] = 'Notes list sorting options';
$labels['arialabelnotesoptionsmenu'] = 'Notebook actions menu';
$labels['arialabelnotebookform'] = 'Notebook properties';

View file

@ -135,7 +135,7 @@ function rcube_kolab_notes_ui(settings)
// initialize notes list widget
if (rcmail.gui_objects.noteslist) {
noteslist = new rcube_list_widget(rcmail.gui_objects.noteslist,
{ multiselect:true, draggable:true, keyboard:false });
{ multiselect:true, draggable:true, keyboard:true });
noteslist.addEventListener('select', function(list) {
var selection_changed = list.selection.length != 1 || !me.selected_note || list.selection[0] != me.selected_note.id;
selection_changed && warn_unsaved_changes(function(){
@ -175,7 +175,7 @@ function rcube_kolab_notes_ui(settings)
}
folder_drop_target = null;
})
.init();
.init().focus();
}
if (settings.sort_col) {

View file

@ -49,7 +49,7 @@
}
.notesview #quicksearchbar {
top: 8px;
top: 2px;
}
.notesview #searchmenulink {

View file

@ -42,8 +42,8 @@ $(document).ready(function(e){
h = form.outerHeight();
content.width(w).height(h);
$('#notecontent_tbl').width(w+'px').height('').css('margin-top', '-1px');
$('#notecontent_ifr').width(w+'px').height((h-54)+'px');
$('#noteform > div.mce-tinymce').width(w);
$('#notecontent_ifr').width(w).height(h - 4 - $('div.mce-toolbar').height());
}
$(window).resize(function(e){

View file

@ -9,17 +9,22 @@
<roundcube:include file="/includes/header.html" />
<div id="mainscreen">
<div id="notestoolbar" class="toolbar">
<h1 class="voice"><roundcube:label name="kolab_notes.navtitle" /></h1>
<div id="notestoolbar" class="toolbar" role="toolbar" aria-labelledby="aria-label-toolbar">
<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
<roundcube:button command="createnote" type="link" class="button createnote disabled" classAct="button createnote" classSel="button createnote pressed" label="kolab_notes.create" title="kolab_notes.createnote" />
<roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" title="print" />
<roundcube:button command="sendnote" type="link" class="button sendnote disabled" classAct="button sendnote" classSel="button sendnote pressed" label="kolab_notes.send" title="kolab_notes.sendnote" />
<roundcube:container name="toolbar" id="notestoolbar" />
</div>
<div id="quicksearchbar">
<a id="searchmenulink" class="iconbutton searchoptions" > </a>
<roundcube:object name="plugin.searchform" id="quicksearchbox" />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
<div id="quicksearchbar" role="search" aria-labelledby="aria-label-searchform">
<h2 id="aria-label-searchform" class="voice"><roundcube:label name="kolab_notes.arialabelnotesearchform" /></h2>
<label for="quicksearchbox" class="voice"><roundcube:label name="kolab_notes.arialabelnotesquicksearchbox" /></label>
<a id="searchmenulink" class="iconbutton searchoptions" > </a>
<roundcube:object name="plugin.searchform" id="quicksearchbox" />
<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
</div>
<div id="mainscreencontent">
@ -35,30 +40,31 @@
<div id="notebooksbox" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="kolab_notes.lists" /></h2>
<div class="scroller withfooter">
<roundcube:object name="plugin.notebooks" id="notebooks" class="listing" />
<roundcube:object name="plugin.notebooks" id="notebooks" class="listing" />
</div>
<div class="boxfooter">
<roundcube:button command="list-create" type="link" title="kolab_notes.createlist" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="notesoptionslink" id="notesoptionsmenulink" type="link" title="kolab_notes.listactions" class="listbutton groupactions" onclick="return UI.toggle_popup('notesoptionsmenu', event)" innerClass="inner" content="&#9881;" />
<roundcube:button command="list-create" type="link" title="kolab_notes.newnotebook" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" label="kolab_notes.addnotebook" /><roundcube:button name="notesoptionslink" id="notesoptionsmenulink" type="link" title="kolab_notes.listactions" class="listbutton groupactions" onclick="return UI.toggle_popup('notesoptionsmenu', event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="notesoptionsmenu-menu" />
</div>
</div>
</div>
<div id="mainview-right">
<div id="noteslistbox" class="uibox listbox">
<h2 class="boxtitle"><roundcube:label name="kolab_notes.notes" /></h2>
<div class="scroller withfooter">
<roundcube:object name="plugin.listing" id="kolabnoteslist" class="listing" />
<h3 id="aria-label-noteslist" class="boxtitle"><roundcube:label name="kolab_notes.notes" /></h3>
<div class="scroller withfooter" aria-labelledby="aria-label-noteslist">
<roundcube:object name="plugin.listing" id="kolabnoteslist" class="listing" summary="kolab_notes.arialabelnoteslist" />
</div>
<div class="boxfooter">
<roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" />
<roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" label="delete" />
<roundcube:object name="plugin.recordsCountDisplay" class="countdisplay" label="fromtoshort" />
</div>
<div class="boxpagenav">
<roundcube:button name="notessortmenulink" id="notessortmenulink" type="link" title="kolab_notes.sortby" class="icon sortoptions" onclick="UI.show_popup('notessortmenu');return false" innerClass="inner" content="v" />
<roundcube:button name="notessortmenulink" id="notessortmenulink" type="link" title="kolab_notes.sortby" class="icon sortoptions" onclick="return UI.toggle_popup('notessortmenu', event)" innerClass="inner" content="v" aria-haspopup="true" aria-expanded="false" aria-owns="notessortmenu-menu" />
</div>
</div>
<div id="notedetailsbox" class="uibox contentbox">
<div id="notedetailsbox" class="uibox contentbox" role="complementary" aria-labelledby="aria-label-noteform">
<h3 id="aria-label-noteform" class="voice"><roundcube:label name="kolab_notes.arialabelnoteform" /></h3>
<roundcube:object name="plugin.notetitle" id="notedetailstitle" class="boxtitle" />
<roundcube:object name="plugin.editform" id="noteform" />
<roundcube:object name="plugin.detailview" id="notedetails" class="scroller" />
@ -76,27 +82,29 @@
<roundcube:object name="message" id="messagestack" />
<div id="notesoptionsmenu" class="popupmenu">
<ul class="toolbarmenu">
<li><roundcube:button command="list-edit" label="edit" classAct="active" /></li>
<li><roundcube:button command="list-remove" label="delete" classAct="active" /></li>
<li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
<div id="notesoptionsmenu" class="popupmenu" aria-hidden="true">
<h3 id="aria-label-optionsmenu" class="voice"><roundcube:label name="kolab_notes.arialabelnotesoptionsmenu" /></h3>
<ul class="toolbarmenu" id="notesoptionsmenu-menu" role="menu" aria-labelledby="aria-label-optionsmenu">
<li role="menuitem"><roundcube:button command="list-edit" label="edit" classAct="active" /></li>
<li role="menuitem"><roundcube:button command="list-remove" label="delete" classAct="active" /></li>
<li role="menuitem"><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
</ul>
</div>
<div id="notessortmenu" class="popupmenu">
<ul class="toolbarmenu iconized">
<li><roundcube:button command="list-sort" prop="changed" type="link" label="kolab_notes.changed" class="icon active by-changed" innerclass="icon" /></li>
<li><roundcube:button command="list-sort" prop="title" type="link" label="kolab_notes.title" class="icon active by-title" innerclass="icon" /></li>
<div id="notessortmenu" class="popupmenu" aria-hidden="true">
<h3 id="aria-label-sortmenu" class="voice"><roundcube:label name="kolab_notes.arialabelnotessortmenu" /></h3>
<ul class="toolbarmenu iconized" id="notessortmenu-menu" role="menu" aria-labelledby="aria-label-sortmenu">
<li role="menuitem"><roundcube:button command="list-sort" prop="changed" type="link" label="kolab_notes.changed" class="icon active by-changed" innerclass="icon" /></li>
<li role="menuitem"><roundcube:button command="list-sort" prop="title" type="link" label="kolab_notes.title" class="icon active by-title" innerclass="icon" /></li>
</ul>
</div>
<div id="notebookeditform" class="uidialog">
<div id="notebookeditform" class="uidialog" aria-labelledby="aria-label-editform" aria-hidden="true" role="dialog">
<h3 id="aria-label-editform" class="voice"><roundcube:label name="kolab_notes.arialabelnotebookform" /></h3>
<roundcube:container name="notebookeditform" id="notebookeditform" />
<roundcube:label name="loading" />
</div>
<script type="text/javascript">
// UI startup
@ -136,8 +144,8 @@ $(document).ready(function(e){
h = form.outerHeight();
content.width(w).height(h);
$('#notecontent_tbl').width(w+'px').height('').css('margin-top', '-1px');
$('#notecontent_ifr').width(w+'px').height((h-54)+'px');
$('#noteform > div.mce-tinymce').width(w);
$('#notecontent_ifr').width(w).height(h - 4 - $('div.mce-toolbar').height());
}
$(window).resize(function(e){
@ -148,4 +156,4 @@ $(document).ready(function(e){
</script>
</body>
</html>
</html>