Add aria-labels to icon-only buttons

Add accessible names for screen readers

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
 import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
+import { __ } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -10,6 +11,9 @@ import { findNoteId, extractDesignNoteId } from '../../utils/design_management_u
 import DesignReplyForm from './design_reply_form.vue';
 
 export default {
+  i18n: {
+    editCommentLabel: __('Edit comment'),
+  },
   components: {
     UserAvatarLink,
     TimelineEntryItem,
@@ -113,7 +117,8 @@ export default {
           v-if="isEditButtonVisible"
           v-gl-tooltip
           type="button"
-          :title="__('Edit comment')"
+          :title="$options.i18n.editCommentLabel"
+          :aria-label="$options.i18n.editCommentLabel"
           class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
           @click="isEditing = true"
         >

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

@@ -68,6 +68,7 @@ export default {
             }"
             type="button"
             class="js-diff-notes-toggle"
+            :aria-label="__('Show comments')"
             @click="toggleDiscussion({ discussionId: discussion.id })"
           >
             <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />

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

@@ -122,6 +122,7 @@ export default {
       :disabled="!shouldToggleDiscussion"
       class="js-image-badge"
       type="button"
+      :aria-label="__('Show comments')"
       @click="clickedToggle(discussion)"
     >
       <gl-icon v-if="showCommentIcon" name="image-comment-dark" :size="24" />

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

@@ -141,6 +141,7 @@ export default {
           type="button"
           class="add-diff-note note-button js-add-diff-note-button"
           :disabled="line.commentsDisabled"
+          :aria-label="addCommentTooltip"
           @click="handleCommentButton"
         >
           <gl-icon :size="12" name="comment" />

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

@@ -185,6 +185,7 @@ export default {
             type="button"
             class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
             :disabled="line.left.commentsDisabled"
+            :aria-label="addCommentTooltipLeft"
             @click="handleCommentButton(line.left)"
           >
             <gl-icon :size="12" name="comment" />
@@ -241,6 +242,7 @@ export default {
             type="button"
             class="add-diff-note note-button js-add-diff-note-button qa-diff-comment"
             :disabled="line.right.commentsDisabled"
+            :aria-label="addCommentTooltipRight"
             @click="handleCommentButton(line.right)"
           >
             <gl-icon :size="12" name="comment" />

app/assets/javascripts/emoji/components/picker.vue

@@ -105,6 +105,7 @@ export default {
           }"
           type="button"
           class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-fill-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"
+          :aria-label="category.name"
           @click="scrollToCategory(category.name)"
         >
           <gl-icon :name="category.icon" :size="12" />

app/assets/javascripts/error_tracking/components/error_tracking_actions.vue

@@ -51,6 +51,7 @@ export default {
         v-gl-tooltip.hover
         class="gl-display-block gl-mb-4 mb-md-0 gl-w-full"
         :title="ignoreBtn.title"
+        :aria-label="ignoreBtn.title"
         @click="$emit('update-issue-status', { errorId: error.id, status: ignoreBtn.status })"
       >
         <gl-icon class="gl-display-none d-md-inline gl-m-0" :name="ignoreBtn.icon" :size="12" />
@@ -62,6 +63,7 @@ export default {
         v-gl-tooltip.hover
         class="gl-display-block gl-mb-4 mb-md-0 gl-w-full"
         :title="resolveBtn.title"
+        :aria-label="resolveBtn.title"
         @click="$emit('update-issue-status', { errorId: error.id, status: resolveBtn.status })"
       >
         <gl-icon class="gl-display-none d-md-inline gl-m-0" :name="resolveBtn.icon" :size="12" />

app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue

@@ -55,6 +55,7 @@ export default {
       :disabled="disabled"
       class="btn-scroll btn-transparent btn-blank"
       type="button"
+      :aria-label="tooltipTitle"
       @click="clickedScroll"
     >
       <gl-icon :name="iconName" />

app/assets/javascripts/search/topbar/components/searchable_dropdown.vue

@@ -9,10 +9,13 @@ import {
   GlSkeletonLoader,
   GlTooltipDirective,
 } from '@gitlab/ui';
-
+import { __ } from '~/locale';
 import { ANY_OPTION } from '../constants';
 
 export default {
+  i18n: {
+    clearLabel: __('Clear'),
+  },
   name: 'SearchableDropdown',
   components: {
     GlDropdown,
@@ -96,7 +99,8 @@ export default {
         v-gl-tooltip
         name="clear"
         category="tertiary"
-        :title="__('Clear')"
+        :title="$options.i18n.clearLabel"
+        :aria-label="$options.i18n.clearLabel"
         class="gl-p-0! gl-mr-2"
         @keydown.enter.stop="resetDropdown"
         @click.stop="resetDropdown"

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue

@@ -68,6 +68,7 @@ export default {
       category="primary"
       size="small"
       :title="buttonTitle"
+      :aria-label="buttonTitle"
       :loading="isLoading"
       :disabled="isActionInProgress"
       :class="`inline gl-ml-2 ${containerClasses}`"

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

@@ -25,7 +25,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-button ref="popoverTrigger" variant="link" icon="question" tabindex="0" />
+    <gl-button ref="popoverTrigger" variant="link" icon="question" :aria-label="__('Help')" />
     <gl-popover :target="() => $refs.popoverTrigger.$el" v-bind="options">
       <template v-if="options.title" #title>
         <span v-safe-html="options.title"></span>

app/assets/javascripts/vue_shared/components/rich_content_editor/toolbar_item.vue

@@ -21,7 +21,11 @@ export default {
 };
 </script>
 <template>
-  <button v-gl-tooltip="{ title: tooltip }" class="p-0 gl-display-flex toolbar-button">
+  <button
+    v-gl-tooltip="{ title: tooltip }"
+    :aria-label="tooltip"
+    class="p-0 gl-display-flex toolbar-button"
+  >
     <gl-icon class="gl-mx-auto gl-align-self-center" :name="icon" />
   </button>
 </template>

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

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

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

@@ -326,7 +326,12 @@ export default {
                     </span>
                   </gl-dropdown-item>
                 </gl-dropdown>
-                <gl-button v-gl-tooltip.hover :title="sortTooltipTitle" @click="toggleSortOrder">
+                <gl-button
+                  v-gl-tooltip.hover
+                  :title="sortTooltipTitle"
+                  :aria-label="sortTooltipTitle"
+                  @click="toggleSortOrder"
+                >
                   <gl-icon :name="sortIcon" />
                 </gl-button>
               </div>

ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue

 <script>
 import { GlButton, GlDropdown, GlDropdownItem, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
+import { __ } from '~/locale';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
 import { SORT_FIELDS, SORT_ORDER } from '../store/modules/list/constants';
 
 export default {
+  i18n: {
+    sortDirectionLabel: __('Sort direction'),
+  },
   name: 'DependenciesActions',
   components: {
     GlButton,
@@ -80,7 +84,8 @@ export default {
       </gl-dropdown>
       <gl-button
         v-gl-tooltip
-        :title="__('Sort direction')"
+        :title="$options.i18n.sortDirectionLabel"
+        :aria-label="$options.i18n.sortDirectionLabel"
         class="flex-grow-0 js-sort-order"
         @click="toggleSortOrder"
       >

ee/app/assets/javascripts/related_items_tree/components/tree_item.vue

@@ -87,6 +87,7 @@ export default {
         v-if="!childrenFetchInProgress && hasChildren"
         v-gl-tooltip.viewport.hover
         :title="chevronTooltip"
+        :aria-label="chevronTooltip"
         :class="chevronType"
         variant="link"
         class="btn-svg btn-tree-item-chevron align-self-start"

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -83,6 +83,7 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
     </gl-dropdown-stub>
      
     <gl-button-stub
+      aria-label="Sort direction"
       buttontextclasses=""
       category="primary"
       class="flex-grow-0 js-sort-order"

spec/frontend/vue_shared/components/help_popover_spec.js

@@ -34,7 +34,6 @@ describe('HelpPopover', () => {
       icon: 'question',
       variant: 'link',
     });
-    expect(findQuestionButton().attributes().tabindex).toBe('0');
   });
 
   it('renders popover that uses the question button as target', () => {