Merge branch 'cngo-remove-unnecessary-html-roles' into 'master'

Remove unnecessary html roles

See merge request gitlab-org/gitlab!52524

app/assets/javascripts/batch_comments/components/draft_note.vue

@@ -79,7 +79,6 @@ export default {
 </script>
 <template>
   <article
-    role="article"
     class="draft-note-component note-wrapper"
     @mouseenter="handleMouseEnter(draft)"
     @mouseleave="handleMouseLeave(draft)"

app/assets/javascripts/milestones/components/milestone_results_section.vue

@@ -77,12 +77,7 @@ export default {
       </div>
     </template>
     <template v-else>
-      <gl-dropdown-item
-        v-for="{ title } in items"
-        :key="title"
-        role="milestone option"
-        @click="$emit('selected', title)"
-      >
+      <gl-dropdown-item v-for="{ title } in items" :key="title" @click="$emit('selected', title)">
         <span class="gl-pl-6" :class="{ 'selected-item': isSelectedMilestone(title) }">
           {{ title }}
         </span>

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

@@ -146,7 +146,7 @@ export default {
             class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500"
             :aria-label="__('Read more about related issues')"
           >
-            <gl-icon name="question" :size="12" role="text" />
+            <gl-icon name="question" :size="12" />
           </gl-link>
 
           <div class="gl-display-inline-flex">

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -133,14 +133,12 @@ export default {
             v-gl-tooltip
             :title="ideButtonTitle"
             class="gl-display-none d-md-inline-block gl-mr-3"
-            :tabindex="!mr.canPushToSourceBranch ? 0 : null"
+            :tabindex="ideButtonTitle ? 0 : null"
           >
             <gl-button
               :href="webIdePath"
               :disabled="!mr.canPushToSourceBranch"
               class="js-web-ide"
-              tabindex="0"
-              role="button"
               data-qa-selector="open_in_web_ide_button"
             >
               {{ s__('mrWidget|Open in Web IDE') }}

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -139,41 +139,33 @@ export default {
   <div class="ci-widget media">
     <template v-if="hasCIError">
       <gl-icon name="status_failed" class="gl-text-red-500" :size="24" />
-      <div
-        class="gl-flex-fill-1 gl-ml-5"
-        tabindex="0"
-        role="text"
-        :aria-label="$options.errorText"
-        data-testid="ci-error-message"
-      >
+      <p class="gl-flex-fill-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
         <gl-sprintf :message="$options.errorText">
           <template #link="{ content }">
             <gl-link :href="mrTroubleshootingDocsPath">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
-      </div>
+      </p>
     </template>
     <template v-else-if="!hasPipeline">
       <gl-loading-icon size="md" />
-      <div class="gl-flex-fill-1 gl-display-flex gl-ml-5" data-testid="monitoring-pipeline-message">
-        <span tabindex="0" role="text" :aria-label="$options.monitoringPipelineText">
-          <gl-sprintf :message="$options.monitoringPipelineText" />
-        </span>
+      <p
+        class="gl-flex-fill-1 gl-display-flex gl-ml-5 gl-mb-0"
+        data-testid="monitoring-pipeline-message"
+      >
+        {{ $options.monitoringPipelineText }}
         <gl-link
           :href="ciTroubleshootingDocsPath"
           target="_blank"
           class="gl-display-flex gl-align-items-center gl-ml-2"
-          tabindex="0"
         >
           <gl-icon
             name="question"
             :size="12"
-            tabindex="0"
-            role="text"
             :aria-label="__('Link to go to GitLab pipeline documentation')"
           />
         </gl-link>
-      </div>
+      </p>
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start gl-mr-3">

ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue

@@ -114,16 +114,15 @@ export default {
           </div>
         </button>
       </div>
-      <div
+      <section
         v-show="isExpanded"
         :id="contentContainerId"
         ref="contentContainer"
         :aria-labelledby="buttonId"
-        role="region"
       >
         <slot name="sub-title"></slot>
         <div ref="content" :style="contentStyles"><slot name="default"></slot></div>
-      </div>
+      </section>
     </template>
     <div v-else ref="loadingIndicator" class="d-flex p-2">
       <div class="h-32-px">