From 9764a0a306e8cb34d3520b1182dd7169b864c3e6 Mon Sep 17 00:00:00 2001
From: ahmad-kashkoush <ahmedkashkoush464@gmail.com>
Date: Sat, 15 Mar 2025 21:02:48 +0200
Subject: [PATCH] Update form UX by marking optional fields

- Add "(optional)" text to optional form field labels
- Add aria-required attribute to required fields for accessibility
- Update translations in gitlab.pot
- Replace native textarea with GlFormTextarea

Changelog: changed
---
 .../feature_flags/components/form.vue         | 26 ++++++++++++-------
 locale/gitlab.pot                             |  2 +-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index 5462532829fb0f..e8ac31aef45e9b 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlFormTextarea } from '@gitlab/ui';
 import { memoize, cloneDeep, isNumber, uniqueId } from 'lodash';
 import { s__ } from '~/locale';
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
@@ -23,6 +23,7 @@ export default {
     GlButton,
     Strategy,
     RelatedIssuesRoot,
+    GlFormTextarea,
   },
   mixins: [featureFlagsMixin()],
   inject: {
@@ -159,24 +160,30 @@ export default {
     <fieldset>
       <div class="-gl-mx-5 gl-flex gl-flex-wrap">
         <div class="gl-mb-5 gl-w-full gl-px-5 md:gl-basis-1/3">
-          <label for="feature-flag-name" class="gl-font-bold"
-            >{{ s__('FeatureFlags|Name') }} *</label
-          >
-          <input id="feature-flag-name" v-model="formName" class="form-control" />
+          <label for="feature-flag-name" class="gl-font-bold">
+            {{ s__('FeatureFlags|Name') }}
+          </label>
+          <input
+            id="feature-flag-name"
+            v-model="formName"
+            class="form-control"
+            required
+            aria-required="true"
+          />
         </div>
       </div>
-
       <div class="-gl-mx-5 gl-flex gl-flex-wrap">
         <div class="gl-mb-5 gl-w-full gl-px-5 md:gl-basis-1/3">
           <label for="feature-flag-description" class="gl-font-bold">
-            {{ s__('FeatureFlags|Description') }}
+            {{ s__('FeatureFlags|Description (optional)') }}
           </label>
-          <textarea
+          <gl-form-textarea
             id="feature-flag-description"
             v-model="formDescription"
             class="form-control"
             rows="4"
-          ></textarea>
+            aria-required="false"
+          />
         </div>
       </div>
 
@@ -186,7 +193,6 @@ export default {
         :can-admin="true"
         :show-categorized-issues="false"
       />
-
       <div class="-gl-mx-5 gl-flex gl-flex-wrap">
         <div class="gl-mb-5 gl-w-full gl-px-5">
           <h4>{{ s__('FeatureFlags|Strategies') }}</h4>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 84187e921a68b7..271d53fd059b1c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -25187,7 +25187,7 @@ msgstr ""
 msgid "FeatureFlags|Delete feature flag"
 msgstr ""
 
-msgid "FeatureFlags|Description"
+msgid "FeatureFlags|Description (optional)"
 msgstr ""
 
 msgid "FeatureFlags|Edit Feature flag"
-- 
GitLab