Update aria-label for remove button in policy editor

Why are we doing this work

From !134468 (comment 1610385533)

Aria label for remove button. SectionLayout component specifies aria label for the button as Remove But since it's used multiple times within the one section, it is quite confusing. Tabbing through the buttons and hearing Remove three times in a row doesn't help to know what is actually being removed. It will be great if we can pass that information to the component and render Remove approver , Remove action or Remove rule.

Relevant links

Non-functional requirements

• Documentation:
• Feature flag:
• Performance:
• Testing:

Implementation plan

• update security_orchestration/components/policy_editor/section_layout.vue to accept a removeType that updates the aria label
• update all instances of section_layout.vue that uses a remove button and add a remove-type prop

Maybe something like the below

diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/section_layout.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/section_layout.vue
index 4a8208672b82..50a7c39d77a3 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/section_layout.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/section_layout.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
 
 export default {
   name: 'SectionLayout',
@@ -22,8 +23,27 @@ export default {
       required: false,
       default: true,
     },
+    removeType: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
+    ariaLabelRemove() {
+      switch (this.removeType) {
+        case 'action':
+          return s__('SecurityOrchestration|Remove action');
+        case 'approver':
+          return s__('SecurityOrchestration|Remove approver');
+        case 'condition':
+          return s__('SecurityOrchestration|Remove condition');
+        case 'rule':
+          return s__('SecurityOrchestration|Remove rule');
+        default:
+          return __('Remove');
+      }
+    },
     contentClass() {
       return `gl-flex-grow-1 gl-w-full gl-display-flex gl-gap-3 gl-align-items-center gl-flex-wrap ${this.contentClasses}`;
     },
@@ -55,7 +75,7 @@ export default {
       <gl-button
         icon="remove"
         category="tertiary"
-        :aria-label="__('Remove')"
+        :aria-label="ariaLabelRemove"
         data-testid="remove-rule"
         @click="$emit('remove')"
       />
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 45599a495003..c9f30ba357f9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -42709,6 +42709,18 @@ msgstr ""
 msgid "SecurityOrchestration|Policy type"
 msgstr ""
 
+msgid "SecurityOrchestration|Remove action"
+msgstr ""
+
+msgid "SecurityOrchestration|Remove approver"
+msgstr ""
+
+msgid "SecurityOrchestration|Remove condition"
+msgstr ""
+
+msgid "SecurityOrchestration|Remove rule"
+msgstr ""
+
 msgid "SecurityOrchestration|Require %{approvals} %{plural} from %{approvers} if any of the following occur:"
 msgstr ""
 

Verification steps