Further accessibility improvements regarding keyboard navigation and docume...

Thomas Bruederli

2014-05-07 b2992dd2283c3d0ac95f3293497dfaed0493f607

 program/js/app.js

@@ -1,23 +1,37 @@
/*
 +-----------------------------------------------------------------------+
 | Roundcube Webmail Client Script                                       |
 |                                                                       |
 | This file is part of the Roundcube Webmail client                     |
 | Copyright (C) 2005-2014, The Roundcube Dev Team                       |
 | Copyright (C) 2011-2014, Kolab Systems AG                             |
 |                                                                       |
 | Licensed under the GNU General Public License version 3 or            |
 | any later version with exceptions for skins & plugins.                |
 | See the README file for a full license statement.                     |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Authors: Thomas Bruederli <roundcube@gmail.com>                       |
 |          Aleksander 'A.L.E.C' Machniak <alec@alec.pl>                 |
 |          Charles McNulty <charles@charlesmcnulty.com>                 |
 +-----------------------------------------------------------------------+
 | Requires: jquery.js, common.js, list.js                               |
 +-----------------------------------------------------------------------+
*/
/**
 * Roundcube Webmail Client Script
 *
 * This file is part of the Roundcube Webmail client
 *
 * @licstart  The following is the entire license notice for the
 * JavaScript code in this file.
 *
 * Copyright (C) 2005-2014, The Roundcube Dev Team
 * Copyright (C) 2011-2014, Kolab Systems AG
 *
 * The JavaScript code in this page is free software: you can
 * redistribute it and/or modify it under the terms of the GNU
 * General Public License (GNU GPL) as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option)
 * any later version.  The code is distributed WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you
 * may distribute non-source (e.g., minimized or compacted) forms of
 * that code without the copy of the GNU GPL normally required by
 * section 4, provided you include this license notice and a URL
 * through which recipients can access the Corresponding Source.
 *
 * @licend  The above is the entire license notice
 * for the JavaScript code in this file.
 *
 * @author Thomas Bruederli <roundcube@gmail.com>
 * @author Aleksander 'A.L.E.C' Machniak <alec@alec.pl>
 * @author Charles McNulty <charles@charlesmcnulty.com>
 *
 * @requires jquery.js, common.js, list.js
 */

function rcube_webmail()
{
@@ -139,7 +153,7 @@
  // initialize webmail client
  this.init = function()
  {
    var n, p = this;
    var n;
    this.task = this.env.task;

    // check browser
@@ -183,7 +197,10 @@

    // enable general commands
    this.enable_command('close', 'logout', 'mail', 'addressbook', 'settings', 'save-pref',
      'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-save', true);
      'compose', 'undo', 'about', 'switch-task', 'menu-open', 'menu-close', 'menu-save', true);

    // set active task button
    this.set_button(this.task, 'sel');

    if (this.env.permaurl)
      this.enable_command('permaurl', 'extwin', true);
@@ -200,26 +217,26 @@
            column_movable:this.env.col_movable, dblclick_time:this.dblclick_time
            });
          this.message_list
            .addEventListener('initrow', function(o) { p.init_message_row(o); })
            .addEventListener('dblclick', function(o) { p.msglist_dbl_click(o); })
            .addEventListener('click', function(o) { p.msglist_click(o); })
            .addEventListener('keypress', function(o) { p.msglist_keypress(o); })
            .addEventListener('select', function(o) { p.msglist_select(o); })
            .addEventListener('dragstart', function(o) { p.drag_start(o); })
            .addEventListener('dragmove', function(e) { p.drag_move(e); })
            .addEventListener('dragend', function(e) { p.drag_end(e); })
            .addEventListener('expandcollapse', function(o) { p.msglist_expand(o); })
            .addEventListener('column_replace', function(o) { p.msglist_set_coltypes(o); })
            .addEventListener('listupdate', function(o) { p.triggerEvent('listupdate', o); })
            .addEventListener('initrow', function(o) { ref.init_message_row(o); })
            .addEventListener('dblclick', function(o) { ref.msglist_dbl_click(o); })
            .addEventListener('click', function(o) { ref.msglist_click(o); })
            .addEventListener('keypress', function(o) { ref.msglist_keypress(o); })
            .addEventListener('select', function(o) { ref.msglist_select(o); })
            .addEventListener('dragstart', function(o) { ref.drag_start(o); })
            .addEventListener('dragmove', function(e) { ref.drag_move(e); })
            .addEventListener('dragend', function(e) { ref.drag_end(e); })
            .addEventListener('expandcollapse', function(o) { ref.msglist_expand(o); })
            .addEventListener('column_replace', function(o) { ref.msglist_set_coltypes(o); })
            .addEventListener('listupdate', function(o) { ref.triggerEvent('listupdate', o); })
            .init();

          // TODO: this should go into the list-widget code
          $(this.message_list.thead).on('click', 'a.sortcol', function(e){
            return rcmail.command('sort', $(this).attr('rel'), this);
            return ref.command('sort', $(this).attr('rel'), this);
          });

          document.onmouseup = function(e){ return p.doc_mouse_up(e); };
          this.gui_objects.messagelist.parentNode.onmousedown = function(e){ return p.click_on_list(e); };
          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };
          this.gui_objects.messagelist.parentNode.onclick = function(e){ return ref.click_on_list(e || window.event); };

          this.enable_command('toggle_status', 'toggle_flag', 'sort', true);
          this.enable_command('set-listmode', this.env.threads && !this.is_multifolder_listing());
