Add aria labels to icon-only buttons

This commit adds aria labels to icon-only buttons
to provide accessible names for screen readers.

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue

@@ -4,6 +4,10 @@ import { __ } from '~/locale';
 import { STAGE_SORT_DIRECTION } from './constants';
 
 export default {
+  i18n: {
+    moveDownLabel: __('Move down'),
+    moveUpLabel: __('Move up'),
+  },
   name: 'StageFieldActions',
   components: {
     GlButton,
@@ -61,7 +65,8 @@ export default {
         :data-testid="`stage-action-move-down-${index}`"
         :disabled="isLastActiveStage"
         icon="arrow-down"
-        :title="__('Move down')"
+        :title="$options.i18n.moveDownLabel"
+        :aria-label="$options.i18n.moveDownLabel"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.DOWN })"
       />
       <gl-button
@@ -69,13 +74,15 @@ export default {
         :data-testid="`stage-action-move-up-${index}`"
         :disabled="isFirstActiveStage"
         icon="arrow-up"
-        :title="__('Move up')"
+        :title="$options.i18n.moveUpLabel"
+        :aria-label="$options.i18n.moveUpLabel"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.UP })"
       />
     </gl-button-group>
     <gl-button
       v-gl-tooltip
       :title="hideActionTooltip"
+      :aria-label="hideActionTooltip"
       :data-testid="hideActionTestId"
       :icon="hideActionIcon"
       @click="$emit(hideActionEvent, index)"

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue

