Commit 1eb11771 authored by Coung Ngo's avatar Coung Ngo Committed by Jacques Erasmus

Add labels to UI toggles

Add labels to GlToggles with missing labels for accessibility
parent dbcd4ec7
<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"
/>
......
......@@ -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 })"
/>
......
......@@ -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)"
/>
......
......@@ -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.',
);
......
......@@ -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">
......
---
title: Add labels to UI toggles
merge_request: 56848
author:
type: fixed
......@@ -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"
......
......@@ -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 ""
......
......@@ -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(() => {
......
......@@ -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', () => {
......
......@@ -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', () => {
......
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