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">

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', () => {