@@ -232,6 +232,7 @@ export default {
             v-gl-tooltip.hover="$options.i18n.removeButton"
             category="tertiary"
             icon="remove"
+            :aria-label="$options.i18n.removeButton"
             @click="setSelectedSegment(item)"
           />
         </div>

ee/app/assets/javascripts/geo_nodes_beta/components/header/geo_node_header.vue

@@ -32,6 +32,9 @@ export default {
     chevronIcon() {
       return this.collapsed ? 'chevron-right' : 'chevron-down';
     },
+    chevronLabel() {
+      return this.collapsed ? __('Expand') : __('Collapse');
+    },
     statusCheckTimestamp() {
       return this.node.lastSuccessfulStatusCheckTimestamp * 1000;
     },
@@ -49,6 +52,7 @@ export default {
         category="tertiary"
         variant="confirm"
         :icon="chevronIcon"
+        :aria-label="chevronLabel"
         @click="$emit('collapse')"
       />
       <div

ee/app/assets/javascripts/integrations/edit/components/jira_issue_creation_vulnerabilities.vue

@@ -182,6 +182,7 @@ export default {
           <gl-button
             v-gl-tooltip.hover
             :title="$options.i18n.fetchIssueTypesButtonLabel"
+            :aria-label="$options.i18n.fetchIssueTypesButtonLabel"
             :disabled="!projectKey"
             icon="retry"
             data-testid="fetch-issue-types"

ee/app/assets/javascripts/issue_show/components/incidents/metrics_image.vue

@@ -133,6 +133,7 @@ export default {
             v-if="canUpdate"
             class="gl-ml-auto"
             icon="remove"
+            :aria-label="__('Delete')"
             data-testid="delete-button"
             @click="modalVisible = true"
           />

ee/app/assets/javascripts/on_demand_scans/components/profile_selector/profile_selector.vue

@@ -9,8 +9,12 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { s__ } from '~/locale';
 
 export default {
+  i18n: {
+    editProfileLabel: s__('DastProfiles|Edit profile'),
+  },
   name: 'OnDemandScansProfileSelector',
   components: {
     GlButton,
@@ -125,7 +129,8 @@ export default {
           v-gl-tooltip
           category="primary"
           icon="pencil"
-          :title="s__('DastProfiles|Edit profile')"
+          :title="$options.i18n.editProfileLabel"
+          :aria-label="$options.i18n.editProfileLabel"
           :href="selectedProfile.editPath"
           class="gl-absolute gl-right-7"
         />

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -25,6 +25,8 @@ export const i18n = {
   deleteScheduleLabel: s__('OnCallSchedules|Delete schedule'),
   rotationTitle: s__('OnCallSchedules|Rotations'),
   addARotation: s__('OnCallSchedules|Add a rotation'),
+  viewPreviousTimeframe: s__('OnCallSchedules|View previous timeframe'),
+  viewNextTimeframe: s__('OnCallSchedules|View next timeframe'),
   presetTypeLabels: {
     DAYS: s__('OnCallSchedules|1 day'),
     WEEKS: s__('OnCallSchedules|2 weeks'),
@@ -211,12 +213,14 @@ export default {
               data-testid="previous-timeframe-btn"
               icon="chevron-left"
               :disabled="loading"
+              :aria-label="$options.i18n.viewPreviousTimeframe"
               @click="updateToViewPreviousTimeframe"
             />
             <gl-button
               data-testid="next-timeframe-btn"
               icon="chevron-right"
               :disabled="loading"
+              :aria-label="$options.i18n.viewNextTimeframe"
               @click="updateToViewNextTimeframe"
             />
           </gl-button-group>

ee/app/assets/javascripts/requirements/components/requirement_item.vue

 <script>
 import { GlPopover, GlLink, GlAvatar, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 import { FilterState } from '../constants';
@@ -7,6 +8,10 @@ import RequirementMeta from '../mixins/requirement_meta';
 import RequirementStatusBadge from './requirement_status_badge.vue';
 
 export default {
+  i18n: {
+    archiveLabel: __('Archive'),
+    editLabel: __('Edit'),
+  },
   components: {
     GlPopover,
     GlLink,
@@ -130,7 +135,8 @@ export default {
             <gl-button
               v-gl-tooltip
               icon="pencil"
-              :title="__('Edit')"
+              :title="$options.i18n.editLabel"
+              :aria-label="$options.i18n.editLabel"
               @click="$emit('edit-click', requirement)"
             />
           </li>
@@ -140,7 +146,8 @@ export default {
               v-gl-tooltip
               icon="archive"
               :loading="stateChangeRequestActive"
-              :title="__('Archive')"
+              :title="$options.i18n.archiveLabel"
+              :aria-label="$options.i18n.archiveLabel"
               @click.stop="handleArchiveClick"
             />
           </li>

ee/app/assets/javascripts/requirements/components/requirements_tabs.vue

 <script>
 import { GlBadge, GlButton, GlButtonGroup, GlTabs, GlTab, GlTooltipDirective } from '@gitlab/ui';
-
+import { __ } from '~/locale';
 import { FilterState } from '../constants';
 
 export default {
+  i18n: {
+    exportAsCsvLabel: __('Export as CSV'),
+    importRequirementsLabel: __('Import requirements'),
+  },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
@@ -87,7 +91,8 @@ export default {
       <gl-button-group>
         <gl-button
           v-gl-tooltip
-          :title="__('Export as CSV')"
+          :title="$options.i18n.exportAsCsvLabel"
+          :aria-label="$options.i18n.exportAsCsvLabel"
           category="secondary"
           :disabled="showCreateForm"
           icon="export"
@@ -95,7 +100,8 @@ export default {
         />
         <gl-button
           v-gl-tooltip
-          :title="__('Import requirements')"
+          :title="$options.i18n.importRequirementsLabel"
+          :aria-label="$options.i18n.importRequirementsLabel"
           category="secondary"
           class="js-import-requirements qa-import-requirements-button"
           :disabled="showCreateForm"

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles_list.vue

@@ -254,6 +254,7 @@ export default {
                 data-testid="dast-profile-delete-button"
                 :disabled="isPolicyProfile(item)"
                 :aria-disabled="isPolicyProfile(item)"
+                :aria-label="s__('DastProfiles|Delete profile')"
                 @click="prepareProfileDeletion(item.id)"
               />
             </span>

ee/app/assets/javascripts/security_dashboard/components/first_class_project_manager/project_list.vue

 <script>
 import { GlBadge, GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 
 export default {
+  i18n: {
+    removeLabel: s__('SecurityReports|Remove project from dashboard'),
+  },
   components: {
     GlBadge,
     GlButton,
@@ -52,7 +56,8 @@ export default {
             v-gl-tooltip
             icon="remove"
             class="gl-ml-auto js-projects-list-project-remove"
-            :title="s__('SecurityReports|Remove project from dashboard')"
+            :title="$options.i18n.removeLabel"
+            :aria-label="$options.i18n.removeLabel"
             @click="projectRemoved(project)"
           />
         </li>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_alert_picker.vue

@@ -127,6 +127,7 @@ export default {
           data-testid="remove-alert"
           icon="remove"
           category="tertiary"
+          :aria-label="__('Remove')"
           @click="$emit('update-alert', !policyAlert)"
         />
       </div>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_builder.vue

@@ -241,6 +241,7 @@ export default {
       icon="remove"
       category="tertiary"
       class="gl-absolute gl-top-3 gl-right-3"
+      :aria-label="__('Remove')"
       data-testid="remove-rule"
       @click="$emit('remove')"
     />

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

@@ -184,6 +184,7 @@ export default {
       <gl-button
         v-gl-tooltip:tooltipcontainer.left
         :title="$options.i18n.discoverFeedbackLabel"
+        :aria-label="$options.i18n.discoverFeedbackLabel"
         icon="slight-smile"
         size="medium"
         class="discover-feedback-icon"

ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue

@@ -90,6 +90,7 @@ export default {
         category="tertiary"
         :icon="button.iconName"
         :title="button.title"
+        :aria-label="button.title"
         @click="button.onClick"
       />
     </div>

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

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

ee/spec/frontend/on_demand_scans/components/profile_selector/__snapshots__/scanner_profile_selector_spec.js.snap

@@ -291,6 +291,7 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
           data-testid="selected-profile-summary"
         >
           <a
+            aria-label="Edit profile"
             class="btn gl-absolute gl-right-7 btn-default btn-md gl-button btn-icon"
             href="/scanner_profile/edit/1"
             title="Edit profile"

ee/spec/frontend/on_demand_scans/components/profile_selector/__snapshots__/site_profile_selector_spec.js.snap

@@ -291,6 +291,7 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
           data-testid="selected-profile-summary"
         >
           <a
+            aria-label="Edit profile"
             class="btn gl-absolute gl-right-7 btn-default btn-md gl-button btn-icon"
             href="/site_profiles/edit/1"
             title="Edit profile"

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/event_item_spec.js.snap

@@ -81,6 +81,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
     class="gl-flex-shrink-0 gl-align-self-start"
   >
     <button
+      aria-label="Foo Action"
       class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
       title="Foo Action"
       type="button"
@@ -100,6 +101,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
       <!---->
     </button>
     <button
+      aria-label="Bar Action"
       class="btn btn-default btn-md gl-button btn-default-tertiary btn-icon"
       title="Bar Action"
       type="button"

locale/gitlab.pot

@@ -21624,6 +21624,12 @@ msgstr ""
 msgid "OnCallSchedules|Try adding a rotation"
 msgstr ""
 
+msgid "OnCallSchedules|View next timeframe"
+msgstr ""
+
+msgid "OnCallSchedules|View previous timeframe"
+msgstr ""
+
 msgid "OnCallSchedules|Your schedule has been successfully created and all alerts from this project will now be routed to this schedule. Currently, only one schedule can be created per project. More coming soon! To add individual users to this schedule, use the add a rotation button."
 msgstr ""