Commit d08e1b60 authored by Coung Ngo's avatar Coung Ngo Committed by Savas Vedova

Add labels to GlToggles

Add accessible names to GlToggles so they are accessible to
screen readers
parent 18cac7f3
......@@ -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"
/>
......
......@@ -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"
......
......@@ -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>
......
<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"
......
......@@ -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">
......
<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 }">
......
......@@ -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>
......
---
title: Add labels to GlToggles
merge_request: 56387
author:
type: fixed
......@@ -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">
......
<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>
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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', () => {
......
......@@ -77,6 +77,12 @@ describe('MaintenanceModeSettingsApp', () => {
});
describe('GlToggle', () => {
it('has label', () => {
createComponent();
expect(findGlToggle().props('label')).toBe(MaintenanceModeSettingsApp.i18n.toggleLabel);
});
describe('onChange', () => {
beforeEach(() => {
createComponent();
......
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);
});
});
......
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', () => {
......
......@@ -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>
......
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);
});
......
......@@ -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 ""
......
......@@ -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();
......
......@@ -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);
......
......@@ -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('*');
});
......
......@@ -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', () => {
......
......@@ -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', () => {
......
......@@ -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', () => {
......
......@@ -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>
......
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,
);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment