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

Thomas Bruederli

2014-06-18 9240c96339b26989f060c57c61a2677e2f1e502e

Improve accessibility on attachments list: use custom tabindex attribute + add aria-label for meaningful voice output on delete icons

 program/js/app.js

@@ -4070,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>');

@@ -4087,6 +4087,10 @@
      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];


 program/steps/mail/attachments.inc

@@ -180,6 +180,7 @@
                'onclick' => sprintf("return %s.command('remove-attachment','rcmfile%s', this)", rcmail_output::JS_OBJECT_NAME, $id),
                'title'   => $RCMAIL->gettext('delete'),
                'class'   => 'delete',
                'aria-label' => $RCMAIL->gettext('delete') . ' ' . $attachment['name'],
            ), $button);

            $content .= rcube::Q($attachment['name']);

 program/steps/mail/compose.inc

@@ -1524,7 +1524,9 @@
                        'href'    => "#delete",
                        'title'   => $RCMAIL->gettext('delete'),
                        'onclick' => sprintf("return %s.command('remove-attachment','rcmfile%s', this)", rcmail_output::JS_OBJECT_NAME, $id),
                        'class'   => 'delete'
                        'class'   => 'delete',
                        'tabindex' => $attrib['tabindex'] ?: '0',
                        'aria-label'   => $RCMAIL->gettext('delete') . ' ' . $a_prop['name'],
                    ),
                    $button
                ) . rcube::Q($a_prop['name'])
@@ -1550,6 +1552,12 @@
    $OUTPUT->set_env('attachments', $jslist);
    $OUTPUT->add_gui_object('attachmentlist', $attrib['id']);

    // put tabindex value into data-tabindex attribute
    if (isset($attrib['tabindex'])) {
        $attrib['data-tabindex'] = $attrib['tabindex'];
        unset($attrib['tabindex']);
    }

    return html::tag('ul', $attrib, $out, html::$common_attrib);
}