Skip to content

G
gitlab-ce
Commit 69f1919c authored by Simon Knox's avatar Simon Knox
Browse files
Options

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

Add aria labels to icon-only buttons

See merge request gitlab-org/gitlab!57610
parents dc57225e 4cb29e4a
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 18 deletions
app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
View file @ 69f1919c
......@@ -68,6 +68,7 @@ export default {
v-gl-modal.deploy-freeze-modal
icon="pencil"
data-testid="edit-deploy-freeze"
:aria-label="__('Edit deploy freeze')"
@click="setFreezePeriod(item)"
/>
</template>
......
app/assets/javascripts/design_management/components/toolbar/index.vue
View file @ 69f1919c
<script>
import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
import { __, sprintf } from '~/locale';
import { __, s__, sprintf } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { DESIGNS_ROUTE_NAME } from '../../router/constants';
import DeleteButton from '../delete_button.vue';
import DesignNavigation from './design_navigation.vue';
export default {
i18n: {
downloadButtonLabel: s__('DesignManagement|Download design'),
},
components: {
GlButton,
GlIcon,
......@@ -119,7 +122,8 @@ export default {
v-gl-tooltip.bottom
:href="image"
icon="download"
:title="s__('DesignManagement|Download design')"
:title="$options.i18n.downloadButtonLabel"
:aria-label="$options.i18n.downloadButtonLabel"
/>
<delete-button
v-if="isLatestVersion && canDeleteDesign"
......
app/assets/javascripts/diffs/components/diff_file_header.vue
View file @ 69f1919c
......@@ -49,6 +49,7 @@ export default {
mixins: [glFeatureFlagsMixin()],
i18n: {
...DIFF_FILE_HEADER,
compareButtonLabel: s__('Compare submodule commit revisions'),
},
props: {
discussionPath: {
......@@ -192,6 +193,9 @@ export default {
isReviewable() {
return reviewable(this.diffFile);
},
externalUrlLabel() {
return sprintf(__('View on %{url}'), { url: this.diffFile.formatted_external_url });
},
},
methods: {
...mapActions('diffs', [
......@@ -352,7 +356,8 @@ export default {
ref="externalLink"
v-gl-tooltip.hover
:href="diffFile.external_url"
:title="`View on ${diffFile.formatted_external_url}`"
:title="externalUrlLabel"
:aria-label="externalUrlLabel"
target="_blank"
data-track-event="click_toggle_external_button"
data-track-label="diff_toggle_external_button"
......@@ -444,7 +449,8 @@ export default {
v-gl-tooltip.hover
v-safe-html="submoduleDiffCompareLinkText"
class="submodule-compare"
:title="s__('Compare submodule commit revisions')"
:title="$options.i18n.compareButtonLabel"
:aria-label="$options.i18n.compareButtonLabel"
:href="diffFile.submodule_compare.url"
/>
</div>
......
app/assets/javascripts/feature_flags/components/feature_flags_table.vue
View file @ 69f1919c
......@@ -7,6 +7,8 @@ import { labelForStrategy } from '../utils';
export default {
i18n: {
deleteLabel: __('Delete'),
editLabel: __('Edit'),
toggleLabel: __('Feature flag status'),
},
components: {
......@@ -215,19 +217,21 @@ export default {
<div class="table-action-buttons btn-group">
<template v-if="featureFlag.edit_path">
<gl-button
v-gl-tooltip.hover.bottom="__('Edit')"
v-gl-tooltip.hover.bottom="$options.i18n.editLabel"
class="js-feature-flag-edit-button"
icon="pencil"
:aria-label="$options.i18n.editLabel"
:href="featureFlag.edit_path"
/>
</template>
<template v-if="featureFlag.destroy_path">
<gl-button
v-gl-tooltip.hover.bottom="__('Delete')"
v-gl-tooltip.hover.bottom="$options.i18n.deleteLabel"
class="js-feature-flag-delete-button"
variant="danger"
icon="remove"
:disabled="!canDeleteFlag(featureFlag)"
:aria-label="$options.i18n.deleteLabel"
@click="setDeleteModalData(featureFlag)"
/>
</template>
......
app/assets/javascripts/feature_flags/components/form.vue
View file @ 69f1919c
......@@ -30,6 +30,7 @@ import Strategy from './strategy.vue';
export default {
i18n: {
removeLabel: s__('FeatureFlags|Remove'),
statusLabel: s__('FeatureFlags|Status'),
},
components: {
......@@ -507,7 +508,8 @@ export default {
<gl-button
v-if="!isAllEnvironment(scope.environmentScope) && canUpdateScope(scope)"
v-gl-tooltip
:title="s__('FeatureFlags|Remove')"
:title="$options.i18n.removeLabel"
:aria-label="$options.i18n.removeLabel"
class="js-delete-scope btn-transparent pr-3 pl-3"
icon="clear"
data-testid="feature-flag-delete"
......
app/assets/javascripts/feature_flags/components/strategy.vue
View file @ 69f1919c
......@@ -165,6 +165,7 @@ export default {
data-testid="delete-strategy-button"
variant="danger"
icon="remove"
:aria-label="__('Delete')"
@click="$emit('delete')"
/>
</div>
......
app/assets/javascripts/feature_flags/components/user_lists_table.vue
View file @ 69f1919c
......@@ -100,6 +100,7 @@ export default {
category="secondary"
variant="danger"
icon="remove"
:aria-label="$options.modal.actionPrimary.text"
data-testid="delete-user-list"
@click="confirmDeleteList(list)"
/>
......
app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
View file @ 69f1919c
......@@ -13,6 +13,10 @@ import CsvExportModal from './csv_export_modal.vue';
import CsvImportModal from './csv_import_modal.vue';
export default {
i18n: {
exportAsCsvButtonText: __('Export as CSV'),
importIssuesText: __('Import issues'),
},
name: 'CsvImportExportButtons',
components: {
GlButtonGroup,
......@@ -57,16 +61,15 @@ export default {
return `${this.issuableType}-import-modal`;
},
importButtonText() {
return this.showLabel ? this.$options.importIssuesText : null;
return this.showLabel ? this.$options.i18n.importIssuesText : null;
},
importButtonTooltipText() {
return this.showLabel ? null : this.$options.importIssuesText;
return this.showLabel ? null : this.$options.i18n.importIssuesText;
},
importButtonIcon() {
return this.showLabel ? null : 'import';
},
},
importIssuesText: __('Import issues'),
};
</script>
......@@ -75,9 +78,10 @@ export default {
<gl-button-group>
<gl-button
v-if="showExportButton"
v-gl-tooltip.hover="__('Export as CSV')"
v-gl-tooltip.hover="$options.i18n.exportAsCsvButtonText"
v-gl-modal="exportModalId"
icon="export"
:aria-label="$options.i18n.exportAsCsvButtonText"
data-qa-selector="export_as_csv_button"
data-testid="export-csv-button"
/>
......
app/assets/javascripts/jobs/components/job_log_controllers.vue
View file @ 69f1919c
<script>
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import { __, sprintf } from '~/locale';
import { __, s__, sprintf } from '~/locale';
export default {
i18n: {
eraseLogButtonLabel: s__('Job|Erase job log'),
scrollToBottomButtonLabel: s__('Job|Scroll to bottom'),
scrollToTopButtonLabel: s__('Job|Scroll to top'),
showRawButtonLabel: s__('Job|Show complete raw'),
},
components: {
GlLink,
GlButton,
......@@ -82,7 +88,8 @@ export default {
<gl-button
v-if="rawPath"
v-gl-tooltip.body
:title="s__('Job|Show complete raw')"
:title="$options.i18n.showRawButtonLabel"
:aria-label="$options.i18n.showRawButtonLabel"
:href="rawPath"
data-testid="job-raw-link-controller"
icon="doc-text"
......@@ -91,7 +98,8 @@ export default {
<gl-button
v-if="erasePath"
v-gl-tooltip.body
:title="s__('Job|Erase job log')"
:title="$options.i18n.eraseLogButtonLabel"
:aria-label="$options.i18n.eraseLogButtonLabel"
:href="erasePath"
:data-confirm="__('Are you sure you want to erase this build?')"
class="gl-ml-3"
......@@ -102,23 +110,25 @@ export default {
<!-- eo links -->
<!-- scroll buttons -->
<div v-gl-tooltip :title="s__('Job|Scroll to top')" class="gl-ml-3">
<div v-gl-tooltip :title="$options.i18n.scrollToTopButtonLabel" class="gl-ml-3">
<gl-button
:disabled="isScrollTopDisabled"
class="btn-scroll"
data-testid="job-controller-scroll-top"
icon="scroll_up"
:aria-label="$options.i18n.scrollToTopButtonLabel"
@click="handleScrollToTop"
/>
</div>
<div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="gl-ml-3">
<div v-gl-tooltip :title="$options.i18n.scrollToBottomButtonLabel" class="gl-ml-3">
<gl-button
:disabled="isScrollBottomDisabled"
class="js-scroll-bottom btn-scroll"
data-testid="job-controller-scroll-bottom"
icon="scroll_down"
:class="{ animate: isScrollingDown }"
:aria-label="$options.i18n.scrollToBottomButtonLabel"
@click="handleScrollToBottom"
/>
</div>
......
app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
View file @ 69f1919c
......@@ -10,6 +10,7 @@ import {
GlTooltipDirective,
} from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import { timeRanges } from '~/vue_shared/constants';
import DashboardPanel from './dashboard_panel.vue';
......@@ -24,6 +25,9 @@ metrics:
`;
export default {
i18n: {
refreshButtonLabel: s__('Metrics|Refresh Prometheus data'),
},
components: {
GlCard,
GlForm,
......@@ -191,7 +195,8 @@ export default {
v-gl-tooltip
data-testid="previewRefreshButton"
icon="retry"
:title="s__('Metrics|Refresh Prometheus data')"
:title="$options.i18n.refreshButtonLabel"
:aria-label="$options.i18n.refreshButtonLabel"
@click="onRefresh"
/>
<dashboard-panel :graph-data="panelPreviewGraphData" />
......
app/assets/javascripts/vue_shared/components/notes/system_note.vue
View file @ 69f1919c
......@@ -28,6 +28,7 @@ import {
import $ from 'jquery';
import { mapGetters, mapActions, mapState } from 'vuex';
import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
import { __ } from '~/locale';
import initMRPopovers from '~/mr_popover/';
import noteHeader from '~/notes/components/note_header.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
......@@ -37,6 +38,9 @@ import TimelineEntryItem from './timeline_entry_item.vue';
const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
export default {
i18n: {
deleteButtonLabel: __('Remove description history'),
},
name: 'SystemNote',
components: {
GlIcon,
......@@ -139,7 +143,8 @@ export default {
<gl-button
v-if="displayDeleteButton"
v-gl-tooltip
:title="__('Remove description history')"
:title="$options.i18n.deleteButtonLabel"
:aria-label="$options.i18n.deleteButtonLabel"
variant="default"
category="tertiary"
icon="remove"
......
app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue
View file @ 69f1919c
......@@ -164,6 +164,7 @@ export default {
variant="link"
icon="close"
class="gl-mr-2 gl-w-auto! gl-p-2!"
:aria-label="__('Close')"
@click.prevent="handleDropdownCloseClick"
/>
</div>
......
changelogs/unreleased/cngo-add-aria-labels-to-icon-only-buttons.yml 0 → 100644
View file @ 69f1919c
---
title: Add aria labels to icon-only buttons
merge_request: 57610
author:
type: fixed
locale/gitlab.pot
View file @ 69f1919c
......@@ -33715,6 +33715,9 @@ msgstr ""
msgid "View merge request"
msgstr ""
msgid "View on %{url}"
msgstr ""
msgid "View open merge request"
msgstr ""
......
spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap
View file @ 69f1919c
......@@ -41,6 +41,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
/>
<gl-button-stub
aria-label="Download design"
buttontextclasses=""
category="primary"
href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7