Merge branch 'pipeline-graph-ux-improvements' into 'master'

Update styling and accessibility for pipeline mini graph

See merge request gitlab-org/gitlab!73725

app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

@@ -90,7 +90,7 @@ export default {
   <local-storage-sync v-model="isExpanded" :storage-key="$options.localDrawerKey" as-json>
     <aside
       aria-live="polite"
-      class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-3 gl-overflow-y-auto"
+      class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-200 gl-overflow-y-auto"
       :style="rootStyle"
     >
       <gl-button

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue

@@ -15,7 +15,7 @@
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import eventHub from '../../event_hub';
 import JobItem from './job_item.vue';
 
@@ -98,6 +98,9 @@ export default {
       // warn the pipelines table to update
       this.$emit('pipelineActionRequestComplete');
     },
+    stageAriaLabel(title) {
+      return sprintf(__('View Stage: %{title}'), { title });
+    },
   },
 };
 </script>
@@ -106,9 +109,10 @@ export default {
   <gl-dropdown
     ref="dropdown"
     v-gl-tooltip.hover.ds0
+    v-gl-tooltip="stage.title"
     data-testid="mini-pipeline-graph-dropdown"
-    :title="stage.title"
     variant="link"
+    :aria-label="stageAriaLabel(stage.title)"
     :lazy="true"
     :popper-opts="{ placement: 'bottom' }"
     :toggle-class="['mini-pipeline-graph-dropdown-toggle', triggerButtonClass]"

app/assets/stylesheets/pages/merge_requests.scss

@@ -947,19 +947,6 @@ $tabs-holder-z-index: 250;
     color: $gray-500;
     line-height: initial;
   }
-
-  // GlDropdown mini pipeline (Vue)
-  //   As the `mini-pipeline-item` mixin specificity is lower
-  //   than the toggle of dropdown with 'variant="link"' we add
-  //   classes ".gl-button.btn-link" to make it more specific
-  //   and avoid having the size overriden
-  //
-  //   See https://gitlab.com/gitlab-org/gitlab/-/issues/320737
-  button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle,
-  .stage-cell button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle svg {
-    height: $ci-action-icon-size-lg;
-    width: $ci-action-icon-size-lg;
-  }
 }
 
 .merge-request-details .file-finder-overlay.diff-file-finder {

app/assets/stylesheets/utilities.scss

@@ -297,3 +297,8 @@ $gl-line-height-42: px-to-rem(42px);
     max-width: 50%;
   }
 }
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2497
+.gl-z-index-200 {
+  z-index: 200;
+}

ee/app/assets/stylesheets/page_bundles/pipelines.scss

@@ -22,7 +22,9 @@
     @include mini-pipeline-item();
     display: inline-block;
     transition: margin 0.2s linear;
-    margin: 2px 7px 3px -14px;
+    margin-top: 2px;
+    margin-right: 7px;
+    margin-left: -14px;
 
     svg {
       height: $ci-action-icon-size;
@@ -34,6 +36,15 @@
       overflow: visible;
     }
 
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        top: -2px;
+        left: -2px;
+      }
+    }
+
     &:first-of-type:last-of-type {
       margin-right: 1px;
     }

locale/gitlab.pot

@@ -38264,6 +38264,9 @@ msgstr ""
 msgid "View Documentation"
 msgstr ""
 
+msgid "View Stage: %{title}"
+msgstr ""
+
 msgid "View alert details at"
 msgstr ""