From d791229a6aaf695f451b6c4afedc2fd7fa764b79 Mon Sep 17 00:00:00 2001
From: Karolis_Stoncius_Sneakybox <karolis.stoncius@sneakybox.biz>
Date: Tue, 12 Sep 2023 03:21:35 +0300
Subject: [PATCH] fix(components): [collapse] fix accessibility issues (#13832)

Using tab related aria attributes results in accessibility issues
---
 .../components/collapse/src/collapse-item.vue | 34 ++++++++-----------
 packages/components/collapse/src/collapse.vue |  2 +-
 packages/theme-chalk/src/collapse.scss        |  3 ++
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/components/collapse/src/collapse-item.vue b/packages/components/collapse/src/collapse-item.vue
index 742e1aa5a14c8..caeda51633884 100644
--- a/packages/components/collapse/src/collapse-item.vue
+++ b/packages/components/collapse/src/collapse-item.vue
@@ -1,33 +1,29 @@
 <template>
   <div :class="rootKls">
-    <div
-      role="tab"
+    <button
+      :id="scopedHeadId"
+      :class="headKls"
       :aria-expanded="isActive"
       :aria-controls="scopedContentId"
       :aria-describedby="scopedContentId"
+      :tabindex="disabled ? -1 : 0"
+      @click="handleHeaderClick"
+      @keydown.space.enter.stop.prevent="handleEnterClick"
+      @focus="handleFocus"
+      @blur="focusing = false"
     >
-      <div
-        :id="scopedHeadId"
-        :class="headKls"
-        role="button"
-        :tabindex="disabled ? -1 : 0"
-        @click="handleHeaderClick"
-        @keydown.space.enter.self.stop.prevent="handleEnterClick"
-        @focus="handleFocus"
-        @blur="focusing = false"
-      >
-        <slot name="title">{{ title }}</slot>
-        <el-icon :class="arrowKls">
-          <arrow-right />
-        </el-icon>
-      </div>
-    </div>
+      <slot name="title">{{ title }}</slot>
+      <el-icon :class="arrowKls">
+        <arrow-right />
+      </el-icon>
+    </button>
+
     <el-collapse-transition>
       <div
         v-show="isActive"
         :id="scopedContentId"
+        role="region"
         :class="itemWrapperKls"
-        role="tabpanel"
         :aria-hidden="!isActive"
         :aria-labelledby="scopedHeadId"
       >
diff --git a/packages/components/collapse/src/collapse.vue b/packages/components/collapse/src/collapse.vue
index 32215406123e3..244ec891216bf 100644
--- a/packages/components/collapse/src/collapse.vue
+++ b/packages/components/collapse/src/collapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="rootKls" role="tablist" aria-multiselectable="true">
+  <div :class="rootKls">
     <slot />
   </div>
 </template>
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index 56e3a4bbb8528..9450a8471ab4f 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -18,6 +18,9 @@
     }
   }
   @include e(header) {
+    width: 100%;
+    padding: 0;
+    border: none;
     display: flex;
     align-items: center;
     height: getCssVar('collapse-header-height');