From cdec4bc334dea74416a05b824a4dfc0a461d807d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 16 Nov 2021 17:52:32 +0800
Subject: [PATCH] fix(a11y): remove tabindex from disabled elements (#9879)

---
 packages/vant/src/checkbox/Checker.tsx                      | 2 +-
 .../vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap  | 2 --
 packages/vant/src/dropdown-menu/DropdownMenu.tsx            | 2 +-
 .../src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap  | 2 --
 .../dropdown-menu/test/__snapshots__/index.spec.tsx.snap    | 1 -
 .../vant/src/radio/test/__snapshots__/demo.spec.ts.snap     | 2 --
 packages/vant/src/rate/Rate.tsx                             | 4 ++--
 packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap | 6 ------
 packages/vant/src/slider/Slider.tsx                         | 2 +-
 .../vant/src/slider/test/__snapshots__/demo.spec.ts.snap    | 1 -
 10 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/packages/vant/src/checkbox/Checker.tsx b/packages/vant/src/checkbox/Checker.tsx
index 286e56f3e..927ff9136 100644
--- a/packages/vant/src/checkbox/Checker.tsx
+++ b/packages/vant/src/checkbox/Checker.tsx
@@ -131,7 +131,7 @@ export default defineComponent({
             },
             direction.value,
           ])}
-          tabindex={disabled.value ? -1 : 0}
+          tabindex={disabled.value ? undefined : 0}
           aria-checked={props.checked}
           onClick={onClick}
         >
diff --git a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
index e1ec46ec4..23931ec5e 100644
--- a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap
@@ -19,7 +19,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="checkbox"
        class="van-checkbox van-checkbox--disabled"
-       tabindex="-1"
        aria-checked="false"
   >
     <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
@@ -32,7 +31,6 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
   <div role="checkbox"
        class="van-checkbox van-checkbox--disabled"
-       tabindex="-1"
        aria-checked="true"
   >
     <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
index a8d3c312d..a65d538dc 100644
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
@@ -116,7 +116,7 @@ export default defineComponent({
       return (
         <div
           role="button"
-          tabindex={disabled ? -1 : 0}
+          tabindex={disabled ? undefined : 0}
           class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
           onClick={() => {
             if (!disabled) {
diff --git a/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
index 10c3b16f0..fb02bdc70 100644
--- a/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
@@ -173,7 +173,6 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-dropdown-menu">
     <div class="van-dropdown-menu__bar">
       <div role="button"
-           tabindex="-1"
            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
       >
         <span class="van-dropdown-menu__title">
@@ -183,7 +182,6 @@ exports[`should render demo and match snapshot 1`] = `
         </span>
       </div>
       <div role="button"
-           tabindex="-1"
            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
       >
         <span class="van-dropdown-menu__title">
diff --git a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
index d7f76204b..378b4696c 100644
--- a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
@@ -380,7 +380,6 @@ exports[`disable dropdown item 1`] = `
 <div class="van-dropdown-menu">
   <div class="van-dropdown-menu__bar">
     <div role="button"
-         tabindex="-1"
          class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
     >
       <span class="van-dropdown-menu__title">
diff --git a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
index c3016c993..0012e07ab 100644
--- a/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/radio/test/__snapshots__/demo.spec.ts.snap
@@ -71,7 +71,6 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div role="radio"
          class="van-radio van-radio--disabled"
-         tabindex="-1"
          aria-checked="false"
     >
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled">
@@ -84,7 +83,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-radio van-radio--disabled"
-         tabindex="-1"
          aria-checked="true"
     >
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked">
diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx
index ed8ce3ec0..2d4c4c715 100644
--- a/packages/vant/src/rate/Rate.tsx
+++ b/packages/vant/src/rate/Rate.tsx
@@ -195,7 +195,7 @@ export default defineComponent({
           role="radio"
           style={style}
           class={bem('item')}
-          tabindex={0}
+          tabindex={disabled ? undefined : 0}
           aria-setsize={+count}
           aria-posinset={score}
           aria-checked={!isVoid}
@@ -231,7 +231,7 @@ export default defineComponent({
           readonly: props.readonly,
           disabled: props.disabled,
         })}
-        tabindex={0}
+        tabindex={props.disabled ? undefined : 0}
         onTouchstart={onTouchStart}
         onTouchmove={onTouchMove}
       >
diff --git a/packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap
index fb302acfc..9ba8979a1 100644
--- a/packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap
@@ -313,11 +313,9 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="radiogroup"
        class="van-rate van-rate--disabled"
-       tabindex="0"
   >
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="1"
          aria-checked="true"
@@ -327,7 +325,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="2"
          aria-checked="true"
@@ -337,7 +334,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="3"
          aria-checked="true"
@@ -347,7 +343,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="4"
          aria-checked="false"
@@ -357,7 +352,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="radio"
          class="van-rate__item"
-         tabindex="0"
          aria-setsize="5"
          aria-posinset="5"
          aria-checked="false"
diff --git a/packages/vant/src/slider/Slider.tsx b/packages/vant/src/slider/Slider.tsx
index 28cefee9a..d092c9928 100644
--- a/packages/vant/src/slider/Slider.tsx
+++ b/packages/vant/src/slider/Slider.tsx
@@ -294,7 +294,7 @@ export default defineComponent({
         <div
           role="slider"
           class={getButtonClassName(index)}
-          tabindex={props.disabled || props.readonly ? -1 : 0}
+          tabindex={props.disabled || props.readonly ? undefined : 0}
           aria-valuemin={+props.min}
           aria-valuenow={current}
           aria-valuemax={+props.max}
diff --git a/packages/vant/src/slider/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/slider/test/__snapshots__/demo.spec.ts.snap
index d139ef420..a4863ea2d 100644
--- a/packages/vant/src/slider/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/slider/test/__snapshots__/demo.spec.ts.snap
@@ -76,7 +76,6 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div role="slider"
            class="van-slider__button-wrapper van-slider__button-wrapper--right"
-           tabindex="-1"
            aria-valuemin="0"
            aria-valuenow="50"
            aria-valuemax="100"