Update buttons to be accessiblefeature/accessible-buttons

4 files changed, 41 insertions, 21 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index ad5cb30cc42..af5045e8308 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -22,47 +22,52 @@
         <div class="controls pull-right">
           <div class="btn-group inline">
             <div class="btn-group">
-              <a
+              <button
                 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"
                 title="Manual build"
-                alt="Manual Build"
+                data-placement="top"
+                data-toggle="dropdown"
+                aria-label="Manual build"
               >
-                <span v-html='svgs.iconPlay'></span>
-                <i class="fa fa-caret-down"></i>
-              </a>
+                <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                <i class="fa fa-caret-down" aria-hidden="true"></i>
+              </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
                 <li v-for='action in pipeline.details.manual_actions'>
                   <a
                     rel="nofollow"
+                    class="pipeline-actions-dropdown-button"
                     data-method="post"
                     :href='action.path'
-                    title="Manual build"
                   >
-                    <span v-html='svgs.iconPlay'></span>
-                    <span title="Manual build">{{action.name}}</span>
+                    <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                    <span>{{action.name}}</span>
                   </a>
                 </li>
               </ul>
             </div>
             <div class="btn-group">
-              <a
+              <button
                 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"
+                title="Artifacts"
+                data-placement="top"
                 data-toggle="dropdown"
-                type="button"
+                aria-label="Artifacts"
               >
-                <i class="fa fa-download"></i>
-                <i class="fa fa-caret-down"></i>
-              </a>
+                <i class="fa fa-download" aria-hidden="true"></i>
+                <i class="fa fa-caret-down" aria-hidden="true"></i>
+              </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
                 <li v-for='artifact in pipeline.details.artifacts'>
                   <a
                     rel="nofollow"
                     :href='artifact.path'
                   >
-                    <i class="fa fa-download"></i>
+                    <i class="fa fa-download" aria-hidden="true"></i>
                     <span>{{download(artifact.name)}}</span>
                   </a>
                 </li>
@@ -76,7 +81,10 @@
               title="Retry"
               rel="nofollow"
               data-method="post"
+              data-placement="top"
+              data-toggle="dropdown"
               :href='pipeline.retry_path'
+              aria-label="Retry"
             >
               <i class="fa fa-repeat"></i>
             </a>
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 74a79dcedae..10d9565122a 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -62,12 +62,12 @@
           :title='stage.title'
           data-placement="top"
           data-toggle="dropdown"
-          type="button">
-          <span v-html="svg"></span>
-          <i class="fa fa-caret-down "></i>
+          :aria-label='stage.title'>
+          <span v-html="svg" aria-hidden="true"></span>
+          <i class="fa fa-caret-down" aria-hidden="true"></i>
         </button>
         <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 :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
         </ul>
       </div>
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 755eddefa42..adb14dc7e1c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -172,7 +172,8 @@
     background-color: $dropdown-divider-color;
   }
 
-  a {
+  a,
+  button {
     display: block;
     position: relative;
     padding: 5px 8px;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8861315d776..2eddab41b3b 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -287,6 +287,10 @@
         }
       }
     }
+
+    .tooltip {
+      white-space: nowrap;
+    }
   }
 
   .build-link {
@@ -312,6 +316,13 @@
   border-bottom: none;
 }
 
+.pipeline-actions-dropdown-button {
+  width: 100%;
+  background: none;
+  border: 0;
+  text-align: left;
+}
+
 .tab-pane {
   &.pipelines {
     .ci-table {