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
.