@@ -295,7 +312,7 @@
            }
          }

          document.onmouseup = function(e){ return p.doc_mouse_up(e); };
          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };

          // init message compose form
          this.init_messageform();
@@ -322,7 +339,7 @@
          this.contact_list = new rcube_list_widget(this.gui_objects.contactslist,
            { multiselect:true, draggable:false, keyboard:false });
          this.contact_list
            .addEventListener('initrow', function(o) { p.triggerEvent('insertrow', { cid:o.uid, row:o }); })
            .addEventListener('initrow', function(o) { ref.triggerEvent('insertrow', { cid:o.uid, row:o }); })
            .addEventListener('select', function(o) { ref.compose_recipient_select(o); })
            .addEventListener('dblclick', function(o) { ref.compose_add_recipient('to'); })
            .init();
@@ -363,21 +380,21 @@
          this.contact_list = new rcube_list_widget(this.gui_objects.contactslist,
            {multiselect:true, draggable:this.gui_objects.folderlist?true:false, keyboard:true});
          this.contact_list
            .addEventListener('initrow', function(o) { p.triggerEvent('insertrow', { cid:o.uid, row:o }); })
            .addEventListener('keypress', function(o) { p.contactlist_keypress(o); })
            .addEventListener('select', function(o) { p.contactlist_select(o); })
            .addEventListener('dragstart', function(o) { p.drag_start(o); })
            .addEventListener('dragmove', function(e) { p.drag_move(e); })
            .addEventListener('dragend', function(e) { p.drag_end(e); })
            .addEventListener('initrow', function(o) { ref.triggerEvent('insertrow', { cid:o.uid, row:o }); })
            .addEventListener('keypress', function(o) { ref.contactlist_keypress(o); })
            .addEventListener('select', function(o) { ref.contactlist_select(o); })
            .addEventListener('dragstart', function(o) { ref.drag_start(o); })
            .addEventListener('dragmove', function(e) { ref.drag_move(e); })
            .addEventListener('dragend', function(e) { ref.drag_end(e); })
            .init();

          if (this.env.cid)
            this.contact_list.highlight_row(this.env.cid);

          this.gui_objects.contactslist.parentNode.onmousedown = function(e){ return p.click_on_list(e); };
          document.onmouseup = function(e){ return p.doc_mouse_up(e); };
          this.gui_objects.contactslist.parentNode.onmousedown = function(e){ return ref.click_on_list(e); };
          document.onmouseup = function(e){ return ref.doc_mouse_up(e); };

          $(this.gui_objects.qsearchbox).focusin(function() { rcmail.contact_list.blur(); });
          $(this.gui_objects.qsearchbox).focusin(function() { ref.contact_list.blur(); });

          this.update_group_commands();
          this.command('list');
