From b35d295ad7a9c18740e76716a585fd78acc9bca0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 19 Nov 2021 15:16:15 +0800
Subject: [PATCH] feat(Sidebar): add role, aria and tabindex for a11y (#9903)

---
 .../vant/src/sidebar-item/SidebarItem.tsx     |  10 +-
 packages/vant/src/sidebar/Sidebar.tsx         |   2 +-
 .../test/__snapshots__/demo.spec.ts.snap      | 111 +++++++++++++-----
 .../test/__snapshots__/index.spec.tsx.snap    |  12 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  94 +++++++++++----
 .../test/__snapshots__/index.spec.tsx.snap    |  28 +++--
 6 files changed, 192 insertions(+), 65 deletions(-)

diff --git a/packages/vant/src/sidebar-item/SidebarItem.tsx b/packages/vant/src/sidebar-item/SidebarItem.tsx
index 477389527..3faa0537b 100644
--- a/packages/vant/src/sidebar-item/SidebarItem.tsx
+++ b/packages/vant/src/sidebar-item/SidebarItem.tsx
@@ -57,11 +57,17 @@ export default defineComponent({
       const selected = index.value === parent.getActive();
 
       return (
-        <a class={bem({ select: selected, disabled })} onClick={onClick}>
+        <div
+          role="tab"
+          class={bem({ select: selected, disabled })}
+          tabindex={disabled ? undefined : 0}
+          aria-selected={selected}
+          onClick={onClick}
+        >
           <Badge dot={dot} content={badge} class={bem('text')}>
             {slots.title ? slots.title() : title}
           </Badge>
-        </a>
+        </div>
       );
     };
   },
diff --git a/packages/vant/src/sidebar/Sidebar.tsx b/packages/vant/src/sidebar/Sidebar.tsx
index 833b7c649..47fb001bf 100644
--- a/packages/vant/src/sidebar/Sidebar.tsx
+++ b/packages/vant/src/sidebar/Sidebar.tsx
@@ -41,6 +41,6 @@ export default defineComponent({
       setActive,
     });
 
-    return () => <div class={bem()}>{slots.default?.()}</div>;
+    return () => <div role="tablist" class={bem()}>{slots.default?.()}</div>;
   },
 });
diff --git a/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap
index 6f3baf230..905f6f890 100644
--- a/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/sidebar/test/__snapshots__/demo.spec.ts.snap
@@ -9,22 +9,36 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Basic Usage
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -35,30 +49,44 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Show Badge
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--dot van-badge--fixed">
             </div>
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
               5
             </div>
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
               20
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -69,22 +97,35 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Disabled
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item van-sidebar-item--disabled">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--disabled"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -95,22 +136,36 @@ exports[`should render demo and match snapshot 1`] = `
       <h3 class="demo-sidebar-title">
         Change Event
       </h3>
-      <div class="van-sidebar">
-        <a class="van-sidebar-item van-sidebar-item--select">
+      <div role="tablist"
+           class="van-sidebar"
+      >
+        <div role="tab"
+             class="van-sidebar-item van-sidebar-item--select"
+             tabindex="0"
+             aria-selected="true"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 1
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 2
           </div>
-        </a>
-        <a class="van-sidebar-item">
+        </div>
+        <div role="tab"
+             class="van-sidebar-item"
+             tabindex="0"
+             aria-selected="false"
+        >
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title 3
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/vant/src/sidebar/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/sidebar/test/__snapshots__/index.spec.tsx.snap
index eec8e97bd..5048bfa07 100644
--- a/packages/vant/src/sidebar/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/sidebar/test/__snapshots__/index.spec.tsx.snap
@@ -1,11 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render title slot correctly 1`] = `
-<div class="van-sidebar">
-  <a class="van-sidebar-item van-sidebar-item--select">
+<div role="tablist"
+     class="van-sidebar"
+>
+  <div role="tab"
+       class="van-sidebar-item van-sidebar-item--select"
+       tabindex="0"
+       aria-selected="true"
+  >
     <div class="van-badge__wrapper van-sidebar-item__text">
       Custom Title
     </div>
-  </a>
+  </div>
 </div>
 `;
diff --git a/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap
index 01c358217..35bc23628 100644
--- a/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tree-select/test/__snapshots__/demo.spec.ts.snap
@@ -5,22 +5,35 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 300px;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
-      <a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 3
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@@ -44,22 +57,35 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 300px;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
-      <a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 3
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
@@ -85,17 +111,27 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 55vw;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-image">
@@ -110,22 +146,32 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tree-select"
        style="height: 55vw;"
   >
-    <div class="van-sidebar van-tree-select__nav">
-      <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+    <div role="tablist"
+         class="van-sidebar van-tree-select__nav"
+    >
+      <div role="tab"
+           class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="true"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 1
           <div class="van-badge van-badge--dot van-badge--fixed">
           </div>
         </div>
-      </a>
-      <a class="van-sidebar-item van-tree-select__nav-item">
+      </div>
+      <div role="tab"
+           class="van-sidebar-item van-tree-select__nav-item"
+           tabindex="0"
+           aria-selected="false"
+      >
         <div class="van-badge__wrapper van-sidebar-item__text">
           Group 2
           <div class="van-badge van-badge--fixed">
             5
           </div>
         </div>
-      </a>
+      </div>
     </div>
     <div class="van-tree-select__content">
       <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
diff --git a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
index d303ad1b6..1d4680079 100644
--- a/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
@@ -12,12 +12,18 @@ exports[`should render content slot correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
+    <div role="tab"
+         class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-sidebar-item__text">
         group1
       </div>
-    </a>
+    </div>
   </div>
   <div class="van-tree-select__content">
     Custom Content
@@ -29,7 +35,9 @@ exports[`should render empty TreeSelect correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
   </div>
   <div class="van-tree-select__content">
   </div>
@@ -40,15 +48,21 @@ exports[`should render nav badge correctly 1`] = `
 <div class="van-tree-select"
      style="height: 300px;"
 >
-  <div class="van-sidebar van-tree-select__nav">
-    <a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+  <div role="tablist"
+       class="van-sidebar van-tree-select__nav"
+  >
+    <div role="tab"
+         class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
+         tabindex="0"
+         aria-selected="true"
+    >
       <div class="van-badge__wrapper van-sidebar-item__text">
         group1
         <div class="van-badge van-badge--fixed">
           3
         </div>
       </div>
-    </a>
+    </div>
   </div>
   <div class="van-tree-select__content">
   </div>