Missing attribute aria-label on several buttons

Summary

Several buttons are missing the aria-label attribute, which makes very hard for screen reader users to retrieve information.

Steps to reproduce

  • Go to any merge request
  • Right click on one stage button and select "Inspect element"

Example Project

I replicated this issue following the above steps on this MR: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/23372

What is the current bug behavior?

Since the attribute is missing, there is no available information when using a screen reader, which makes very hard to determine some information, e.g. if a test has passed.

This same behavior is present on the following buttons:

  • Edit comment
  • Copy branch name to clipboard
  • thumbs up/thumbs down
  • Toggle file browser (on a diff)
  • Copy file path to clipboard (on a diff)
  • Expand commit description
  • ... Among others

What is the expected correct behavior?

The attribute should be present.

Relevant logs and/or screenshots

The following is an example of a stage button, copied from the MR mentioned above:

<button id="stageDropdown"
    title=""
    data-placement="top"
    data-toggle="dropdown"
    data-display="static"
    type="button"
    aria-haspopup="true"
    aria-expanded="false"
    class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button ci-status-icon-success"
    data-original-title="test: passed">
    <span aria-label="test: passed"
        aria-hidden="true"
        class="no-pointer-events"><svg
        aria-hidden="true
        class="s16 ic-status_success_borderless">
            ...
    </span>
</button>

Possible fixes

As you may notice from the above example, button's information is already present in the data-original-title attribute, so the solution should be as simple as including the attribute aria-label with the same content of data-original-title.

In addition, there is a span element within the button containing an aria-label, but it's hidden using aria-hidden, so another solution might be to remove that aria-hidden.

Edited Nov 27, 2018 by Luis González
Assignee Loading
Time tracking Loading