1 files changed, 16 insertions, 21 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 4c130945487..d022579ef54 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -1,5 +1,5 @@
 <script>
-/* eslint-disable vue/require-default-prop, vue/no-v-html */
+/* eslint-disable vue/require-default-prop */
 import {
   GlIcon,
   GlLink,
@@ -7,11 +7,12 @@ import {
   GlSprintf,
   GlTooltip,
   GlTooltipDirective,
+  GlSafeHtmlDirective,
 } from '@gitlab/ui';
 import mrWidgetPipelineMixin from 'ee_else_ce/vue_merge_request_widget/mixins/mr_widget_pipeline';
 import { s__, n__ } from '~/locale';
-import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue';
 import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
+import PipelineStage from '~/pipelines/components/pipelines_list/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
@@ -32,6 +33,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   mixins: [mrWidgetPipelineMixin],
   props: {
@@ -139,45 +141,38 @@ export default {
   <div class="ci-widget media">
     <template v-if="hasCIError">
       <gl-icon name="status_failed" class="gl-text-red-500" :size="24" />
-      <div
-        class="gl-flex-fill-1 gl-ml-5"
-        tabindex="0"
-        role="text"
-        :aria-label="$options.errorText"
-        data-testid="ci-error-message"
-      >
+      <p class="gl-flex-fill-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
         <gl-sprintf :message="$options.errorText">
           <template #link="{ content }">
             <gl-link :href="mrTroubleshootingDocsPath">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
-      </div>
+      </p>
     </template>
     <template v-else-if="!hasPipeline">
       <gl-loading-icon size="md" />
-      <div class="gl-flex-fill-1 gl-display-flex gl-ml-5" data-testid="monitoring-pipeline-message">
-        <span tabindex="0" role="text" :aria-label="$options.monitoringPipelineText">
-          <gl-sprintf :message="$options.monitoringPipelineText" />
-        </span>
+      <p
+        class="gl-flex-fill-1 gl-display-flex gl-ml-5 gl-mb-0"
+        data-testid="monitoring-pipeline-message"
+      >
+        {{ $options.monitoringPipelineText }}
         <gl-link
+          v-gl-tooltip
           :href="ciTroubleshootingDocsPath"
           target="_blank"
+          :title="__('About this feature')"
           class="gl-display-flex gl-align-items-center gl-ml-2"
-          tabindex="0"
         >
           <gl-icon
             name="question"
-            :size="12"
-            tabindex="0"
-            role="text"
             :aria-label="__('Link to go to GitLab pipeline documentation')"
           />
         </gl-link>
-      </div>
+      </p>
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start gl-mr-3">
-        <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
+        <ci-icon :status="status" :size="24" />
       </a>
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">
@@ -208,10 +203,10 @@ export default {
               <template v-if="showSourceBranch">
                 {{ s__('Pipeline|on') }}
                 <tooltip-on-truncate
+                  v-safe-html="sourceBranchLink"
                   :title="sourceBranch"
                   truncate-target="child"
                   class="label-branch label-truncate gl-font-weight-normal"
-                  v-html="sourceBranchLink"
                 />
               </template>
             </div>