Merge branch 'cngo-remove-gl-icon-aria-hidden' into 'master'

Remove GlIcon aria-hidden code

See merge request gitlab-org/gitlab!48623

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

@@ -84,7 +84,7 @@ export default {
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
-        <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" />
+        <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" />
       </div>
       <div class="btn btn-default btn-sm disabled">
         <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span>

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

@@ -179,13 +179,13 @@ export default {
               'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'
             "
             target="_blank"
-            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+            >{{ content }} <gl-icon name="external-link"
           /></gl-link>
         </template>
 
         <template #docsLink="{ content }">
           <gl-link :href="docsUrl" target="_blank"
-            >{{ content }} <gl-icon name="external-link" aria-hidden="true"
+            >{{ content }} <gl-icon name="external-link"
           /></gl-link>
         </template>
 

app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue

@@ -27,7 +27,6 @@ export default {
         ),
       }"
       name="warning"
-      aria-hidden="true"
     />
     {{ n__('Showing %d event', 'Showing %d events', 50) }}
   </span>

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

@@ -226,11 +226,11 @@ export default {
       class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4"
       @click="handleExpandLines(EXPAND_DOWN)"
     >
-      <gl-icon :size="12" name="expand-down" aria-hidden="true" />
+      <gl-icon :size="12" name="expand-down" />
       <span>{{ $options.i18n.showMore }}</span>
     </a>
     <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
-      <gl-icon :size="12" name="expand" aria-hidden="true" />
+      <gl-icon :size="12" name="expand" />
       <span>{{ $options.i18n.showAll }}</span>
     </a>
     <a
@@ -238,7 +238,7 @@ export default {
       class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4"
       @click="handleExpandLines(EXPAND_UP)"
     >
-      <gl-icon :size="12" name="expand-up" aria-hidden="true" />
+      <gl-icon :size="12" name="expand-up" />
       <span>{{ $options.i18n.showMore }}</span>
     </a>
   </div>

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

@@ -221,7 +221,6 @@ export default {
         ref="collapseIcon"
         :name="collapseIcon"
         :size="16"
-        aria-hidden="true"
         class="diff-toggle-caret gl-mr-2"
         @click.stop="handleToggleFile"
       />

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

@@ -80,7 +80,7 @@ export default {
     <div ref="header" class="file-title file-title-flex-parent">
       <div class="file-header-content d-flex align-content-center">
         <div v-if="hasCode" class="d-inline-block cursor-pointer" @click="toggle()">
-          <gl-icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" />
+          <gl-icon :name="collapseIcon" :size="16" class="gl-mr-2" />
         </div>
         <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
         <strong

app/assets/javascripts/groups/components/group_folder.vue

@@ -49,7 +49,7 @@ export default {
     />
     <li v-if="hasMoreChildren" class="group-row">
       <a :href="parentGroup.relativePath" class="group-row-contents has-more-items py-2">
-        <gl-icon name="external-link" aria-hidden="true" /> {{ moreChildrenStats }}
+        <gl-icon name="external-link" /> {{ moreChildrenStats }}
       </a>
     </li>
   </ul>

app/assets/javascripts/ide/components/file_templates/dropdown.vue

@@ -86,7 +86,7 @@ export default {
           type="search"
           class="dropdown-input-field qa-dropdown-filter-input"
         />
-        <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" />
+        <gl-icon name="search" class="dropdown-input-search" />
       </div>
       <div class="dropdown-content">
         <gl-loading-icon v-if="showLoading" size="lg" />

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

@@ -92,7 +92,7 @@ export default {
           class="controllers-buttons"
           target="_blank"
         >
-          <gl-icon name="doc-text" aria-hidden="true" />
+          <gl-icon name="doc-text" />
         </a>
         <scroll-button :disabled="isScrolledToTop" direction="up" @click="scrollUp" />
         <scroll-button :disabled="isScrolledToBottom" direction="down" @click="scrollDown" />

app/assets/javascripts/issue_show/components/fields/description_template.vue

@@ -61,11 +61,7 @@ export default {
       data-toggle="dropdown"
     >
       <span class="dropdown-toggle-text">{{ __('Choose a template') }}</span>
-      <gl-icon
-        name="chevron-down"
-        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
-        aria-hidden="true"
-      />
+      <gl-icon name="chevron-down" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" />
     </button>
     <div class="dropdown-menu dropdown-select">
       <div class="dropdown-title gl-display-flex gl-justify-content-center">
@@ -75,7 +71,7 @@ export default {
           :aria-label="__('Close')"
           type="button"
         >
-          <gl-icon name="close" class="dropdown-menu-close-icon" :aria-hidden="true" />
+          <gl-icon name="close" class="dropdown-menu-close-icon" />
         </button>
       </div>
       <div class="dropdown-input">
@@ -85,7 +81,7 @@ export default {
           :placeholder="__('Filter')"
           autocomplete="off"
         />
-        <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" />
+        <gl-icon name="search" class="dropdown-input-search" />
         <gl-icon
           name="close"
           class="dropdown-input-clear js-dropdown-input-clear"

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

@@ -242,7 +242,7 @@ export default {
       right
     >
       <template #button-content>
-        <gl-icon name="ellipsis_v" aria-hidden="true" />
+        <gl-icon name="ellipsis_v" />
         <span class="gl-sr-only">{{ dropdownText }}</span>
       </template>
 

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

@@ -142,7 +142,7 @@ export default {
         type="button"
         @click="handleToggle"
       >
-        <gl-icon ref="chevronIcon" :name="toggleChevronIconName" aria-hidden="true" />
+        <gl-icon ref="chevronIcon" :name="toggleChevronIconName" />
         {{ __('Toggle thread') }}
       </button>
     </div>

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

@@ -94,11 +94,7 @@ export default {
           {{ optionName }}
         </option>
       </select>
-      <gl-icon
-        name="chevron-down"
-        aria-hidden="true"
-        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
-      />
+      <gl-icon name="chevron-down" class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" />
     </div>
   </div>
 </template>

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -341,7 +341,6 @@ export default {
             </select>
             <gl-icon
               name="chevron-down"
-              aria-hidden="true"
               data-hidden="true"
               class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
             />
@@ -573,7 +572,6 @@ export default {
             </select>
             <gl-icon
               name="chevron-down"
-              aria-hidden="true"
               data-hidden="true"
               class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
             />

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

@@ -53,12 +53,12 @@ export default {
     <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div>
     <div class="table-mobile-content">
       <p v-if="hasDuration" class="duration">
-        <gl-icon name="timer" class="gl-vertical-align-baseline!" aria-hidden="true" />
+        <gl-icon name="timer" class="gl-vertical-align-baseline!" />
         {{ durationFormatted }}
       </p>
 
       <p v-if="hasFinishedTime" class="finished-at d-none d-md-block">
-        <gl-icon name="calendar" class="gl-vertical-align-baseline!" aria-hidden="true" />
+        <gl-icon name="calendar" class="gl-vertical-align-baseline!" />
 
         <time
           v-gl-tooltip

app/assets/javascripts/related_issues/components/issue_token.vue

@@ -114,7 +114,7 @@ export default {
       class="js-issue-token-remove-button"
       @click="onRemoveRequest"
     >
-      <gl-icon name="close" aria-hidden="true" />
+      <gl-icon name="close" />
     </button>
   </div>
 </template>

app/assets/javascripts/repository/components/preview/index.vue

@@ -52,7 +52,7 @@ export default {
   <article class="file-holder limited-width-container readme-holder">
     <div class="js-file-title file-title-flex-parent">
       <div class="file-header-content">
-        <gl-icon name="doc-text" aria-hidden="true" />
+        <gl-icon name="doc-text" />
         <gl-link :href="blob.webPath">
           <strong>{{ blob.name }}</strong>
         </gl-link>

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

@@ -66,7 +66,7 @@ export default {
       href="#"
       role="button"
     >
-      <gl-icon aria-hidden="true" data-hidden="true" name="chevron-double-lg-right" :size="12" />
+      <gl-icon data-hidden="true" name="chevron-double-lg-right" :size="12" />
     </a>
   </div>
 </template>

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -77,7 +77,7 @@ export default {
       class="sidebar-collapsed-icon"
       @click="toggleForm"
     >
-      <gl-icon :name="confidentialityIcon" aria-hidden="true" />
+      <gl-icon :name="confidentialityIcon" />
     </div>
     <div class="title hide-collapsed">
       {{ __('Confidentiality') }}
@@ -101,16 +101,11 @@ export default {
         :issuable-type="issuableType"
       />
       <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential">
-        <gl-icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
+        <gl-icon :size="16" name="eye" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <gl-icon
-          :size="16"
-          name="eye-slash"
-          aria-hidden="true"
-          class="sidebar-item-icon inline is-active"
-        />
+        <gl-icon :size="16" name="eye-slash" class="sidebar-item-icon inline is-active" />
         {{ confidentialText }}
       </div>
     </div>

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

@@ -59,7 +59,7 @@ export default {
       href="#"
       role="button"
     >
-      <gl-icon aria-hidden="true" data-hidden="true" name="chevron-double-lg-right" :size="12" />
+      <gl-icon data-hidden="true" name="chevron-double-lg-right" :size="12" />
     </a>
   </div>
 </template>

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -114,12 +114,7 @@ export default {
       class="sidebar-collapsed-icon"
       @click="onClickCollapsedIcon"
     >
-      <gl-icon
-        :name="notificationIcon"
-        :size="16"
-        aria-hidden="true"
-        class="sidebar-item-icon is-active"
-      />
+      <gl-icon :name="notificationIcon" :size="16" class="sidebar-item-icon is-active" />
     </span>
     <span class="issuable-header-text hide-collapsed float-left"> {{ notificationText }} </span>
     <toggle-button

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

@@ -174,13 +174,13 @@ export default {
         :aria-label="__('Add reaction')"
       >
         <span class="reaction-control-icon reaction-control-icon-neutral">
-          <gl-icon aria-hidden="true" name="slight-smile" />
+          <gl-icon name="slight-smile" />
         </span>
         <span class="reaction-control-icon reaction-control-icon-positive">
-          <gl-icon aria-hidden="true" name="smiley" />
+          <gl-icon name="smiley" />
         </span>
         <span class="reaction-control-icon reaction-control-icon-super-positive">
-          <gl-icon aria-hidden="true" name="smile" />
+          <gl-icon name="smile" />
         </span>
       </gl-button>
     </div>

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

@@ -219,7 +219,7 @@ export default {
         <span v-if="utc" class="gl-text-gray-500 gl-font-weight-bold gl-font-sm">{{
           __('UTC')
         }}</span>
-        <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
+        <gl-icon class="gl-dropdown-caret" name="chevron-down" />
       </template>
 
       <div class="d-flex justify-content-between gl-p-2">

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

@@ -45,7 +45,7 @@ export default {
           data-testid="close"
           @click="dismiss"
         >
-          <gl-icon name="close" aria-hidden="true" class="gl-text-gray-500" />
+          <gl-icon name="close" class="gl-text-gray-500" />
         </button>
       </div>
     </div>

app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue

@@ -44,6 +44,6 @@ export default {
       type="search"
       autocomplete="off"
     />
-    <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" data-hidden="true" />
+    <gl-icon name="search" class="dropdown-input-search" data-hidden="true" />
   </div>
 </template>

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -234,7 +234,6 @@ export default {
           name="search"
           class="dropdown-input-search"
           :class="{ hidden: showClearInputButton }"
-          aria-hidden="true"
         />
         <gl-icon
           name="close"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header.vue

@@ -16,7 +16,7 @@ export default {
       type="button"
       class="dropdown-title-button dropdown-menu-close gl-ml-auto"
     >
-      <gl-icon name="close" aria-hidden="true" class="dropdown-menu-close-icon" />
+      <gl-icon name="close" class="dropdown-menu-close-icon" />
     </button>
   </div>
 </template>

ee/app/assets/javascripts/analytics/cycle_analytics/components/limit_warning_component.vue

@@ -27,7 +27,7 @@ export default {
 <template>
   <!-- TODO: im not sure why this is rendered only for exactly 50 items, why not >= 50? -->
   <span v-if="count >= $options.eventsListItemLimit" class="events-info float-right">
-    <gl-icon v-gl-tooltip="{ title: $options.tooltipTitle }" name="warning" aria-hidden="true" />
+    <gl-icon v-gl-tooltip="{ title: $options.tooltipTitle }" name="warning" />
     {{ n__('Showing %d event', 'Showing %d events', $options.eventsListItemLimit) }}
   </span>
 </template>

ee/app/assets/javascripts/billings/subscriptions/components/subscription_table_row.vue

@@ -69,7 +69,7 @@ export default {
   <div class="grid-row d-flex flex-grow-1 flex-column flex-sm-column flex-md-column flex-lg-row">
     <div class="grid-cell header-cell" data-testid="header-cell">
       <span class="icon-wrapper">
-        <gl-icon v-if="header.icon" class="gl-mr-3" :name="header.icon" aria-hidden="true" />
+        <gl-icon v-if="header.icon" class="gl-mr-3" :name="header.icon" />
         {{ header.title }}
       </span>
     </div>

ee/app/assets/javascripts/boards/components/boards_list_selector/list_filter.vue

@@ -31,12 +31,7 @@ export default {
       class="dropdown-input-field"
       @keyup="handleInputChange"
     />
-    <gl-icon name="search" class="dropdown-input-search" aria-hidden="true" data-hidden="true" />
-    <gl-icon
-      name="close"
-      class="dropdown-input-clear"
-      aria-hidden="true"
-      @click="handleInputClear"
-    />
+    <gl-icon name="search" class="dropdown-input-search" data-hidden="true" />
+    <gl-icon name="close" class="dropdown-input-clear" @click="handleInputClear" />
   </div>
 </template>

ee/app/assets/javascripts/boards/components/epic_lane.vue

@@ -159,7 +159,7 @@ export default {
           :aria-label="issuesCountTooltipText"
           data-testid="epic-lane-issue-count"
         >
-          <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" aria-hidden="true" />
+          <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" />
           <span aria-hidden="true">{{ issuesCount }}</span>
         </span>
         <gl-loading-icon v-if="isLoading" class="gl-p-2" />

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -154,7 +154,7 @@ export default {
             :aria-label="unassignedIssuesCountTooltipText"
             data-testid="issues-lane-issue-count"
           >
-            <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" aria-hidden="true" />
+            <gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" />
             <span aria-hidden="true">{{ unassignedIssuesCount }}</span>
           </span>
         </div>

ee/app/assets/javascripts/roadmap/components/epic_item_details.vue

@@ -121,12 +121,7 @@ export default {
           :aria-label="expandIconLabel"
           @click="toggleIsEpicExpanded"
         >
-          <gl-icon
-            v-if="!childrenFetchInProgress"
-            :name="expandIconName"
-            class="text-secondary"
-            aria-hidden="true"
-          />
+          <gl-icon v-if="!childrenFetchInProgress" :name="expandIconName" class="text-secondary" />
           <gl-loading-icon v-if="childrenFetchInProgress" size="sm" />
         </gl-button>
       </span>
@@ -165,7 +160,7 @@ export default {
       </div>
       <template v-if="allowSubEpics">
         <div ref="childEpicsCount" class="gl-mt-1 d-flex text-secondary text-nowrap">
-          <gl-icon name="epic" class="align-text-bottom mr-1" aria-hidden="true" />
+          <gl-icon name="epic" class="align-text-bottom mr-1" />
           <p class="m-0" :aria-label="childEpicsCountText">{{ childEpicsCount }}</p>
         </div>
         <gl-tooltip ref="childEpicsCountTooltip" :target="() => $refs.childEpicsCount">

ee/app/assets/javascripts/roadmap/components/milestones_list_section.vue

@@ -133,7 +133,7 @@ export default {
             variant="link"
             @click="toggleMilestonesExpanded"
           >
-            <gl-icon :name="expandButton.name" class="text-secondary" aria-hidden="true" />
+            <gl-icon :name="expandButton.name" class="text-secondary" />
           </gl-button>
         </span>
         <div class="gl-overflow-hidden gl-flex-grow-1 gl-mx-3 gl-font-weight-bold">
@@ -144,7 +144,7 @@ export default {
           class="gl-display-flex gl-align-items-center gl-justify-content-center text-secondary gl-white-space-nowrap"
           data-testid="count"
         >
-          <gl-icon name="clock" class="gl-mr-2" aria-hidden="true" />
+          <gl-icon name="clock" class="gl-mr-2" />
           <span :aria-label="milestonesCountText">{{ milestonesCount }}</span>
         </div>
       </div>

ee/app/assets/javascripts/vue_merge_request_widget/components/blocking_merge_requests/blocking_merge_request_body.vue

@@ -34,7 +34,7 @@ export default {
 
 <template>
   <div v-if="issue.hiddenCount" class="p-3 d-flex align-items-center">
-    <gl-icon class="gl-mr-3" name="eye-slash" aria-hidden="true" />
+    <gl-icon class="gl-mr-3" name="eye-slash" />
     {{ hiddenBlockingMRsText }}
   </div>
   <related-issuable-item

spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap

@@ -11,7 +11,6 @@ exports[`Repository file preview component renders file HTML 1`] = `
       class="file-header-content"
     >
       <gl-icon-stub
-        aria-hidden="true"
         name="doc-text"
         size="16"
       />

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

@@ -10,7 +10,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
     title="Not confidential"
   >
     <gl-icon-stub
-      aria-hidden="true"
       name="eye"
       size="16"
     />
@@ -35,7 +34,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
       data-testid="not-confidential"
     >
       <gl-icon-stub
-        aria-hidden="true"
         class="sidebar-item-icon inline"
         name="eye"
         size="16"
@@ -58,7 +56,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
     title="Not confidential"
   >
     <gl-icon-stub
-      aria-hidden="true"
       name="eye"
       size="16"
     />
@@ -91,7 +88,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = false and i
       data-testid="not-confidential"
     >
       <gl-icon-stub
-        aria-hidden="true"
         class="sidebar-item-icon inline"
         name="eye"
         size="16"
@@ -114,7 +110,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     title="Confidential"
   >
     <gl-icon-stub
-      aria-hidden="true"
       name="eye-slash"
       size="16"
     />
@@ -138,7 +133,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
       class="value sidebar-item-value hide-collapsed"
     >
       <gl-icon-stub
-        aria-hidden="true"
         class="sidebar-item-icon inline is-active"
         name="eye-slash"
         size="16"
@@ -161,7 +155,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
     title="Confidential"
   >
     <gl-icon-stub
-      aria-hidden="true"
       name="eye-slash"
       size="16"
     />
@@ -193,7 +186,6 @@ exports[`Confidential Issue Sidebar Block renders for confidential = true and is
       class="value sidebar-item-value hide-collapsed"
     >
       <gl-icon-stub
-        aria-hidden="true"
         class="sidebar-item-icon inline is-active"
         name="eye-slash"
         size="16"