Merge branch 'justin_ho-fix-a11y-issues-with-duo-workflow' into 'master'

Duo Workflow: Update aria-label of buttons in VSA form

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181417



Merged-by: Deepika Guliani <dguliani@gitlab.com>
Approved-by: Deepika Guliani <dguliani@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Co-authored-by: Justin Ho Tuan Duong <hduong@gitlab.com>

ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/stage_field_actions.vue

 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   name: 'StageFieldActions',
@@ -28,6 +28,12 @@ export default {
     hideActionTooltip() {
       return this.canRemove ? __('Remove') : __('Hide');
     },
+    hideActionAriaLabel() {
+      return sprintf(s__('CreateValueStreamForm|%{action} stage %{index}'), {
+        action: this.hideActionTooltip,
+        index: this.index + 1,
+      });
+    },
     hideActionIcon() {
       return this.canRemove ? 'remove' : 'eye-slash';
     },
@@ -43,7 +49,7 @@ export default {
       v-gl-tooltip
       category="tertiary"
       :title="hideActionTooltip"
-      :aria-label="hideActionTooltip"
+      :aria-label="hideActionAriaLabel"
       :data-testid="hideActionTestId"
       :icon="hideActionIcon"
       @click="$emit(hideActionEvent, index)"

ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/stage_field_move.vue

 <script>
 import { GlButton, GlButtonGroup } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { STAGE_SORT_DIRECTION } from '../constants';
 
 export default {
@@ -33,6 +33,18 @@ export default {
     isLastActiveStage() {
       return this.index === this.lastStageIndex;
     },
+    moveDownAriaLabel() {
+      return sprintf(s__('CreateValueStreamForm|%{action} stage %{index}'), {
+        action: this.$options.i18n.moveDownLabel,
+        index: this.index + 1,
+      });
+    },
+    moveUpAriaLabel() {
+      return sprintf(s__('CreateValueStreamForm|%{action} stage %{index}'), {
+        action: this.$options.i18n.moveUpLabel,
+        index: this.index + 1,
+      });
+    },
   },
   STAGE_SORT_DIRECTION,
 };
@@ -46,7 +58,7 @@ export default {
         :disabled="isFirstActiveStage"
         icon="chevron-up"
         :title="$options.i18n.moveUpLabel"
-        :aria-label="$options.i18n.moveUpLabel"
+        :aria-label="moveUpAriaLabel"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.UP })"
       />
       <gl-button
@@ -55,7 +67,7 @@ export default {
         :disabled="isLastActiveStage"
         icon="chevron-down"
         :title="$options.i18n.moveDownLabel"
-        :aria-label="$options.i18n.moveDownLabel"
+        :aria-label="moveDownAriaLabel"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.DOWN })"
       />
     </gl-button-group>

locale/gitlab.pot

@@ -17418,6 +17418,9 @@ msgstr ""
 msgid "CreateTimelogForm|Time spent"
 msgstr ""
+msgid "CreateValueStreamForm|%{action} stage %{index}"
+msgstr ""
+
 msgid "CreateValueStreamForm|%{name} (default)"
 msgstr ""