Improve accessibility on attachments list: use custom tabindex attribute + ...

Thomas Bruederli

2014-06-18 9240c96339b26989f060c57c61a2677e2f1e502e

 program/js/app.js

@@ -1677,7 +1677,7 @@
      case 63232: // "up", in safari keypress
      case 63233: // "down", in safari keypress
        focus_menu_item(keyCode == 38 || keyCode == 63232 ? -1 : 1);
        break;
        return rcube_event.cancel(e);

      case 9:   // tab
        if (this.focused_menu) {
@@ -3553,26 +3553,32 @@
        myprompt = $('<div class="prompt">').html('<div class="message">' + this.get_label('nosubjectwarning') + '</div>')
          .appendTo(document.body),
        prompt_value = $('<input>').attr({type: 'text', size: 30}).val(this.get_label('nosubject'))
          .appendTo(myprompt);
          .appendTo(myprompt),
        save_func = function() {
          input_subject.val(prompt_value.val());
          myprompt.dialog('close');
          ref.command(cmd, { nocheck:true });  // repeat command which triggered this
        };

      buttons[this.get_label('cancel')] = function(){
      buttons[this.get_label('sendmessage')] = function() {
        save_func($(this));
      };
      buttons[this.get_label('cancel')] = function() {
        input_subject.focus();
        $(this).dialog('close');
      };
      buttons[this.get_label('sendmessage')] = function(){
        input_subject.val(prompt_value.val());
        $(this).dialog('close');
        ref.command(cmd, { nocheck:true });  // repeat command which triggered this
      };

      myprompt.dialog({
        modal: true,
        resizable: false,
        buttons: buttons,
        close: function(event, ui) { $(this).remove() }
        close: function(event, ui) { $(this).remove(); }
      });

      prompt_value.select();
      prompt_value.select().keydown(function(e) {
        if (e.which == 13) save_func();
      });

      return false;
    }

@@ -3650,7 +3656,7 @@
      $(this).dialog('close');
    };

    this.show_popup_dialog(html, this.gettext('savenewresponse'), buttons);
    this.show_popup_dialog(html, this.gettext('newresponse'), buttons);

    $('#ffresponsetext').val(text);
    $('#ffresponsename').select();
@@ -4064,7 +4070,7 @@

    if (!att.complete && att.frame)
      att.html = '<a title="'+this.get_label('cancel')+'" onclick="return rcmail.cancel_attachment_upload(\''+name+'\', \''+att.frame+'\');" href="#cancelupload" class="cancelupload">'
        + (this.env.cancelicon ? '<img src="'+this.env.cancelicon+'" alt="" />' : this.get_label('cancel')) + '</a>' + att.html;
        + (this.env.cancelicon ? '<img src="'+this.env.cancelicon+'" alt="'+this.get_label('cancel')+'" />' : this.get_label('cancel')) + '</a>' + att.html;

    var indicator, li = $('<li>');

@@ -4080,6 +4086,10 @@
    else { // add new li
      li.appendTo(this.gui_objects.attachmentlist);
    }

    // set tabindex attribute
    var tabindex = $(this.gui_objects.attachmentlist).attr('data-tabindex') || '0';
    li.find('a').attr('tabindex', tabindex);

    if (upload_id && this.env.attachments[upload_id])
      delete this.env.attachments[upload_id];
@@ -4280,21 +4290,22 @@
    this.display_message(msg, type);

    if (this.env.extwin) {
      var rc = this.opener();
      this.lock_form(this.gui_objects.messageform);

      var rc = this.opener();
      if (rc) {
        rc.display_message(msg, type);
        // refresh the folder where sent message was saved or replied message comes from
        if (folders && rc.env.task == 'mail' && rc.env.action == '' && $.inArray(rc.env.mailbox, folders) >= 0) {
          // @TODO: try with 'checkmail' here when #1485186 is fixed. See also #1489249.
          rc.command('list');
          rc.command('checkmail');
        }
      }
      setTimeout(function(){ window.close() }, 1000);

      setTimeout(function() { window.close(); }, 1000);
    }
    else {
      // before redirect we need to wait some time for Chrome (#1486177)
      setTimeout(function(){ ref.list_mailbox(); }, 500);
      setTimeout(function() { ref.list_mailbox(); }, 500);
    }
  };

@@ -7497,8 +7508,10 @@
  // post the given form to a hidden iframe
  this.async_upload_form = function(form, action, onload)
  {
    var frame, ts = new Date().getTime(),
      frame_name = 'rcmupload'+ts;
    // create hidden iframe
    var ts = new Date().getTime(),
      frame_name = 'rcmupload' + ts,
      frame = this.async_upload_form_frame(frame_name);

    // upload progress support
    if (this.env.upload_progress_name) {
@@ -7513,21 +7526,7 @@
      field.val(ts);
    }

    // have to do it this way for IE
    // otherwise the form will be posted to a new window
    if (document.all) {
      document.body.insertAdjacentHTML('BeforeEnd', '<iframe name="'+frame_name+'"'
        + ' src="program/resources/blank.gif" style="width:0;height:0;visibility:hidden;"></iframe>');
      frame = $('iframe[name="'+frame_name+'"]');
    }
    // for standards-compliant browsers
    else {
      frame = $('<iframe>').attr('name', frame_name)
        .css({border: 'none', width: 0, height: 0, visibility: 'hidden'})
        .appendTo(document.body);
    }

    // handle upload errors, parsing iframe content in onload
    // handle upload errors by parsing iframe content in onload
    frame.bind('load', {ts:ts}, onload);

    $(form).attr({
@@ -7540,6 +7539,13 @@
    return frame_name;
  };

  // create iframe element for files upload
  this.async_upload_form_frame = function(name)
  {
    return $('<iframe>').attr({name: name, style: 'border: none; width: 0; height: 0; visibility: hidden'})
      .appendTo(document.body);
  };

  // html5 file-drop API
  this.document_drag_hover = function(e, over)
  {