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

3 files changed, 15 insertions, 2 deletions

diff --git a/program/js/app.js b/program/js/app.js
index 3fd18235a..b4a225019 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -4070,7 +4070,7 @@ function rcube_webmail()
 
     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 @@ function rcube_webmail()
       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];
 
diff --git a/program/steps/mail/attachments.inc b/program/steps/mail/attachments.inc
index c8b7f9517..fd122c5c1 100644
--- a/program/steps/mail/attachments.inc
+++ b/program/steps/mail/attachments.inc
@@ -180,6 +180,7 @@ if (is_array($_FILES['_attachments']['tmp_name'])) {
                 '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']);
diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc
index 6f1267d7d..a3c8a8a64 100644
--- a/program/steps/mail/compose.inc
+++ b/program/steps/mail/compose.inc
@@ -1524,7 +1524,9 @@ function rcmail_compose_attachment_list($attrib)
                         '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 @@ function rcmail_compose_attachment_list($attrib)
     $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);
 }