Add aria labels to icon-only buttons

Add aria labels to icon-only buttons to provide
accessible names for screen readers

app/assets/javascripts/design_management/components/design_scaler.vue

@@ -51,8 +51,18 @@ export default {
 
 <template>
   <gl-button-group class="gl-z-index-1">
-    <gl-button icon="dash" :disabled="disableDecrease" @click="decrementScale" />
-    <gl-button icon="redo" :disabled="disableReset" @click="resetScale" />
-    <gl-button icon="plus" :disabled="disableIncrease" @click="incrementScale" />
+    <gl-button
+      icon="dash"
+      :disabled="disableDecrease"
+      :aria-label="__('Decrease')"
+      @click="decrementScale"
+    />
+    <gl-button icon="redo" :disabled="disableReset" :aria-label="__('Reset')" @click="resetScale" />
+    <gl-button
+      icon="plus"
+      :disabled="disableIncrease"
+      :aria-label="__('Increase')"
+      @click="incrementScale"
+    />
   </gl-button-group>
 </template>

app/assets/javascripts/feature_flags/components/user_lists_table.vue

@@ -7,7 +7,7 @@ import {
   GlTooltipDirective,
   GlModalDirective,
 } from '@gitlab/ui';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
@@ -24,11 +24,12 @@ export default {
     createdTimeagoLabel: s__('UserList|created %{timeago}'),
     deleteListTitle: s__('UserList|Delete %{name}?'),
     deleteListMessage: s__('User list %{name} will be removed. Are you sure?'),
+    editUserListLabel: s__('FeatureFlags|Edit User List'),
   },
   modal: {
     id: 'deleteListModal',
     actionPrimary: {
-      text: s__('Delete user list'),
+      text: __('Delete user list'),
       attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
     },
   },
@@ -93,6 +94,7 @@ export default {
           :href="list.path"
           category="secondary"
           icon="pencil"
+          :aria-label="$options.translations.editUserListLabel"
           data-testid="edit-user-list"
         />
         <gl-button

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

@@ -13,6 +13,12 @@ import { splitCamelCase } from '../../lib/utils/text_utility';
 import ReplyButton from './note_actions/reply_button.vue';
 
 export default {
+  i18n: {
+    addReactionLabel: __('Add reaction'),
+    editCommentLabel: __('Edit comment'),
+    deleteCommentLabel: __('Delete comment'),
+    moreActionsLabel: __('More actions'),
+  },
   name: 'NoteActions',
   components: {
     GlIcon,
@@ -301,9 +307,9 @@ export default {
         category="tertiary"
         variant="default"
         size="small"
-        title="Add reaction"
+        :title="$options.i18n.addReactionLabel"
+        :aria-label="$options.i18n.addReactionLabel"
         data-position="right"
-        :aria-label="__('Add reaction')"
       >
         <span class="reaction-control-icon reaction-control-icon-neutral">
           <gl-icon name="slight-smile" />
@@ -325,7 +331,8 @@ export default {
     <gl-button
       v-if="canEdit"
       v-gl-tooltip
-      title="Edit comment"
+      :title="$options.i18n.editCommentLabel"
+      :aria-label="$options.i18n.editCommentLabel"
       icon="pencil"
       size="small"
       category="tertiary"
@@ -336,7 +343,8 @@ export default {
     <gl-button
       v-if="showDeleteAction"
       v-gl-tooltip
-      title="Delete comment"
+      :title="$options.i18n.deleteCommentLabel"
+      :aria-label="$options.i18n.deleteCommentLabel"
       size="small"
       icon="remove"
       category="tertiary"
@@ -346,7 +354,8 @@ export default {
     <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions">
       <gl-button
         v-gl-tooltip
-        title="More actions"
+        :title="$options.i18n.moreActionsLabel"
+        :aria-label="$options.i18n.moreActionsLabel"
         icon="ellipsis_v"
         size="small"
         category="tertiary"

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -33,6 +33,7 @@ const i18n = {
   submitErrorTitle: s__('Pipeline|Pipeline cannot be run.'),
   warningTitle: __('The form contains the following warning:'),
   maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'),
+  removeVariableLabel: s__('CiVariables|Remove variable'),
 };
 
 export default {
@@ -416,15 +417,17 @@ export default {
               data-testid="remove-ci-variable-row"
               variant="danger"
               category="secondary"
+              :aria-label="$options.i18n.removeVariableLabel"
               @click="removeVariable(index)"
             >
               <gl-icon class="gl-mr-0! gl-display-none gl-md-display-block" name="clear" />
-              <span class="gl-md-display-none">{{ s__('CiVariables|Remove variable') }}</span>
+              <span class="gl-md-display-none">{{ $options.i18n.removeVariableLabel }}</span>
             </gl-button>
             <gl-button
               v-else
               class="gl-md-ml-3 gl-mb-3 gl-display-none gl-md-display-block gl-visibility-hidden"
               icon="clear"
+              :aria-label="$options.i18n.removeVariableLabel"
             />
           </template>
         </div>

app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

@@ -183,6 +183,7 @@ export default {
         class="gl-absolute gl-top-0 gl-bottom-0 gl-shadow-none! gl-rounded-0!"
         :class="`js-pipeline-expand-${pipeline.id} ${expandButtonPosition}`"
         :icon="expandedIcon"
+        :aria-label="__('Expand pipeline')"
         data-testid="expand-pipeline-button"
         data-qa-selector="expand_pipeline_button"
         @click="onClickLinkedPipeline"

app/assets/javascripts/pipelines/components/test_reports/test_summary.vue

@@ -72,6 +72,7 @@ export default {
           size="small"
           class="gl-mr-3 js-back-button"
           icon="angle-left"
+          :aria-label="__('Go back')"
           @click="onBackClick"
         />
 

app/assets/javascripts/user_lists/components/user_list.vue

@@ -126,6 +126,7 @@ export default {
             category="secondary"
             variant="danger"
             icon="remove"
+            :aria-label="__('Remove user')"
             data-testid="delete-user-id"
             @click="removeUserId(id)"
           />

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

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

locale/gitlab.pot

@@ -9995,6 +9995,9 @@ msgstr ""
 msgid "Decompressed archive size validation failed."
 msgstr ""
 
+msgid "Decrease"
+msgstr ""
+
 msgid "Default CI configuration path"
 msgstr ""
 
@@ -12618,6 +12621,9 @@ msgstr ""
 msgid "Expand panel"
 msgstr ""
 
+msgid "Expand pipeline"
+msgstr ""
+
 msgid "Expand sidebar"
 msgstr ""
 
@@ -16560,6 +16566,9 @@ msgstr ""
 msgid "Incomplete"
 msgstr ""
 
+msgid "Increase"
+msgstr ""
+
 msgid "Indent"
 msgstr ""