Commit 203e1c91 authored by Mireya Andres's avatar Mireya Andres Committed by Ezekiel Kigbo

Update styling and accessibility for pipeline mini graph

parent 23912a35
......@@ -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
......
......@@ -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]"
......
......@@ -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 {
......
......@@ -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;
}
......@@ -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;
}
......
......@@ -38223,6 +38223,9 @@ msgstr ""
msgid "View Documentation"
msgstr ""
msgid "View Stage: %{title}"
msgstr ""
msgid "View alert details at"
msgstr ""
......
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