@@ -429,7 +446,7 @@
          this.identity_list = new rcube_list_widget(this.gui_objects.identitieslist,
            {multiselect:false, draggable:false, keyboard:false});
          this.identity_list
            .addEventListener('select', function(o) { p.identity_select(o); })
            .addEventListener('select', function(o) { ref.identity_select(o); })
            .init()
            .focus();

@@ -439,7 +456,7 @@
        else if (this.gui_objects.sectionslist) {
          this.sections_list = new rcube_list_widget(this.gui_objects.sectionslist, {multiselect:false, draggable:false, keyboard:false});
          this.sections_list
            .addEventListener('select', function(o) { p.section_select(o); })
            .addEventListener('select', function(o) { ref.section_select(o); })
            .init()
            .focus();
        }
@@ -451,10 +468,10 @@
          this.responses_list
            .addEventListener('select', function(list) {
              var win, id = list.get_single_selection();
              p.enable_command('delete', !!id && $.inArray(id, p.env.readonly_responses) < 0);
              if (id && (win = p.get_frame_window(p.env.contentframe))) {
                p.set_busy(true);
                p.location_href({ _action:'edit-response', _key:id, _framed:1 }, win);
              ref.enable_command('delete', !!id && $.inArray(id, ref.env.readonly_responses) < 0);
              if (id && (win = ref.get_frame_window(ref.env.contentframe))) {
                ref.set_busy(true);
                ref.location_href({ _action:'edit-response', _key:id, _framed:1 }, win);
              }
            })
            .init()
@@ -576,7 +593,8 @@
    if (obj && obj.blur)
      obj.blur();

    if (this.busy)
    // do nothing if interface is locked by other command (with exception for searching reset)
    if (this.busy && !(command == 'reset-search' && this.last_command == 'search'))
      return false;

    // let the browser handle this click (shift/ctrl usually opens the link in a new window/tab)
@@ -601,6 +619,8 @@
      // remove copy from local storage if compose screen is left intentionally
      this.remove_compose_data(this.env.compose_id);
    }

    this.last_command = command;

    // process external commands
    if (typeof this.command_handlers[command] === 'function') {
@@ -691,7 +711,8 @@
        }

      case 'menu-save':
        this.triggerEvent(command, {props:props});
      case 'menu-close':
        this.triggerEvent(command, {props:props, originalEvent:event});
        return false;

      case 'open':
@@ -1588,9 +1609,9 @@
      this.gui_objects.qsearchbox.blur();

    if (this.message_list)
      this.message_list.focus();
      this.message_list.focus(e);
    else if (this.contact_list)
      this.contact_list.focus();
      this.contact_list.focus(e);

    return true;
  };
