From fe7f5e28d7a86f8f669b40bdb2c6cb6e8125c4fa Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 17 Nov 2021 11:51:56 +0800
Subject: [PATCH] feat(Cascader): add role, aria and tabindex for a11y (#9886)

* feat(Cascader): add role, aria and tabindex for a11y

* fix: typing

* fix: snapshot
---
 packages/vant/src/calendar/CalendarHeader.tsx |  3 +-
 packages/vant/src/cascader/Cascader.tsx       | 20 +++---
 .../test/__snapshots__/index.spec.ts.snap     | 66 +++++++++++++++----
 3 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/packages/vant/src/calendar/CalendarHeader.tsx b/packages/vant/src/calendar/CalendarHeader.tsx
index 896b5648b..7cca6aef6 100644
--- a/packages/vant/src/calendar/CalendarHeader.tsx
+++ b/packages/vant/src/calendar/CalendarHeader.tsx
@@ -26,9 +26,8 @@ export default defineComponent({
       }
     };
 
-    const onClickSubtitle = (event: MouseEvent) => {
+    const onClickSubtitle = (event: MouseEvent) =>
       emit('click-subtitle', event);
-    };
 
     const renderSubtitle = () => {
       if (props.showSubtitle) {
diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index deda430eb..a6578ef69 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -205,8 +205,10 @@ export default defineComponent({
       selectedOption: CascaderOption | null,
       tabIndex: number
     ) => {
-      const selected =
-        selectedOption && option[valueKey] === selectedOption[valueKey];
+      const { disabled } = option;
+      const selected = !!(
+        selectedOption && option[valueKey] === selectedOption[valueKey]
+      );
       const color = option.color || (selected ? props.activeColor : undefined);
 
       const Text = slots.option ? (
@@ -217,14 +219,12 @@ export default defineComponent({
 
       return (
         <li
-          class={[
-            bem('option', {
-              selected,
-              disabled: option.disabled,
-            }),
-            option.className,
-          ]}
+          role="menuitemradio"
+          class={[bem('option', { selected, disabled }), option.className]}
           style={{ color }}
+          tabindex={disabled ? undefined : selected ? 0 : -1}
+          aria-checked={selected}
+          aria-disabled={disabled || undefined}
           onClick={() => onSelect(option, tabIndex)}
         >
           {Text}
@@ -240,7 +240,7 @@ export default defineComponent({
       selectedOption: CascaderOption | null,
       tabIndex: number
     ) => (
-      <ul class={bem('options')}>
+      <ul role="menu" class={bem('options')}>
         {options.map((option) =>
           renderOption(option, selectedOption, tabIndex)
         )}
diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index 6310bbdda..f9e33e7a1 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -6,7 +6,11 @@ exports[`should change close icon when using close-icon prop 1`] = `
 `;
 
 exports[`should render option slot correctly 1`] = `
-<li class="van-cascader__option">
+<li role="menuitemradio"
+    class="van-cascader__option"
+    tabindex="-1"
+    aria-checked="false"
+>
   Custom Option foo
 </li>
 `;
@@ -14,15 +18,25 @@ exports[`should render option slot correctly 1`] = `
 exports[`should render options-top、options-bottom slots correctly 1`] = `
 <div class="van-tab__panel">
   Top, tab index: 0
-  <ul class="van-cascader__options">
-    <li class="van-cascader__option van-cascader__option--selected">
+  <ul role="menu"
+      class="van-cascader__options"
+  >
+    <li role="menuitemradio"
+        class="van-cascader__option van-cascader__option--selected"
+        tabindex="0"
+        aria-checked="true"
+    >
       <span>
         Zhejiang
       </span>
       <i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
       </i>
     </li>
-    <li class="van-cascader__option">
+    <li role="menuitemradio"
+        class="van-cascader__option"
+        tabindex="-1"
+        aria-checked="false"
+    >
       <span>
         Jiangsu
       </span>
@@ -39,7 +53,11 @@ exports[`should render title slot correctly 1`] = `
 `;
 
 exports[`should select correct option when value changed 1`] = `
-<li class="van-cascader__option van-cascader__option--selected">
+<li role="menuitemradio"
+    class="van-cascader__option van-cascader__option--selected"
+    tabindex="0"
+    aria-checked="true"
+>
   <span>
     Wenzhou
   </span>
@@ -102,13 +120,23 @@ exports[`should update tabs when previous tab is clicked 1`] = `
                style="width: 100px;"
           >
             <div class="van-tab__panel">
-              <ul class="van-cascader__options">
-                <li class="van-cascader__option">
+              <ul role="menu"
+                  class="van-cascader__options"
+              >
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Zhejiang
                   </span>
                 </li>
-                <li class="van-cascader__option van-cascader__option--selected">
+                <li role="menuitemradio"
+                    class="van-cascader__option van-cascader__option--selected"
+                    tabindex="0"
+                    aria-checked="true"
+                >
                   <span>
                     Jiangsu
                   </span>
@@ -127,18 +155,32 @@ exports[`should update tabs when previous tab is clicked 1`] = `
                style="width: 100px;"
           >
             <div class="van-tab__panel">
-              <ul class="van-cascader__options">
-                <li class="van-cascader__option">
+              <ul role="menu"
+                  class="van-cascader__options"
+              >
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Nanjing
                   </span>
                 </li>
-                <li class="van-cascader__option">
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Wuxi
                   </span>
                 </li>
-                <li class="van-cascader__option">
+                <li role="menuitemradio"
+                    class="van-cascader__option"
+                    tabindex="-1"
+                    aria-checked="false"
+                >
                   <span>
                     Xuzhou
                   </span>