Commit bf7589ad authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch 'cngo-add-aria-labels-to-icon-only-buttons-ee' into 'master'

Add aria labels to icon-only buttons

See merge request gitlab-org/gitlab!58460
parents c917b53d 901cdb20
......@@ -4,6 +4,10 @@ import { __ } from '~/locale';
import { STAGE_SORT_DIRECTION } from './constants';
export default {
i18n: {
moveDownLabel: __('Move down'),
moveUpLabel: __('Move up'),
},
name: 'StageFieldActions',
components: {
GlButton,
......@@ -61,7 +65,8 @@ export default {
:data-testid="`stage-action-move-down-${index}`"
:disabled="isLastActiveStage"
icon="arrow-down"
:title="__('Move down')"
:title="$options.i18n.moveDownLabel"
:aria-label="$options.i18n.moveDownLabel"
@click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.DOWN })"
/>
<gl-button
......@@ -69,13 +74,15 @@ export default {
:data-testid="`stage-action-move-up-${index}`"
:disabled="isFirstActiveStage"
icon="arrow-up"
:title="__('Move up')"
:title="$options.i18n.moveUpLabel"
:aria-label="$options.i18n.moveUpLabel"
@click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.UP })"
/>
</gl-button-group>
<gl-button
v-gl-tooltip
:title="hideActionTooltip"
:aria-label="hideActionTooltip"
:data-testid="hideActionTestId"
:icon="hideActionIcon"
@click="$emit(hideActionEvent, index)"
......
......@@ -244,6 +244,7 @@ export default {
:disabled="isCurrentGroup(item)"
category="tertiary"
icon="remove"
:aria-label="$options.i18n.removeButton"
@click="setSelectedSegment(item)"
/>
</span>
......
......@@ -32,6 +32,9 @@ export default {
chevronIcon() {
return this.collapsed ? 'chevron-right' : 'chevron-down';
},
chevronLabel() {
return this.collapsed ? __('Expand') : __('Collapse');
},
statusCheckTimestamp() {
return this.node.lastSuccessfulStatusCheckTimestamp * 1000;
},
......@@ -49,6 +52,7 @@ export default {
category="tertiary"
variant="confirm"
:icon="chevronIcon"
:aria-label="chevronLabel"
@click="$emit('collapse')"
/>
<div
......
......@@ -182,6 +182,7 @@ export default {
<gl-button
v-gl-tooltip.hover
:title="$options.i18n.fetchIssueTypesButtonLabel"
:aria-label="$options.i18n.fetchIssueTypesButtonLabel"
:disabled="!projectKey"
icon="retry"
data-testid="fetch-issue-types"
......
......@@ -133,6 +133,7 @@ export default {
v-if="canUpdate"
class="gl-ml-auto"
icon="remove"
:aria-label="__('Delete')"
data-testid="delete-button"
@click="modalVisible = true"
/>
......
......@@ -9,8 +9,12 @@ import {
GlTooltipDirective,
} from '@gitlab/ui';
import fuzzaldrinPlus from 'fuzzaldrin-plus';
import { s__ } from '~/locale';
export default {
i18n: {
editProfileLabel: s__('DastProfiles|Edit profile'),
},
name: 'OnDemandScansProfileSelector',
components: {
GlButton,
......@@ -125,7 +129,8 @@ export default {
v-gl-tooltip
category="primary"
icon="pencil"
:title="s__('DastProfiles|Edit profile')"
:title="$options.i18n.editProfileLabel"
:aria-label="$options.i18n.editProfileLabel"
:href="selectedProfile.editPath"
class="gl-absolute gl-right-7"
/>
......
......@@ -25,6 +25,8 @@ export const i18n = {
deleteScheduleLabel: s__('OnCallSchedules|Delete schedule'),
rotationTitle: s__('OnCallSchedules|Rotations'),
addARotation: s__('OnCallSchedules|Add a rotation'),
viewPreviousTimeframe: s__('OnCallSchedules|View previous timeframe'),
viewNextTimeframe: s__('OnCallSchedules|View next timeframe'),
presetTypeLabels: {
DAYS: s__('OnCallSchedules|1 day'),
WEEKS: s__('OnCallSchedules|2 weeks'),
......@@ -211,12 +213,14 @@ export default {
data-testid="previous-timeframe-btn"
icon="chevron-left"
:disabled="loading"
:aria-label="$options.i18n.viewPreviousTimeframe"
@click="updateToViewPreviousTimeframe"
/>
<gl-button
data-testid="next-timeframe-btn"
icon="chevron-right"
:disabled="loading"
:aria-label="$options.i18n.viewNextTimeframe"
@click="updateToViewNextTimeframe"
/>
</gl-button-group>
......
<script>
import { GlPopover, GlLink, GlAvatar, GlButton, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { FilterState } from '../constants';
......@@ -7,6 +8,10 @@ import RequirementMeta from '../mixins/requirement_meta';
import RequirementStatusBadge from './requirement_status_badge.vue';
export default {
i18n: {
archiveLabel: __('Archive'),
editLabel: __('Edit'),
},
components: {
GlPopover,
GlLink,
......@@ -130,7 +135,8 @@ export default {
<gl-button
v-gl-tooltip
icon="pencil"
:title="__('Edit')"
:title="$options.i18n.editLabel"
:aria-label="$options.i18n.editLabel"
@click="$emit('edit-click', requirement)"
/>
</li>
......@@ -140,7 +146,8 @@ export default {
v-gl-tooltip
icon="archive"
:loading="stateChangeRequestActive"
:title="__('Archive')"
:title="$options.i18n.archiveLabel"
:aria-label="$options.i18n.archiveLabel"
@click.stop="handleArchiveClick"
/>
</li>
......
<script>
import { GlBadge, GlButton, GlButtonGroup, GlTabs, GlTab, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import { FilterState } from '../constants';
export default {
i18n: {
exportAsCsvLabel: __('Export as CSV'),
importRequirementsLabel: __('Import requirements'),
},
directives: {
GlTooltip: GlTooltipDirective,
},
......@@ -87,7 +91,8 @@ export default {
<gl-button-group>
<gl-button
v-gl-tooltip
:title="__('Export as CSV')"
:title="$options.i18n.exportAsCsvLabel"
:aria-label="$options.i18n.exportAsCsvLabel"
category="secondary"
:disabled="showCreateForm"
icon="export"
......@@ -95,7 +100,8 @@ export default {
/>
<gl-button
v-gl-tooltip
:title="__('Import requirements')"
:title="$options.i18n.importRequirementsLabel"
:aria-label="$options.i18n.importRequirementsLabel"
category="secondary"
class="js-import-requirements qa-import-requirements-button"
:disabled="showCreateForm"
......
......@@ -254,6 +254,7 @@ export default {
data-testid="dast-profile-delete-button"
:disabled="isPolicyProfile(item)"
:aria-disabled="isPolicyProfile(item)"
:aria-label="s__('DastProfiles|Delete profile')"
@click="prepareProfileDeletion(item.id)"
/>
</span>
......
<script>
import { GlBadge, GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
import { s__ } from '~/locale';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
export default {
i18n: {
removeLabel: s__('SecurityReports|Remove project from dashboard'),
},
components: {
GlBadge,
GlButton,
......@@ -52,7 +56,8 @@ export default {
v-gl-tooltip
icon="remove"
class="gl-ml-auto js-projects-list-project-remove"
:title="s__('SecurityReports|Remove project from dashboard')"
:title="$options.i18n.removeLabel"
:aria-label="$options.i18n.removeLabel"
@click="projectRemoved(project)"
/>
</li>
......
......@@ -127,6 +127,7 @@ export default {
data-testid="remove-alert"
icon="remove"
category="tertiary"
:aria-label="__('Remove')"
@click="$emit('update-alert', !policyAlert)"
/>
</div>
......
......@@ -241,6 +241,7 @@ export default {
icon="remove"
category="tertiary"
class="gl-absolute gl-top-3 gl-right-3"
:aria-label="__('Remove')"
data-testid="remove-rule"
@click="$emit('remove')"
/>
......
......@@ -184,6 +184,7 @@ export default {
<gl-button
v-gl-tooltip:tooltipcontainer.left
:title="$options.i18n.discoverFeedbackLabel"
:aria-label="$options.i18n.discoverFeedbackLabel"
icon="slight-smile"
size="medium"
class="discover-feedback-icon"
......
......@@ -90,6 +90,7 @@ export default {
category="tertiary"
:icon="button.iconName"
:title="button.title"
:aria-label="button.title"
@click="button.onClick"
/>
</div>
......
---
title: Add aria labels to icon-only buttons
merge_request: 58460
author:
type: fixed
......@@ -291,6 +291,7 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
data-testid="selected-profile-summary"
>
<a
aria-label="Edit profile"
class="btn gl-absolute gl-right-7 btn-default btn-md gl-button btn-icon"
href="/scanner_profile/edit/1"
title="Edit profile"
......
......@@ -291,6 +291,7 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
data-testid="selected-profile-summary"
>
<a
aria-label="Edit profile"
class="btn gl-absolute gl-right-7 btn-default btn-md gl-button btn-icon"
href="/site_profiles/edit/1"
title="Edit profile"
......
......@@ -81,6 +81,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
class="gl-flex-shrink-0 gl-align-self-start"
>
<button
aria-label="Foo Action"
class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
title="Foo Action"
type="button"
......@@ -100,6 +101,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
<!---->
</button>
<button
aria-label="Bar Action"
class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
title="Bar Action"
type="button"
......
......@@ -21675,6 +21675,12 @@ msgstr ""
msgid "OnCallSchedules|Try adding a rotation"
msgstr ""
msgid "OnCallSchedules|View next timeframe"
msgstr ""
msgid "OnCallSchedules|View previous timeframe"
msgstr ""
msgid "OnCallSchedules|Your schedule has been successfully created and all alerts from this project will now be routed to this schedule. Currently, only one schedule can be created per project. More coming soon! To add individual users to this schedule, use the add a rotation button."
msgstr ""
......
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