Add labels to UI toggles

Add labels to GlToggles with missing labels for accessibility

app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue

 <script>
 import { GlToggle } from '@gitlab/ui';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { __ } from '~/locale';
 import { disableShortcuts, enableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
 
 export default {
+  i18n: {
+    toggleLabel: __('Keyboard shortcuts'),
+  },
   components: {
     GlToggle,
   },
@@ -31,7 +35,7 @@ export default {
     <gl-toggle
       v-model="shortcutsEnabled"
       aria-describedby="shortcutsToggle"
-      label="Keyboard shortcuts"
+      :label="$options.i18n.toggleLabel"
       label-position="left"
       @change="onChange"
     />

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

@@ -29,6 +29,9 @@ import EnvironmentsDropdown from './environments_dropdown.vue';
 import Strategy from './strategy.vue';
 
 export default {
+  i18n: {
+    statusLabel: s__('FeatureFlags|Status'),
+  },
   components: {
     GlButton,
     GlBadge,
@@ -396,12 +399,14 @@ export default {
 
               <div class="table-section section-20 text-center" role="gridcell">
                 <div class="table-mobile-header" role="rowheader">
-                  {{ s__('FeatureFlags|Status') }}
+                  {{ $options.i18n.statusLabel }}
                 </div>
                 <div class="table-mobile-content gl-display-flex gl-justify-content-center">
                   <gl-toggle
                     :value="scope.active"
                     :disabled="!active || !canUpdateScope(scope)"
+                    :label="$options.i18n.statusLabel"
+                    label-position="hidden"
                     @change="(status) => (scope.active = status)"
                   />
                 </div>
@@ -529,11 +534,13 @@ export default {
 
               <div class="table-section section-20 text-center" role="gridcell">
                 <div class="table-mobile-header" role="rowheader">
-                  {{ s__('FeatureFlags|Status') }}
+                  {{ $options.i18n.statusLabel }}
                 </div>
                 <div class="table-mobile-content gl-display-flex gl-justify-content-center">
                   <gl-toggle
                     :disabled="!active"
+                    :label="$options.i18n.statusLabel"
+                    label-position="hidden"
                     :value="false"
                     @change="createNewScope({ active: true })"
                   />

app/assets/javascripts/packages_and_registries/settings/group/components/maven_settings.vue

@@ -2,6 +2,7 @@
 import { GlSprintf, GlToggle, GlFormGroup, GlFormInput } from '@gitlab/ui';
 
 import {
+  MAVEN_TOGGLE_LABEL,
   MAVEN_TITLE,
   MAVEN_SETTINGS_SUBTITLE,
   MAVEN_DUPLICATES_ALLOWED_DISABLED,
@@ -15,6 +16,7 @@ import {
 export default {
   name: 'MavenSettings',
   i18n: {
+    MAVEN_TOGGLE_LABEL,
     MAVEN_TITLE,
     MAVEN_SETTINGS_SUBTITLE,
     MAVEN_SETTING_EXCEPTION_TITLE,
@@ -80,6 +82,8 @@ export default {
       <div class="gl-display-flex">
         <gl-toggle
           data-qa-selector="allow_duplicates_toggle"
+          :label="$options.i18n.MAVEN_TOGGLE_LABEL"
+          label-position="hidden"
           :value="mavenDuplicatesAllowed"
           @change="update($options.modelNames.MAVEN_DUPLICATES_ALLOWED, $event)"
         />

app/assets/javascripts/packages_and_registries/settings/group/constants.js

@@ -8,6 +8,7 @@ export const PACKAGE_SETTINGS_DESCRIPTION = s__(
 
 export const MAVEN_TITLE = s__('PackageRegistry|Maven');
 export const MAVEN_SETTINGS_SUBTITLE = s__('PackageRegistry|Settings for Maven packages');
+export const MAVEN_TOGGLE_LABEL = s__('PackageRegistry|Allow duplicates');
 export const MAVEN_DUPLICATES_ALLOWED_DISABLED = s__(
   'PackageRegistry|%{boldStart}Do not allow duplicates%{boldEnd} - Packages with the same name and version are rejected.',
 );

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

@@ -12,6 +12,11 @@ export default {
     event: 'change',
   },
   props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
     name: {
       type: String,
       required: false,
@@ -82,6 +87,8 @@ export default {
       class="gl-mr-3"
       :value="featureEnabled"
       :disabled="disabledInput"
+      :label="label"
+      label-position="hidden"
       @change="toggleFeature"
     />
     <div class="select-wrapper gl-flex-fill-1">

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -22,6 +22,21 @@ const PAGE_FEATURE_ACCESS_LEVEL = s__('ProjectSettings|Everyone');
 export default {
   i18n: {
     ...CVE_ID_REQUEST_BUTTON_I18N,
+    analyticsLabel: s__('ProjectSettings|Analytics'),
+    containerRegistryLabel: s__('ProjectSettings|Container registry'),
+    forksLabel: s__('ProjectSettings|Forks'),
+    issuesLabel: s__('ProjectSettings|Issues'),
+    lfsLabel: s__('ProjectSettings|Git Large File Storage (LFS)'),
+    mergeRequestsLabel: s__('ProjectSettings|Merge requests'),
+    operationsLabel: s__('ProjectSettings|Operations'),
+    packagesLabel: s__('ProjectSettings|Packages'),
+    pagesLabel: s__('ProjectSettings|Pages'),
+    ciCdLabel: s__('CI/CD'),
+    repositoryLabel: s__('ProjectSettings|Repository'),
+    requirementsLabel: s__('ProjectSettings|Requirements'),
+    securityAndComplianceLabel: s__('ProjectSettings|Security & Compliance'),
+    snippetsLabel: s__('ProjectSettings|Snippets'),
+    wikiLabel: s__('ProjectSettings|Wiki'),
   },
 
   components: {
@@ -423,11 +438,12 @@ export default {
     >
       <project-setting-row
         ref="issues-settings"
-        :label="s__('ProjectSettings|Issues')"
+        :label="$options.i18n.issuesLabel"
         :help-text="s__('ProjectSettings|Lightweight issue tracking system.')"
       >
         <project-feature-setting
           v-model="issuesAccessLevel"
+          :label="$options.i18n.issuesLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][issues_access_level]"
         />
@@ -440,6 +456,8 @@ export default {
             v-model="cveIdRequestEnabled"
             class="gl-my-2"
             :disabled="cveIdRequestIsDisabled"
+            :label="$options.i18n.cve_request_toggle_label"
+            label-position="hidden"
             name="project[project_setting_attributes][cve_id_request_enabled]"
             data-testid="cve_id_request_toggle"
           />
@@ -447,11 +465,12 @@ export default {
       </project-setting-row>
       <project-setting-row
         ref="repository-settings"
-        :label="s__('ProjectSettings|Repository')"
+        :label="$options.i18n.repositoryLabel"
         :help-text="repositoryHelpText"
       >
         <project-feature-setting
           v-model="repositoryAccessLevel"
+          :label="$options.i18n.repositoryLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][repository_access_level]"
         />
@@ -459,11 +478,12 @@ export default {
       <div class="project-feature-setting-group gl-pl-7 gl-sm-pl-5">
         <project-setting-row
           ref="merge-request-settings"
-          :label="s__('ProjectSettings|Merge requests')"
+          :label="$options.i18n.mergeRequestsLabel"
           :help-text="s__('ProjectSettings|Submit changes to be merged upstream.')"
         >
           <project-feature-setting
             v-model="mergeRequestsAccessLevel"
+            :label="$options.i18n.mergeRequestsLabel"
             :options="repoFeatureAccessLevelOptions"
             :disabled-input="!repositoryEnabled"
             name="project[project_feature_attributes][merge_requests_access_level]"
@@ -471,11 +491,12 @@ export default {
         </project-setting-row>
         <project-setting-row
           ref="fork-settings"
-          :label="s__('ProjectSettings|Forks')"
+          :label="$options.i18n.forksLabel"
           :help-text="s__('ProjectSettings|Users can copy the repository to a new project.')"
         >
           <project-feature-setting
             v-model="forkingAccessLevel"
+            :label="$options.i18n.forksLabel"
             :options="featureAccessLevelOptions"
             :disabled-input="!repositoryEnabled"
             name="project[project_feature_attributes][forking_access_level]"
@@ -485,7 +506,7 @@ export default {
           v-if="registryAvailable"
           ref="container-registry-settings"
           :help-path="registryHelpPath"
-          :label="s__('ProjectSettings|Container registry')"
+          :label="$options.i18n.containerRegistryLabel"
           :help-text="
             s__('ProjectSettings|Every project can have its own space to store its Docker images')
           "
@@ -501,6 +522,8 @@ export default {
             v-model="containerRegistryEnabled"
             class="gl-my-2"
             :disabled="!repositoryEnabled"
+            :label="$options.i18n.containerRegistryLabel"
+            label-position="hidden"
             name="project[container_registry_enabled]"
           />
         </project-setting-row>
@@ -508,7 +531,7 @@ export default {
           v-if="lfsAvailable"
           ref="git-lfs-settings"
           :help-path="lfsHelpPath"
-          :label="s__('ProjectSettings|Git Large File Storage (LFS)')"
+          :label="$options.i18n.lfsLabel"
           :help-text="
             s__('ProjectSettings|Manages large files such as audio, video, and graphics files.')
           "
@@ -517,6 +540,8 @@ export default {
             v-model="lfsEnabled"
             class="gl-my-2"
             :disabled="!repositoryEnabled"
+            :label="$options.i18n.lfsLabel"
+            label-position="hidden"
             name="project[lfs_enabled]"
           />
           <p v-if="!lfsEnabled && lfsObjectsExist">
@@ -541,7 +566,7 @@ export default {
           v-if="packagesAvailable"
           ref="package-settings"
           :help-path="packagesHelpPath"
-          :label="s__('ProjectSettings|Packages')"
+          :label="$options.i18n.packagesLabel"
           :help-text="
             s__('ProjectSettings|Every project can have its own space to store its packages.')
           "
@@ -550,17 +575,20 @@ export default {
             v-model="packagesEnabled"
             class="gl-my-2"
             :disabled="!repositoryEnabled"
+            :label="$options.i18n.packagesLabel"
+            label-position="hidden"
             name="project[packages_enabled]"
           />
         </project-setting-row>
       </div>
       <project-setting-row
         ref="pipeline-settings"
-        :label="__('CI/CD')"
+        :label="$options.i18n.ciCdLabel"
         :help-text="s__('ProjectSettings|Build, test, and deploy your changes.')"
       >
         <project-feature-setting
           v-model="buildsAccessLevel"
+          :label="$options.i18n.ciCdLabel"
           :options="repoFeatureAccessLevelOptions"
           :disabled-input="!repositoryEnabled"
           name="project[project_feature_attributes][builds_access_level]"
@@ -568,11 +596,12 @@ export default {
       </project-setting-row>
       <project-setting-row
         ref="analytics-settings"
-        :label="s__('ProjectSettings|Analytics')"
+        :label="$options.i18n.analyticsLabel"
         :help-text="s__('ProjectSettings|View project analytics.')"
       >
         <project-feature-setting
           v-model="analyticsAccessLevel"
+          :label="$options.i18n.analyticsLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][analytics_access_level]"
         />
@@ -580,43 +609,47 @@ export default {
       <project-setting-row
         v-if="requirementsAvailable"
         ref="requirements-settings"
-        :label="s__('ProjectSettings|Requirements')"
+        :label="$options.i18n.requirementsLabel"
         :help-text="s__('ProjectSettings|Requirements management system.')"
       >
         <project-feature-setting
           v-model="requirementsAccessLevel"
+          :label="$options.i18n.requirementsLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][requirements_access_level]"
         />
       </project-setting-row>
       <project-setting-row
-        :label="s__('ProjectSettings|Security & Compliance')"
+        :label="$options.i18n.securityAndComplianceLabel"
         :help-text="s__('ProjectSettings|Security & Compliance for this project')"
       >
         <project-feature-setting
           v-model="securityAndComplianceAccessLevel"
+          :label="$options.i18n.securityAndComplianceLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][security_and_compliance_access_level]"
         />
       </project-setting-row>
       <project-setting-row
         ref="wiki-settings"
-        :label="s__('ProjectSettings|Wiki')"
+        :label="$options.i18n.wikiLabel"
         :help-text="s__('ProjectSettings|Pages for project documentation.')"
       >
         <project-feature-setting
           v-model="wikiAccessLevel"
+          :label="$options.i18n.wikiLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][wiki_access_level]"
         />
       </project-setting-row>
       <project-setting-row
         ref="snippet-settings"
-        :label="s__('ProjectSettings|Snippets')"
+        :label="$options.i18n.snippetsLabel"
         :help-text="s__('ProjectSettings|Share code with others outside the project.')"
       >
         <project-feature-setting
           v-model="snippetsAccessLevel"
+          :label="$options.i18n.snippetsLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][snippets_access_level]"
         />
@@ -625,26 +658,28 @@ export default {
         v-if="pagesAvailable && pagesAccessControlEnabled"
         ref="pages-settings"
         :help-path="pagesHelpPath"
-        :label="s__('ProjectSettings|Pages')"
+        :label="$options.i18n.pagesLabel"
         :help-text="
           s__('ProjectSettings|With GitLab Pages you can host your static websites on GitLab.')
         "
       >
         <project-feature-setting
           v-model="pagesAccessLevel"
+          :label="$options.i18n.pagesLabel"
           :options="pagesFeatureAccessLevelOptions"
           name="project[project_feature_attributes][pages_access_level]"
         />
       </project-setting-row>
       <project-setting-row
         ref="operations-settings"
-        :label="s__('ProjectSettings|Operations')"
+        :label="$options.i18n.operationsLabel"
         :help-text="
           s__('ProjectSettings|Configure your project resources and monitor their health.')
         "
       >
         <project-feature-setting
           v-model="operationsAccessLevel"
+          :label="$options.i18n.operationsLabel"
           :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][operations_access_level]"
         />

changelogs/unreleased/cngo-add-gl-toggle-labels.yml

+---
+title: Add labels to UI toggles
+merge_request: 56848
+author:
+type: fixed

ee/app/assets/javascripts/vulnerabilities/components/related_jira_issues.vue

@@ -129,7 +129,7 @@ export default {
           target="_blank"
           class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500"
         >
-          <gl-icon name="question" :size="12" role="text" />
+          <gl-icon name="question" :size="12" />
         </gl-link>
         <span
           class="gl-display-inline-flex gl-align-items-center gl-ml-4"

locale/gitlab.pot

@@ -21775,6 +21775,9 @@ msgstr ""
 msgid "PackageRegistry|Add composer registry"
 msgstr ""
 
+msgid "PackageRegistry|Allow duplicates"
+msgstr ""
+
 msgid "PackageRegistry|An error occurred while saving the settings"
 msgstr ""
 

spec/frontend/feature_flags/components/form_spec.js

@@ -123,6 +123,10 @@ describe('feature flag form', () => {
           });
         });
 
+        it('has label', () => {
+          expect(findGlToggle().props('label')).toBe(Form.i18n.statusLabel);
+        });
+
         it('should be disabled if the feature flag is not active', (done) => {
           wrapper.setProps({ active: false });
           wrapper.vm.$nextTick(() => {

spec/frontend/packages_and_registries/settings/group/components/maven_settings_spec.js

@@ -59,7 +59,10 @@ describe('Maven Settings', () => {
     mountComponent();
 
     expect(findToggle().exists()).toBe(true);
-    expect(findToggle().props('value')).toBe(defaultProps.mavenDuplicatesAllowed);
+    expect(findToggle().props()).toMatchObject({
+      label: component.i18n.MAVEN_TOGGLE_LABEL,
+      value: defaultProps.mavenDuplicatesAllowed,
+    });
   });
 
   it('toggle emits an update event', () => {

spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js

@@ -46,6 +46,7 @@ const defaultProps = {
   pagesHelpPath: '/help/user/project/pages/introduction#gitlab-pages-access-control',
   packagesAvailable: false,
   packagesHelpPath: '/help/user/packages/index',
+  requestCveAvailable: true,
 };
 
 describe('Settings Panel', () => {
@@ -76,6 +77,7 @@ describe('Settings Panel', () => {
   const findRepositoryFeatureSetting = () =>
     findRepositoryFeatureProjectRow().find(projectFeatureSetting);
   const findProjectVisibilitySettings = () => wrapper.find({ ref: 'project-visibility-settings' });
+  const findIssuesSettingsRow = () => wrapper.find({ ref: 'issues-settings' });
   const findAnalyticsRow = () => wrapper.find({ ref: 'analytics-settings' });
   const findProjectVisibilityLevelInput = () => wrapper.find('[name="project[visibility_level]"]');
   const findRequestAccessEnabledInput = () =>
@@ -174,6 +176,16 @@ describe('Settings Panel', () => {
     });
   });
 
+  describe('Issues settings', () => {
+    it('has label for CVE request toggle', () => {
+      wrapper = mountComponent();
+
+      expect(findIssuesSettingsRow().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.cve_request_toggle_label,
+      );
+    });
+  });
+
   describe('Repository', () => {
     it('should set the repository help text when the visibility level is set to private', () => {
       wrapper = mountComponent({ currentSettings: { visibilityLevel: visibilityOptions.PRIVATE } });
@@ -304,6 +316,17 @@ describe('Settings Panel', () => {
 
       expect(findContainerRegistryEnabledInput().props('disabled')).toBe(true);
     });
+
+    it('has label for the toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { visibilityLevel: visibilityOptions.PUBLIC },
+        registryAvailable: true,
+      });
+
+      expect(findContainerRegistrySettings().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.containerRegistryLabel,
+      );
+    });
   });
 
   describe('Git Large File Storage', () => {
@@ -342,6 +365,15 @@ describe('Settings Panel', () => {
       expect(findLFSFeatureToggle().props('disabled')).toBe(true);
     });
 
+    it('has label for toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE },
+        lfsAvailable: true,
+      });
+
+      expect(findLFSFeatureToggle().props('label')).toBe(settingsPanel.i18n.lfsLabel);
+    });
+
     it('should not change lfsEnabled when disabling the repository', async () => {
       // mount over shallowMount, because we are aiming to test rendered state of toggle
       wrapper = mountComponent({ currentSettings: { lfsEnabled: true } }, mount);
@@ -432,6 +464,17 @@ describe('Settings Panel', () => {
 
       expect(findPackagesEnabledInput().props('disabled')).toBe(true);
     });
+
+    it('has label for toggle', () => {
+      wrapper = mountComponent({
+        currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE },
+        packagesAvailable: true,
+      });
+
+      expect(findPackagesEnabledInput().findComponent(GlToggle).props('label')).toBe(
+        settingsPanel.i18n.packagesLabel,
+      );
+    });
   });
 
   describe('Pages', () => {