1 files changed, 12 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
index dd899701de0..2a18af90495 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 import { STATUS_CLOSED, STATUS_MERGED } from '~/issues/constants';
 import StatusIcon from './mr_widget_status_icon.vue';
 import Actions from './action_buttons.vue';
@@ -13,14 +14,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: {
-    expandDetailsTooltip: {
-      default: '',
-    },
-    collapseDetailsTooltip: {
-      default: '',
-    },
-  },
   props: {
     isCollapsible: {
       type: Boolean,
@@ -57,6 +50,16 @@ export default {
       required: false,
       default: () => [],
     },
+    expandDetailsTooltip: {
+      required: false,
+      type: String,
+      default: __('Expand merge details'),
+    },
+    collapseDetailsTooltip: {
+      required: false,
+      type: String,
+      default: __('Collapse merge details'),
+    },
   },
   computed: {
     wrapperClasses() {
@@ -120,6 +123,7 @@ export default {
           <gl-button
             v-gl-tooltip
             :title="collapsed ? expandDetailsTooltip : collapseDetailsTooltip"
+            :aria-label="collapsed ? expandDetailsTooltip : collapseDetailsTooltip"
             :icon="collapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
             category="tertiary"
             size="small"