@@ -1793,7 +1814,7 @@

  this.init_message_row = function(row)
  {
    var i, fn = {}, self = this, uid = row.uid,
    var i, fn = {}, uid = row.uid,
      status_icon = (this.env.status_col != null ? 'status' : 'msg') + 'icn' + row.id;

    if (uid && this.env.messages[uid])
@@ -1801,7 +1822,7 @@

    // set eventhandler to status icon
    if (row.icon = document.getElementById(status_icon)) {
      fn.icon = function(e) { self.command('toggle_status', uid); };
      fn.icon = function(e) { ref.command('toggle_status', uid); };
    }

    // save message icon position too
@@ -1812,12 +1833,12 @@

    // set eventhandler to flag icon
    if (this.env.flagged_col != null && (row.flagicon = document.getElementById('flagicn'+row.id))) {
      fn.flagicon = function(e) { self.command('toggle_flag', uid); };
      fn.flagicon = function(e) { ref.command('toggle_flag', uid); };
    }

    // set event handler to thread expand/collapse icon
    if (!row.depth && row.has_children && (row.expando = document.getElementById('rcmexpando'+row.id))) {
      fn.expando = function(e) { self.expand_message_row(e, uid); };
      fn.expando = function(e) { ref.expand_message_row(e, uid); };
    }

    // attach events
@@ -1936,10 +1957,12 @@

    // build subject link
    if (cols.subject) {
      var action = flags.mbox == this.env.drafts_mailbox ? 'compose' : 'show';
      var uid_param = flags.mbox == this.env.drafts_mailbox ? '_draft_uid' : '_uid';
      cols.subject = '<a href="./?_task=mail&_action='+action+'&_mbox='+urlencode(flags.mbox)+'&'+uid_param+'='+urlencode(uid)+'"'+
        ' onclick="return rcube_event.cancel(event)" onmouseover="rcube_webmail.long_subject_title(this,'+(message.depth+1)+')"><span>'+cols.subject+'</span></a>';
      var action  = flags.mbox == this.env.drafts_mailbox ? 'compose' : 'show',
        uid_param = flags.mbox == this.env.drafts_mailbox ? '_draft_uid' : '_uid',
        query = { _mbox: flags.mbox };
      query[uid_param] = uid;
      cols.subject = '<a href="' + this.url(action, query) + '" onclick="return rcube_event.keyboard_only(event)"' +
        ' onmouseover="rcube_webmail.long_subject_title(this,'+(message.depth+1)+')" tabindex="-1"><span>'+cols.subject+'</span></a>';
    }

    // add each submitted col
@@ -1988,6 +2011,9 @@
          html = '<span class="prio'+flags.prio+'">&nbsp;</span>';
        else
          html = '&nbsp;';
      }
      else if (c == 'folder') {
        html = '<span onmouseover="rcube_webmail.long_subject_title(this)">' + cols[c] + '<span>';
      }
      else
        html = cols[c];
@@ -2291,6 +2317,7 @@
      url._page = page;

    this.http_request('list', url, lock);
    this.update_state({ _mbox: mbox, _page: (page && page > 1 ? page : null) });
  };

  // removes messages that doesn't exists from list selection array
@@ -3567,6 +3594,7 @@
      $('<a>').addClass('insertresponse active')
        .attr('href', '#')
        .attr('rel', key)
        .attr('tabindex', '0')
        .html(this.quote_html(response.name))
        .appendTo(li)
        .mousedown(function(e){
@@ -4211,6 +4239,17 @@
    return false;
  };

  this.continue_search = function(request_id)
  {
    var lock = ref.set_busy(true, 'stillsearching');

    setTimeout(function(){
      var url = ref.search_params();
      url._continue = request_id;
      ref.env.qsearch = { lock: lock, request: ref.http_request('search', url, lock) };
    }, 100);
  };

  // build URL params for search
  this.search_params = function(search, filter, smods)
  {
@@ -4654,7 +4693,7 @@
    if (this.preview_timer)
      clearTimeout(this.preview_timer);

    var n, id, sid, contact, ref = this, writable = false,
    var n, id, sid, contact, writable = false,
      source = this.env.source ? this.env.address_sources[this.env.source] : null;

    // we don't have dblclick handler here, so use 200 instead of this.dblclick_time
@@ -5071,7 +5110,7 @@

  this.init_contact_form = function()
  {
    var ref = this, col;
    var col;

    if (this.env.coltypes) {
      this.set_photo_actions($('#ff_photo').val());
@@ -5719,25 +5758,25 @@

  this.init_subscription_list = function()
  {
    var p = this, delim = RegExp.escape(this.env.delimiter);
    var delim = RegExp.escape(this.env.delimiter);

    this.last_sub_rx = RegExp('['+delim+']?[^'+delim+']+$');

    this.subscription_list = new rcube_list_widget(this.gui_objects.subscriptionlist,
      {multiselect:false, draggable:true, keyboard:false, toggleselect:true});
    this.subscription_list
      .addEventListener('select', function(o){ p.subscription_select(o); })
      .addEventListener('dragstart', function(o){ p.drag_active = true; })
      .addEventListener('dragend', function(o){ p.subscription_move_folder(o); })
      .addEventListener('select', function(o){ ref.subscription_select(o); })
      .addEventListener('dragstart', function(o){ ref.drag_active = true; })
      .addEventListener('dragend', function(o){ ref.subscription_move_folder(o); })
      .addEventListener('initrow', function (row) {
        row.obj.onmouseover = function() { p.focus_subscription(row.id); };
        row.obj.onmouseout = function() { p.unfocus_subscription(row.id); };
        row.obj.onmouseover = function() { ref.focus_subscription(row.id); };
        row.obj.onmouseout = function() { ref.unfocus_subscription(row.id); };
      })
      .init();

    $('#mailboxroot')
      .mouseover(function(){ p.focus_subscription(this.id); })
      .mouseout(function(){ p.unfocus_subscription(this.id); })
      .mouseover(function(){ ref.focus_subscription(this.id); })
      .mouseout(function(){ ref.unfocus_subscription(this.id); })
  };

  this.focus_subscription = function(id)
@@ -6151,9 +6190,6 @@
        init_button(cmd, this.buttons[cmd][i]);
      }
    }

    // set active task button
    this.set_button(this.task, 'sel');
  };

  // set button to a specific state
@@ -6166,7 +6202,7 @@
      button = a_buttons[n];
      obj = document.getElementById(button.id);

      if (!obj)
      if (!obj || button.status == state)
        continue;

      // get default/passive setting of the button
@@ -6195,7 +6231,13 @@
        obj.disabled = state == 'pas';
      }
      else if (button.type == 'uibutton') {
        button.status = state;
        $(obj).button('option', 'disabled', state == 'pas');
      }
      else {
        $(obj)
          .attr('tabindex', state == 'pas' || state == 'sel' ? '-1' : '0')
          .attr('aria-disabled', state == 'pas' || state == 'sel' ? 'true' : 'false');
      }
    }
  };
