Add label to toggle in edit_feature_flag.vue

app/assets/javascripts/feature_flags/components/edit_feature_flag.vue

@@ -86,6 +86,8 @@ export default {
           data-track-event="click_button"
           data-track-label="feature_flag_toggle"
           class="gl-mr-4"
+          :label="__('Feature flag status')"
+          label-position="hidden"
           @change="toggleActive"
         />
         <h3 class="page-title gl-m-0">{{ title }}</h3>

changelogs/unreleased/300443-add-label.yml

+---
+title: Add GlToggle label in edit feature flag
+merge_request: 54546
+author: Yogi (@yo)
+type: changed

locale/gitlab.pot

@@ -12575,6 +12575,9 @@ msgstr ""
 msgid "Feature flag is not enabled on the environment's project."
 msgstr ""
 
+msgid "Feature flag status"
+msgstr ""
+
 msgid "Feature flag was not removed."
 msgstr ""
 

spec/frontend/feature_flags/components/edit_feature_flag_spec.js

@@ -150,5 +150,12 @@ describe('Edit feature flag form', () => {
         label: 'feature_flag_toggle',
       });
     });
+
+    it('should render the toggle with a visually hidden label', () => {
+      expect(wrapper.find(GlToggle).props()).toMatchObject({
+        label: 'Feature flag status',
+        labelPosition: 'hidden',
+      });
+    });
   });
 });