Add aria labels to icon-only buttons

Add aria labels to provide accessible names for screen readers

app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue

@@ -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

 <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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 <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

@@ -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

@@ -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

@@ -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

+---
+title: Add aria labels to icon-only buttons
+merge_request: 57610
+author:
+type: fixed

locale/gitlab.pot

@@ -33636,6 +33636,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

@@ -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"