Add aria labels to icon buttons

This commit adds aria labels to icon buttons to
give them accessible names

app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue

@@ -21,6 +21,8 @@ import {
 import getCurrentIntegrationQuery from '../graphql/queries/get_current_integration.query.graphql';
 
 export const i18n = {
+  deleteIntegration: s__('AlertSettings|Delete integration'),
+  editIntegration: s__('AlertSettings|Edit integration'),
   title: s__('AlertsIntegrations|Current integrations'),
   emptyState: s__('AlertsIntegrations|No integrations have been added yet'),
   status: {
@@ -174,11 +176,16 @@ export default {
 
       <template #cell(actions)="{ item }">
         <gl-button-group class="gl-ml-3">
-          <gl-button icon="settings" @click="editIntegration(item)" />
+          <gl-button
+            icon="settings"
+            :aria-label="$options.i18n.editIntegration"
+            @click="editIntegration(item)"
+          />
           <gl-button
             v-gl-modal.deleteIntegration
             :disabled="item.type === $options.typeSet.prometheus"
             icon="remove"
+            :aria-label="$options.i18n.deleteIntegration"
             @click="setIntegrationToDelete(item)"
           />
         </gl-button-group>
@@ -198,8 +205,8 @@ export default {
     </gl-table>
     <gl-modal
       modal-id="deleteIntegration"
-      :title="s__('AlertSettings|Delete integration')"
-      :ok-title="s__('AlertSettings|Delete integration')"
+      :title="$options.i18n.deleteIntegration"
+      :ok-title="$options.i18n.deleteIntegration"
       ok-variant="danger"
       @ok="deleteIntegration"
     >

app/assets/javascripts/badges/components/badge.vue

 <script>
 import { GlLoadingIcon, GlTooltipDirective, GlIcon, GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    buttonLabel: s__('Badges|Reload badge image'),
+  },
   // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'Badge',
@@ -94,7 +98,8 @@ export default {
     <gl-button
       v-show="hasError"
       v-gl-tooltip.hover
-      :title="s__('Badges|Reload badge image')"
+      :title="$options.i18n.buttonLabel"
+      :aria-label="$options.i18n.buttonLabel"
       category="tertiary"
       variant="confirm"
       type="button"

app/assets/javascripts/boards/components/toggle_focus.vue

@@ -47,6 +47,7 @@ export default {
       class="js-focus-mode-btn"
       data-qa-selector="focus_mode_button"
       :title="$options.i18n.toggleFocusMode"
+      :aria-label="$options.i18n.toggleFocusMode"
       @click="toggleFocusMode"
     />
   </div>

app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue

@@ -7,6 +7,10 @@ import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 export default {
+  i18n: {
+    editButton: s__('Pipelines|Edit'),
+    revokeButton: s__('Pipelines|Revoke'),
+  },
   components: {
     GlTable,
     GlButton,
@@ -108,13 +112,15 @@ export default {
       </template>
       <template #cell(actions)="{ item }">
         <gl-button
-          :title="s__('Pipelines|Edit')"
+          :title="$options.i18n.editButton"
+          :aria-label="$options.i18n.editButton"
           icon="pencil"
           data-testid="edit-btn"
           :href="item.editProjectTriggerPath"
         />
         <gl-button
-          :title="s__('Pipelines|Revoke')"
+          :title="$options.i18n.revokeButton"
+          :aria-label="$options.i18n.revokeButton"
           icon="remove"
           variant="warning"
           :data-confirm="

app/assets/javascripts/design_management/components/toolbar/design_navigation.vue

@@ -12,6 +12,10 @@ import allDesignsMixin from '../../mixins/all_designs';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
+  i18n: {
+    nextButton: s__('DesignManagement|Go to next design'),
+    previousButton: s__('DesignManagement|Go to previous design'),
+  },
   components: {
     GlButton,
     GlButtonGroup,
@@ -81,7 +85,8 @@ export default {
       <gl-button
         v-gl-tooltip.bottom
         :disabled="!previousDesign"
-        :title="s__('DesignManagement|Go to previous design')"
+        :title="$options.i18n.previousButton"
+        :aria-label="$options.i18n.previousButton"
         icon="angle-left"
         class="js-previous-design"
         @click="navigateToDesign(previousDesign)"
@@ -89,7 +94,8 @@ export default {
       <gl-button
         v-gl-tooltip.bottom
         :disabled="!nextDesign"
-        :title="s__('DesignManagement|Go to next design')"
+        :title="$options.i18n.nextButton"
+        :aria-label="$options.i18n.nextButton"
         icon="angle-right"
         class="js-next-design"
         @click="navigateToDesign(nextDesign)"

app/assets/javascripts/diffs/components/compare_versions.vue

@@ -84,6 +84,7 @@ export default {
         icon="file-tree"
         class="gl-mr-3 js-toggle-tree-list"
         :title="toggleFileBrowserTitle"
+        :aria-label="toggleFileBrowserTitle"
         :selected="showTreeList"
         @click="setShowTreeList({ showTreeList: !showTreeList })"
       />

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -71,6 +71,7 @@ export default {
     class="gl-display-none gl-md-display-block text-secondary"
     :loading="isLoading"
     :title="title"
+    :aria-label="title"
     :icon="isLastDeployment ? 'repeat' : 'redo'"
     @click="onClick"
   />

app/assets/javascripts/issuable/components/issuable_by_email.vue

@@ -14,6 +14,9 @@ import { sprintf, __ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 export default {
+  i18n: {
+    sendEmail: __('Send email'),
+  },
   name: 'IssuableByEmail',
   components: {
     GlButton,
@@ -116,7 +119,8 @@ export default {
           <gl-button
             v-gl-tooltip.hover
             :href="mailToLink"
-            :title="__('Send email')"
+            :title="$options.i18n.sendEmail"
+            :aria-label="$options.i18n.sendEmail"
             icon="mail"
             data-testid="mail-to-btn"
           />

app/assets/javascripts/issuable_show/components/issuable_title.vue

@@ -6,8 +6,12 @@ import {
   GlTooltipDirective,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
+  i18n: {
+    editTitleAndDescription: __('Edit title and description'),
+  },
   components: {
     GlIcon,
     GlButton,
@@ -58,7 +62,8 @@ export default {
       <gl-button
         v-if="enableEdit"
         v-gl-tooltip.bottom
-        :title="__('Edit title and description')"
+        :title="$options.i18n.editTitleAndDescription"
+        :aria-label="$options.i18n.editTitleAndDescription"
         icon="pencil"
         class="btn-edit js-issuable-edit qa-edit-button"
         @click="$emit('edit-issuable', $event)"

app/assets/javascripts/issue_show/components/title.vue

 <script>
 import { GlButton, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { __ } from '~/locale';
 import eventHub from '../event_hub';
 import animateMixin from '../mixins/animate';
 
 export default {
+  i18n: {
+    editTitleAndDescription: __('Edit title and description'),
+  },
   components: {
     GlButton,
   },
@@ -78,7 +82,8 @@ export default {
       v-gl-tooltip.bottom
       icon="pencil"
       class="btn-edit js-issuable-edit qa-edit-button"
-      title="Edit title and description"
+      :title="$options.i18n.editTitleAndDescription"
+      :aria-label="$options.i18n.editTitleAndDescription"
       @click="edit"
     />
   </div>

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -14,6 +14,7 @@ import { debounce } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import invalidUrl from '~/lib/utils/invalid_url';
 import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 
 import { timeRanges } from '~/vue_shared/constants';
@@ -24,6 +25,9 @@ import DashboardsDropdown from './dashboards_dropdown.vue';
 import RefreshButton from './refresh_button.vue';
 
 export default {
+  i18n: {
+    metricsSettings: s__('Metrics|Metrics Settings'),
+  },
   components: {
     GlIcon,
     GlButton,
@@ -282,7 +286,8 @@ export default {
             data-testid="metrics-settings-button"
             icon="settings"
             :href="operationsSettingsPath"
-            :title="s__('Metrics|Metrics Settings')"
+            :title="$options.i18n.metricsSettings"
+            :aria-label="$options.i18n.metricsSettings"
           />
         </div>
       </template>

app/assets/javascripts/monitoring/components/refresh_button.vue

@@ -9,7 +9,7 @@ import {
 } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
 import { mapActions } from 'vuex';
-import { n__, __ } from '~/locale';
+import { n__, __, s__ } from '~/locale';
 
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -45,6 +45,9 @@ const makeInterval = (length = 0, unit = 's') => {
 };
 
 export default {
+  i18n: {
+    refreshDashboard: s__('Metrics|Refresh dashboard'),
+  },
   components: {
     GlButtonGroup,
     GlButton,
@@ -148,7 +151,8 @@ export default {
       v-gl-tooltip
       class="gl-flex-grow-1"
       variant="default"
-      :title="s__('Metrics|Refresh dashboard')"
+      :title="$options.i18n.refreshDashboard"
+      :aria-label="$options.i18n.refreshDashboard"
       icon="retry"
       @click="refresh"
     />

app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue

 <script>
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    buttonLabel: s__('MergeRequests|Resolve this thread in a new issue'),
+  },
   name: 'ResolveWithIssueButton',
   components: {
     GlButton,
@@ -23,7 +27,8 @@ export default {
     <gl-button
       v-gl-tooltip
       :href="url"
-      :title="s__('MergeRequests|Resolve this thread in a new issue')"
+      :title="$options.i18n.buttonLabel"
+      :aria-label="$options.i18n.buttonLabel"
       class="new-issue-for-discussion discussion-create-issue-btn"
       icon="issue-new"
     />

app/assets/javascripts/releases/components/release_block_header.vue

 <script>
 import { GlTooltipDirective, GlLink, GlBadge, GlButton, GlIcon } from '@gitlab/ui';
 import { setUrlParams } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
 import { BACK_URL_PARAM } from '~/releases/constants';
 
 export default {
+  i18n: {
+    editButton: __('Edit this release'),
+  },
   name: 'ReleaseBlockHeader',
   components: {
     GlLink,
@@ -69,7 +73,8 @@ export default {
       variant="default"
       icon="pencil"
       class="gl-mr-3 js-edit-button ml-2 pb-2"
-      :title="__('Edit this release')"
+      :title="$options.i18n.editButton"
+      :aria-label="$options.i18n.editButton"
       :href="editLink"
     />
   </div>

app/assets/javascripts/search/sort/components/app.vue

@@ -96,6 +96,7 @@ export default {
       v-gl-tooltip
       :disabled="!selectedSortOption.sortable"
       :title="sortDirectionData.tooltip"
+      :aria-label="sortDirectionData.tooltip"
       :icon="sortDirectionData.icon"
       @click="handleSortDirectionChange"
     />

app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue

 <script>
 import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { __, sprintf, s__ } from '~/locale';
 import ReviewerAvatarLink from './reviewer_avatar_link.vue';
 
 const LOADING_STATE = 'loading';
 const SUCCESS_STATE = 'success';
 
 export default {
+  i18n: {
+    reRequestReview: __('Re-request review'),
+  },
   components: {
     GlButton,
     GlIcon,
@@ -109,7 +112,8 @@ export default {
       <gl-button
         v-else-if="user.can_update_merge_request && user.reviewed"
         v-gl-tooltip.left
-        :title="__('Re-request review')"
+        :title="$options.i18n.reRequestReview"
+        :aria-label="$options.i18n.reRequestReview"
         :loading="loadingStates[user.id] === $options.LOADING_STATE"
         class="float-right gl-text-gray-500!"
         size="small"

app/assets/javascripts/snippets/components/embed_dropdown.vue

@@ -65,6 +65,7 @@ export default {
             <gl-button
               v-gl-tooltip.hover
               :title="$options.MSG_COPY"
+              :aria-label="$options.MSG_COPY"
               :data-clipboard-text="value"
               icon="copy-to-clipboard"
               data-qa-selector="copy_button"

app/assets/javascripts/vue_shared/components/clone_dropdown.vue

@@ -56,6 +56,7 @@ export default {
               <gl-button
                 v-gl-tooltip.hover
                 :title="$options.copyURLTooltip"
+                :aria-label="$options.copyURLTooltip"
                 :data-clipboard-text="sshLink"
                 data-qa-selector="copy_ssh_url_button"
                 icon="copy-to-clipboard"
@@ -75,6 +76,7 @@ export default {
               <gl-button
                 v-gl-tooltip.hover
                 :title="$options.copyURLTooltip"
+                :aria-label="$options.copyURLTooltip"
                 :data-clipboard-text="httpLink"
                 data-qa-selector="copy_http_url_button"
                 icon="copy-to-clipboard"

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -363,6 +363,7 @@ export default {
       <gl-button
         v-gl-tooltip
         :title="sortDirectionTooltip"
+        :aria-label="sortDirectionTooltip"
         :icon="sortDirectionIcon"
         class="flex-shrink-1"
         @click="handleSortDirectionClick"

app/assets/javascripts/vue_shared/components/modal_copy_button.vue

@@ -101,6 +101,7 @@ export default {
     :data-clipboard-target="target"
     :data-clipboard-text="text"
     :title="title"
+    :aria-label="title"
     :category="category"
     icon="copy-to-clipboard"
   />

changelogs/unreleased/cngo-add-aria-labels-to-icon-buttons.yml

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

locale/gitlab.pot

@@ -2902,6 +2902,9 @@ msgstr ""
 msgid "AlertSettings|Delete integration"
 msgstr ""
 
+msgid "AlertSettings|Edit integration"
+msgstr ""
+
 msgid "AlertSettings|Edit payload"
 msgstr ""
 

spec/frontend/design_management/components/toolbar/__snapshots__/design_navigation_spec.js.snap

@@ -13,6 +13,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
     class="gl-mx-5"
   >
     <gl-button-stub
+      aria-label="Go to previous design"
       buttontextclasses=""
       category="primary"
       class="js-previous-design"
@@ -24,6 +25,7 @@ exports[`Design management pagination component renders navigation buttons 1`] =
     />
      
     <gl-button-stub
+      aria-label="Go to next design"
       buttontextclasses=""
       category="primary"
       class="js-next-design"

spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap

@@ -40,6 +40,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             tag="div"
           >
             <gl-button-stub
+              aria-label="Copy URL"
               buttontextclasses=""
               category="primary"
               class="d-inline-flex"
@@ -82,6 +83,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             tag="div"
           >
             <gl-button-stub
+              aria-label="Copy URL"
               buttontextclasses=""
               category="primary"
               class="d-inline-flex"