fix(components): [collapse] fix accessibility issues (#13832)

Using tab related aria attributes results in accessibility issues
element-plus · Sep 12, 2023 · d791229 · d791229
1 parent 06e8582
commit d791229
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git 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
@@ -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
@@ -18,6 +18,9 @@
     }
   }
   @include e(header) {
+    width: 100%;
+    padding: 0;
+    border: none;
     display: flex;
     align-items: center;
     height: getCssVar('collapse-header-height');