Commit 106326a5 authored by Fatih Acet's avatar Fatih Acet

Merge branch '26445-accessible-piplelines-buttons' into 'master'

Update buttons on pipelines page to be more accessible

Closes #26445

See merge request !8561
parents 5f410001 c566acbd
...@@ -22,47 +22,51 @@ ...@@ -22,47 +22,51 @@
<div class="controls pull-right"> <div class="controls pull-right">
<div class="btn-group inline"> <div class="btn-group inline">
<div class="btn-group"> <div class="btn-group">
<a <button
v-if='actions' v-if='actions'
class="dropdown-toggle btn btn-default js-pipeline-dropdown-manual-actions" class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
data-toggle="dropdown" data-toggle="dropdown"
title="Manual build" title="Manual build"
alt="Manual Build" data-placement="top"
data-toggle="dropdown"
aria-label="Manual build"
> >
<span v-html='svgs.iconPlay'></span> <span v-html='svgs.iconPlay' aria-hidden="true"></span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down" aria-hidden="true"></i>
</a> </button>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for='action in pipeline.details.manual_actions'> <li v-for='action in pipeline.details.manual_actions'>
<a <a
rel="nofollow" rel="nofollow"
data-method="post" data-method="post"
:href='action.path' :href='action.path'
title="Manual build"
> >
<span v-html='svgs.iconPlay'></span> <span v-html='svgs.iconPlay' aria-hidden="true"></span>
<span title="Manual build">{{action.name}}</span> <span>{{action.name}}</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a <button
v-if='artifacts' v-if='artifacts'
class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download" class="dropdown-toggle btn btn-default build-artifacts has-tooltip js-pipeline-dropdown-download"
data-toggle="dropdown" data-toggle="dropdown"
type="button" title="Artifacts"
data-placement="top"
data-toggle="dropdown"
aria-label="Artifacts"
> >
<i class="fa fa-download"></i> <i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down" aria-hidden="true"></i>
</a> </button>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for='artifact in pipeline.details.artifacts'> <li v-for='artifact in pipeline.details.artifacts'>
<a <a
rel="nofollow" rel="nofollow"
:href='artifact.path' :href='artifact.path'
> >
<i class="fa fa-download"></i> <i class="fa fa-download" aria-hidden="true"></i>
<span>{{download(artifact.name)}}</span> <span>{{download(artifact.name)}}</span>
</a> </a>
</li> </li>
...@@ -76,9 +80,12 @@ ...@@ -76,9 +80,12 @@
title="Retry" title="Retry"
rel="nofollow" rel="nofollow"
data-method="post" data-method="post"
data-placement="top"
data-toggle="dropdown"
:href='pipeline.retry_path' :href='pipeline.retry_path'
aria-label="Retry"
> >
<i class="fa fa-repeat"></i> <i class="fa fa-repeat" aria-hidden="true"></i>
</a> </a>
<a <a
v-if='pipeline.flags.cancelable' v-if='pipeline.flags.cancelable'
...@@ -86,10 +93,12 @@ ...@@ -86,10 +93,12 @@
title="Cancel" title="Cancel"
rel="nofollow" rel="nofollow"
data-method="post" data-method="post"
data-placement="top"
data-toggle="dropdown"
:href='pipeline.cancel_path' :href='pipeline.cancel_path'
data-original-title="Cancel" aria-label="Cancel"
> >
<i class="fa fa-remove"></i> <i class="fa fa-remove" aria-hidden="true"></i>
</a> </a>
</div> </div>
</div> </div>
......
...@@ -82,12 +82,13 @@ ...@@ -82,12 +82,13 @@
data-placement="top" data-placement="top"
data-toggle="dropdown" data-toggle="dropdown"
type="button" type="button"
:aria-label='stage.title'
> >
<span v-html="svg"></span> <span v-html="svg" aria-hidden="true"></span>
<i class="fa fa-caret-down "></i> <i class="fa fa-caret-down" aria-hidden="true"></i>
</button> </button>
<ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"> <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
<div class="arrow-up"></div> <div class="arrow-up" aria-hidden="true"></div>
<div <div
@click='keepGraph($event)' @click='keepGraph($event)'
:class="dropdownClass" :class="dropdownClass"
......
...@@ -288,6 +288,10 @@ ...@@ -288,6 +288,10 @@
} }
} }
} }
.tooltip {
white-space: nowrap;
}
} }
.build-link { .build-link {
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
.btn-group.inline .btn-group.inline
- if actions.any? - if actions.any?
.btn-group .btn-group
%button.dropdown-toggle.btn.btn-default.js-pipeline-dropdown-manual-actions{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown-toggle.btn.btn-default.has-tooltip.js-pipeline-dropdown-manual-actions{ type: 'button', title: 'Manual build', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label': 'Manual build' }
= custom_icon('icon_play') = custom_icon('icon_play')
= icon('caret-down', 'aria-hidden' => 'true') = icon('caret-down', 'aria-hidden' => 'true')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
%span= build.name %span= build.name
- if artifacts.present? - if artifacts.present?
.btn-group .btn-group
%button.dropdown-toggle.btn.btn-default.build-artifacts.js-pipeline-dropdown-download{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown-toggle.btn.btn-default.build-artifacts.has-tooltip.js-pipeline-dropdown-download{ type: 'button', title: 'Artifacts', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label': 'Artifacts' }
= icon("download") = icon("download")
= icon('caret-down') = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
...@@ -102,8 +102,8 @@ ...@@ -102,8 +102,8 @@
- if can?(current_user, :update_pipeline, pipeline.project) - if can?(current_user, :update_pipeline, pipeline.project)
.cancel-retry-btns.inline .cancel-retry-btns.inline
- if pipeline.retryable? - if pipeline.retryable?
= link_to retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn has-tooltip', title: "Retry", method: :post do = link_to retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn has-tooltip', title: 'Retry', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label': 'Retry' , method: :post do
= icon("repeat") = icon("repeat")
- if pipeline.cancelable? - if pipeline.cancelable?
= link_to cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-remove has-tooltip', title: "Cancel", method: :post do = link_to cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-remove has-tooltip', title: 'Cancel', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label': 'Cancel' , method: :post do
= icon("remove") = icon("remove")
---
title: Improve button accessibility on pipelines page
merge_request: 8561
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment