From 35fa1492c3d0872349fab6fd59c6bd20c08baddb Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 16 Nov 2021 17:23:14 +0800
Subject: [PATCH] feat(Stepper): add group role for a11y (#9876)

---
 .../form/test/__snapshots__/demo.spec.ts.snap |  4 +-
 packages/vant/src/stepper/Stepper.tsx         |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap      | 40 ++++++++++++++-----
 .../test/__snapshots__/index.spec.ts.snap     |  8 +++-
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
index a69116e00..12d049126 100644
--- a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -271,7 +271,9 @@ exports[`should render demo and match snapshot 1`] = `
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
-              <div class="van-stepper">
+              <div role="group"
+                   class="van-stepper"
+              >
                 <button type="button"
                         class="van-stepper__minus van-stepper__minus--disabled"
                 >
diff --git a/packages/vant/src/stepper/Stepper.tsx b/packages/vant/src/stepper/Stepper.tsx
index 2e4fc6d18..ca7ab897a 100644
--- a/packages/vant/src/stepper/Stepper.tsx
+++ b/packages/vant/src/stepper/Stepper.tsx
@@ -288,7 +288,7 @@ export default defineComponent({
     useCustomFieldValue(() => props.modelValue);
 
     return () => (
-      <div class={bem([props.theme])}>
+      <div role="group" class={bem([props.theme])}>
         <button
           v-show={props.showMinus}
           type="button"
diff --git a/packages/vant/src/stepper/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/stepper/test/__snapshots__/demo.spec.ts.snap
index b82a7af22..661af3d2a 100644
--- a/packages/vant/src/stepper/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/stepper/test/__snapshots__/demo.spec.ts.snap
@@ -9,7 +9,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -36,7 +38,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -63,7 +67,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -90,7 +96,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -117,7 +125,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -145,7 +155,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -173,7 +185,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -200,7 +214,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 style="width: 32px; height: 32px;"
                 class="van-stepper__minus van-stepper__minus--disabled"
@@ -230,7 +246,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper">
+      <div role="group"
+           class="van-stepper"
+      >
         <button type="button"
                 class="van-stepper__minus van-stepper__minus--disabled"
         >
@@ -257,7 +275,9 @@ exports[`should render demo and match snapshot 1`] = `
       </span>
     </div>
     <div class="van-cell__value">
-      <div class="van-stepper van-stepper--round">
+      <div role="group"
+           class="van-stepper van-stepper--round"
+      >
         <button type="button"
                 style="width: 22px; height: 22px;"
                 class="van-stepper__minus van-stepper__minus--disabled"
diff --git a/packages/vant/src/stepper/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/stepper/test/__snapshots__/index.spec.ts.snap
index e0aa7c716..9334ec42f 100644
--- a/packages/vant/src/stepper/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/stepper/test/__snapshots__/index.spec.ts.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should disable buttons and input when using disabled prop 1`] = `
-<div class="van-stepper">
+<div role="group"
+     class="van-stepper"
+>
   <button type="button"
           class="van-stepper__minus van-stepper__minus--disabled"
   >
@@ -23,7 +25,9 @@ exports[`should disable buttons and input when using disabled prop 1`] = `
 `;
 
 exports[`should update input height and button size when using button-size prop 1`] = `
-<div class="van-stepper">
+<div role="group"
+     class="van-stepper"
+>
   <button type="button"
           style="width: 2rem; height: 2rem;"
           class="van-stepper__minus van-stepper__minus--disabled"