@@ -6281,8 +6323,7 @@

    type = type ? type : 'notice';

    var ref = this,
      key = this.html_identifier(msg),
    var key = this.html_identifier(msg),
      date = new Date(),
      id = type + date.getTime();

@@ -6321,7 +6362,8 @@
      this.messages[key].labels = [{'id': id, 'msg': msg}];
    }
    else {
      obj.click(function() { return ref.hide_message(obj); });
      obj.click(function() { return ref.hide_message(obj); })
        .attr('role', 'alert');
    }

    this.triggerEvent('message', { message:msg, type:type, timeout:timeout, object:obj });
@@ -6801,15 +6843,14 @@

  this.html2plain = function(htmlText, id)
  {
    var rcmail = this,
      url = '?_task=utils&_action=html2text',
    var url = '?_task=utils&_action=html2text',
      lock = this.set_busy(true, 'converting');

    this.log('HTTP POST: ' + url);

    $.ajax({ type: 'POST', url: url, data: htmlText, contentType: 'application/octet-stream',
      error: function(o, status, err) { rcmail.http_error(o, status, err, lock); },
      success: function(data) { rcmail.set_busy(false, null, lock); $('#'+id).val(data); rcmail.log(data); }
      error: function(o, status, err) { ref.http_error(o, status, err, lock); },
      success: function(data) { ref.set_busy(false, null, lock); $('#'+id).val(data); ref.log(data); }
    });
  };

@@ -6900,6 +6941,13 @@

    // reset keep-alive interval
    this.start_keepalive();
  };

  // update browser location to remember current view
  this.update_state = function(query)
  {
    if (window.history.replaceState)
      window.history.replaceState({}, document.title, rcmail.url('', query));
  };

  // send a http request to the server
@@ -7087,6 +7135,7 @@
          this.enable_command('set-listmode', this.env.threads && !is_multifolder);

          if ((response.action == 'list' || response.action == 'search') && this.message_list) {
            this.message_list.focus();
            this.msglist_select(this.message_list);
            this.triggerEvent('listupdate', { folder:this.env.mailbox, rowcount:this.message_list.rowcount });
          }
@@ -7869,7 +7918,7 @@
{
  if (!elem.title) {
    var $elem = $(elem);
    if ($elem.width() + indent * 15 > $elem.parent().width())
    if ($elem.width() + (indent || 0) * 15 > $elem.parent().width())
      elem.title = $elem.text();
  }
};