Accessibility > Merge request header ellipsis buttons
Problem
There are two ellipsis buttons in the MR header that lack accessible names and tooltips.
From Pajamas:
An icon can be used in place of text. If the action may not be universally understood consider using a tooltip to provide the action in text form.
Icon-only buttons must use aria-label to indicate the action. (source)
And in GitLab UI, icon buttons include a warning when inner text or an aria-label
is missing.
Ellipsis buttons | 1 code | 2 code |
---|---|---|
|
|
- The button (labeled 1 in the first screenshot) lacks a tooltip and the
gl-sr-only
text within says "Toggle dropdown" which adds little clarity for the purpose of the controls. There is also noaria-label
. - The button (labeled 2 in the first screenshot) lacks a tooltip and an
aria-label
. Additionally, the associated dropdown is supposed to be labelled by the button, but since the button has no meaningful label the dropdown also won't. This button is also inline with two other icon-only buttons, both of which have a tooltip.
Proposal
- Include a tooltip for each ellipsis button.
- Remove the
gl-sr-only
text. - Include an
aria-label
for each button that matches the tooltip text. - Ensure buttons and dropdown panel are correctly associated to one another.