Add labels to GlToggles

Add accessible names to GlToggles so they are accessible to
screen readers

app/assets/javascripts/boards/components/sidebar/board_sidebar_subscription.vue

@@ -64,6 +64,8 @@ export default {
       v-if="!activeIssue.emailsDisabled"
       :value="activeIssue.subscribed"
       :is-loading="loading"
+      :label="$options.i18n.header.title"
+      label-position="hidden"
       data-testid="notification-subscribe-toggle"
       @change="handleToggleSubscription"
     />

app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

@@ -18,6 +18,9 @@ import { s__, __ } from '../../locale';
 const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS;
 
 export default {
+  i18n: {
+    modSecurityEnabled: s__('ClusterIntegration|ModSecurity enabled'),
+  },
   title: __('Web Application Firewall'),
   modsecurityUrl: 'https://modsecurity.org/about.html',
   components: {
@@ -202,7 +205,12 @@ export default {
             </strong>
           </p>
           <div class="form-check form-check-inline mt-3">
-            <gl-toggle v-model="modSecurityEnabled" :disabled="saveButtonDisabled" />
+            <gl-toggle
+              v-model="modSecurityEnabled"
+              :disabled="saveButtonDisabled"
+              :label="$options.i18n.modSecurityEnabled"
+              label-position="hidden"
+            />
           </div>
           <div
             v-if="ingress.modsecurity_enabled"

app/assets/javascripts/clusters/forms/components/integration_form.vue

@@ -9,8 +9,14 @@ import {
   GlButton,
 } from '@gitlab/ui';
 import { mapState } from 'vuex';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    toggleLabel: s__(
+      "ClusterIntegration|Enable or disable GitLab's connection to your Kubernetes cluster.",
+    ),
+  },
   components: {
     GlFormGroup,
     GlToggle,
@@ -79,11 +85,9 @@ export default {
             data-qa-selector="integration_status_toggle"
             aria-describedby="toggleCluster"
             :disabled="!editable"
-            :title="
-              s__(
-                'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.',
-              )
-            "
+            :label="$options.i18n.toggleLabel"
+            label-position="hidden"
+            :title="$options.i18n.toggleLabel"
           />
         </div>
       </div>

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

 <script>
 import { GlBadge, GlButton, GlTooltipDirective, GlModal, GlToggle, GlIcon } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ROLLOUT_STRATEGY_PERCENT_ROLLOUT, NEW_VERSION_FLAG, LEGACY_FLAG } from '../constants';
 import { labelForStrategy } from '../utils';
 
 export default {
+  i18n: {
+    toggleLabel: __('Feature flag status'),
+  },
   components: {
     GlBadge,
     GlButton,
@@ -138,6 +141,8 @@ export default {
               v-if="featureFlag.update_path"
               :value="featureFlag.active"
               :disabled="statusToggleDisabled(featureFlag)"
+              :label="$options.i18n.toggleLabel"
+              label-position="hidden"
               data-testid="feature-flag-status-toggle"
               data-track-event="click_button"
               data-track-label="feature_flag_toggle"

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

@@ -4,6 +4,9 @@ import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
+  i18n: {
+    toggleLabel: __('Activate Service Desk'),
+  },
   components: {
     ClipboardButton,
     GlButton,
@@ -99,11 +102,12 @@ export default {
       id="service-desk-checkbox"
       :value="isEnabled"
       class="d-inline-block align-middle mr-1"
-      label-position="left"
+      :label="$options.i18n.toggleLabel"
+      label-position="hidden"
       @change="onCheckboxToggle"
     />
-    <label class="align-middle" for="service-desk-checkbox">
-      {{ __('Activate Service Desk') }}
+    <label class="align-middle">
+      {{ $options.i18n.toggleLabel }}
     </label>
     <div v-if="isEnabled" class="row mt-3">
       <div class="col-md-9 mb-0">

app/assets/javascripts/registry/settings/components/expiration_toggle.vue

 <script>
 import { GlFormGroup, GlToggle, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { ENABLED_TOGGLE_DESCRIPTION, DISABLED_TOGGLE_DESCRIPTION } from '../constants';
 
 export default {
+  i18n: {
+    toggleLabel: s__('ContainerRegistry|Enable expiration policy'),
+  },
   components: {
     GlFormGroup,
     GlToggle,
@@ -39,7 +43,13 @@ export default {
 <template>
   <gl-form-group id="expiration-policy-toggle-group" label-for="expiration-policy-toggle">
     <div class="gl-display-flex">
-      <gl-toggle id="expiration-policy-toggle" v-model="enabled" :disabled="disabled" />
+      <gl-toggle
+        id="expiration-policy-toggle"
+        v-model="enabled"
+        :label="$options.i18n.toggleLabel"
+        label-position="hidden"
+        :disabled="disabled"
+      />
       <span class="gl-ml-5 gl-line-height-24" data-testid="description">
         <gl-sprintf :message="toggleText">
           <template #strong="{ content }">

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

@@ -132,11 +132,11 @@ export default {
     <div class="settings-content">
       <form name="self-monitoring-form">
         <p ref="selfMonitoringFormText" v-html="selfMonitoringFormText"></p>
-        <gl-form-group :label="$options.formLabels.createProject" label-for="self-monitor-toggle">
+        <gl-form-group>
           <gl-toggle
             v-model="selfMonitorEnabled"
             :is-loading="loading"
-            name="self-monitor-toggle"
+            :label="$options.formLabels.createProject"
           />
         </gl-form-group>
       </form>

changelogs/unreleased/cngo-add-labels-to-gltoggles.yml

+---
+title: Add labels to GlToggles
+merge_request: 56387
+author:
+type: fixed

ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue

@@ -41,7 +41,11 @@ export default {
     <gl-loading-icon v-if="loading" size="xl" />
     <gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
       <div class="gl-display-flex gl-align-items-center gl-mb-4">
-        <gl-toggle v-model="maintenanceEnabled" />
+        <gl-toggle
+          v-model="maintenanceEnabled"
+          :label="$options.i18n.toggleLabel"
+          label-position="hidden"
+        />
         <div class="gl-ml-3">
           <p class="gl-mb-0">{{ $options.i18n.toggleLabel }}</p>
           <p class="gl-mb-0 gl-text-gray-500">

ee/app/assets/javascripts/registrations/components/registration_trial_toggle.vue

 <script>
 import { GlToggle } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    toggleLabel: s__('Trial|GitLab Ultimate trial (optional)'),
+  },
   components: {
     GlToggle,
   },
@@ -30,5 +34,12 @@ export default {
 };
 </script>
 <template>
-  <gl-toggle v-model="trial" name="trial" data-testid="trial" @change="toggleTrial" />
+  <gl-toggle
+    v-model="trial"
+    name="trial"
+    :label="$options.i18n.toggleLabel"
+    label-position="hidden"
+    data-testid="trial"
+    @change="toggleTrial"
+  />
 </template>

ee/app/assets/javascripts/security_dashboard/components/filters.vue

@@ -2,10 +2,14 @@
 import { GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { severityFilter, scannerFilter } from 'ee/security_dashboard/helpers';
+import { s__ } from '~/locale';
 import { DISMISSAL_STATES } from '../store/modules/filters/constants';
 import StandardFilter from './filters/standard_filter.vue';
 
 export default {
+  i18n: {
+    toggleLabel: s__('SecurityReports|Hide dismissed'),
+  },
   components: {
     StandardFilter,
     GlToggle,
@@ -45,8 +49,7 @@ export default {
       <div class="gl-display-flex ml-lg-auto p-2">
         <slot name="buttons"></slot>
         <div class="pl-md-6">
-          <strong>{{ s__('SecurityReports|Hide dismissed') }}</strong>
-          <gl-toggle v-model="hideDismissed" class="gl-mt-2 js-toggle" />
+          <gl-toggle v-model="hideDismissed" :label="$options.i18n.toggleLabel" />
         </div>
       </div>
     </div>

ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue

@@ -19,6 +19,9 @@ import { CiliumNetworkPolicyKind } from './policy_editor/constants';
 import PolicyDrawer from './policy_editor/policy_drawer.vue';
 
 export default {
+  i18n: {
+    enforcementStatus: s__('NetworkPolicies|Enforcement status'),
+  },
   components: {
     GlTable,
     GlEmptyState,
@@ -294,9 +297,13 @@ export default {
           </div>
         </div>
 
-        <h5 class="gl-mt-6">{{ s__('NetworkPolicies|Enforcement status') }}</h5>
+        <h5 class="gl-mt-6">{{ $options.i18n.enforcementStatus }}</h5>
         <p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
-        <gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" />
+        <gl-toggle
+          v-model="selectedPolicy.isEnabled"
+          :label="$options.i18n.enforcementStatus"
+          label-position="hidden"
+        />
       </div>
     </gl-drawer>
   </div>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor.vue

@@ -35,6 +35,9 @@ import PolicyPreview from './policy_preview.vue';
 import PolicyRuleBuilder from './policy_rule_builder.vue';
 
 export default {
+  i18n: {
+    toggleLabel: s__('NetworkPolicies|Policy status'),
+  },
   components: {
     GlFormGroup,
     GlFormSelect,
@@ -253,8 +256,8 @@ export default {
     </div>
     <div class="row">
       <div class="col-md-auto">
-        <gl-form-group :label="s__('NetworkPolicies|Policy status')" label-for="policyStatus">
-          <gl-toggle id="policyStatus" v-model="policy.isEnabled" />
+        <gl-form-group>
+          <gl-toggle v-model="policy.isEnabled" :label="$options.i18n.toggleLabel" />
         </gl-form-group>
       </div>
     </div>

ee/spec/frontend/groups/components/registration_trial_toggle_spec.js

@@ -26,7 +26,7 @@ describe('Registration Trial Toggle', () => {
     });
 
     it('shows the toggle component', () => {
-      expect(wrapper.find(GlToggle).exists()).toBe(true);
+      expect(wrapper.find(GlToggle).props('label')).toBe(RegistrationTrialToggle.i18n.toggleLabel);
     });
 
     it('sets the default value to be false', () => {

ee/spec/frontend/maintenance_mode_settings/components/app_spec.js

@@ -77,6 +77,12 @@ describe('MaintenanceModeSettingsApp', () => {
   });
 
   describe('GlToggle', () => {
+    it('has label', () => {
+      createComponent();
+
+      expect(findGlToggle().props('label')).toBe(MaintenanceModeSettingsApp.i18n.toggleLabel);
+    });
+
     describe('onChange', () => {
       beforeEach(() => {
         createComponent();

ee/spec/frontend/security_dashboard/components/filters_spec.js

+import { GlToggle } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import Filters from 'ee/security_dashboard/components/filters.vue';
@@ -42,7 +43,7 @@ describe('Filter component', () => {
     });
 
     it('should display "Hide dismissed vulnerabilities" toggle', () => {
-      expect(wrapper.findAll('.js-toggle')).toHaveLength(1);
+      expect(wrapper.findComponent(GlToggle).props('label')).toBe(Filters.i18n.toggleLabel);
     });
   });
 

ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js

-import { GlTable } from '@gitlab/ui';
+import { GlTable, GlToggle } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import NetworkPolicyList from 'ee/threat_monitoring/components/network_policy_list.vue';
 import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
@@ -40,7 +40,7 @@ describe('NetworkPolicyList component', () => {
   const findTableEmptyState = () => wrapper.find({ ref: 'tableEmptyState' });
   const findEditorDrawer = () => wrapper.find({ ref: 'editorDrawer' });
   const findPolicyEditor = () => wrapper.find({ ref: 'policyEditor' });
-  const findPolicyToggle = () => wrapper.find('[data-testid="policyToggle"]');
+  const findPolicyToggle = () => wrapper.find(GlToggle);
   const findApplyButton = () => wrapper.find({ ref: 'applyButton' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
   const findAutodevopsAlert = () => wrapper.find('[data-testid="autodevopsAlert"]');
@@ -177,7 +177,10 @@ spec:
     it('renders network policy toggle', () => {
       const policyToggle = findPolicyToggle();
       expect(policyToggle.exists()).toBe(true);
-      expect(policyToggle.props('value')).toBe(mockData[0].isEnabled);
+      expect(policyToggle.props()).toMatchObject({
+        label: NetworkPolicyList.i18n.enforcementStatus,
+        value: mockData[0].isEnabled,
+      });
     });
 
     it('renders disabled apply button', () => {

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_editor_spec.js.snap

@@ -111,12 +111,9 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
     <div
       class="col-md-auto"
     >
-      <gl-form-group-stub
-        label="Policy status"
-        label-for="policyStatus"
-      >
+      <gl-form-group-stub>
         <gl-toggle-stub
-          id="policyStatus"
+          label="Policy status"
           labelposition="top"
         />
       </gl-form-group-stub>

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js

-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue';
 import {
@@ -103,6 +103,10 @@ spec:
     expect(wrapper.find('section').element).toMatchSnapshot();
   });
 
+  it('renders toggle with label', () => {
+    expect(wrapper.findComponent(GlToggle).props('label')).toBe(PolicyEditorApp.i18n.toggleLabel);
+  });
+
   it('does not render yaml editor', () => {
     expect(findYamlEditor().exists()).toBe(false);
   });

locale/gitlab.pot

@@ -6938,6 +6938,9 @@ msgstr ""
 msgid "ClusterIntegration|Manage your Kubernetes cluster by visiting %{provider_link}"
 msgstr ""
 
+msgid "ClusterIntegration|ModSecurity enabled"
+msgstr ""
+
 msgid "ClusterIntegration|Namespace per environment"
 msgstr ""
 
@@ -8108,6 +8111,9 @@ msgstr ""
 msgid "ContainerRegistry|Docker connection error"
 msgstr ""
 
+msgid "ContainerRegistry|Enable expiration policy"
+msgstr ""
+
 msgid "ContainerRegistry|Expiration policy is disabled"
 msgstr ""
 

spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js

@@ -45,6 +45,12 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
       expect(findNotificationHeader().text()).toBe('Notifications');
     });
 
+    it('renders toggle with label', () => {
+      createComponent();
+
+      expect(findToggle().props('label')).toBe(BoardSidebarSubscription.i18n.header.title);
+    });
+
     it('renders toggle as "off" when currently not subscribed', () => {
       createComponent();
 

spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js

@@ -59,6 +59,12 @@ describe('IngressModsecuritySettings', () => {
         });
       });
 
+      it('renders toggle with label', () => {
+        expect(findModSecurityToggle().props('label')).toBe(
+          IngressModsecuritySettings.i18n.modSecurityEnabled,
+        );
+      });
+
       it('renders save and cancel buttons', () => {
         expect(findSaveButton().exists()).toBe(true);
         expect(findCancelButton().exists()).toBe(true);

spec/frontend/clusters/forms/components/integration_form_spec.js

@@ -45,8 +45,12 @@ describe('ClusterIntegrationForm', () => {
     beforeEach(() => createWrapper());
 
     it('enables toggle if editable is true', () => {
-      expect(findGlToggle().props('disabled')).toBe(false);
+      expect(findGlToggle().props()).toMatchObject({
+        disabled: false,
+        label: IntegrationForm.i18n.toggleLabel,
       });
+    });
+
     it('sets the envScope to default', () => {
       expect(wrapper.find('[id="cluster_environment_scope"]').attributes('value')).toBe('*');
     });

spec/frontend/feature_flags/components/feature_flags_table_spec.js

@@ -129,7 +129,10 @@ describe('Feature flag table', () => {
 
     it('should have a toggle', () => {
       expect(toggle.exists()).toBe(true);
-      expect(toggle.props('value')).toBe(true);
+      expect(toggle.props()).toMatchObject({
+        label: FeatureFlagsTable.i18n.toggleLabel,
+        value: true,
+      });
     });
 
     it('should trigger a toggle event', () => {

spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -40,7 +40,7 @@ describe('ServiceDeskSetting', () => {
         });
 
         it('should see activation checkbox', () => {
-          expect(findToggle().exists()).toBe(true);
+          expect(findToggle().props('label')).toBe(ServiceDeskSetting.i18n.toggleLabel);
         });
 
         it('should see main panel with the email info', () => {

spec/frontend/registry/settings/components/expiration_toggle_spec.js

@@ -32,7 +32,7 @@ describe('ExpirationToggle', () => {
     it('has a toggle component', () => {
       mountComponent();
 
-      expect(findToggle().exists()).toBe(true);
+      expect(findToggle().props('label')).toBe(component.i18n.toggleLabel);
     });
 
     it('has a description', () => {

spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap

@@ -45,13 +45,10 @@ exports[`self monitor component When the self monitor project has not been creat
         Enabling this feature creates a project that can be used to monitor the health of your instance.
       </p>
        
-      <gl-form-group-stub
-        label="Create Project"
-        label-for="self-monitor-toggle"
-      >
+      <gl-form-group-stub>
         <gl-toggle-stub
+          label="Create Project"
           labelposition="top"
-          name="self-monitor-toggle"
         />
       </gl-form-group-stub>
     </form>

spec/frontend/self_monitor/components/self_monitor_form_spec.js

-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue';
@@ -82,6 +82,14 @@ describe('self monitor component', () => {
           wrapper.find({ ref: 'selfMonitoringFormText' }).find('a').attributes('href'),
         ).toEqual(`${TEST_HOST}/instance-administrators-random/gitlab-self-monitoring`);
       });
+
+      it('renders toggle', () => {
+        wrapper = shallowMount(SelfMonitor, { store });
+
+        expect(wrapper.findComponent(GlToggle).props('label')).toBe(
+          SelfMonitor.formLabels.createProject,
+        );
+      });
     });
   });
 });