feat: support aria-* and data-* (#592)

Co-authored-by: tangwenhui1 <tangwenhui1@yy.com>

Author: kiner-tang

examples/simple.tsx

@@ -8,6 +8,9 @@ const addressOptions = [
   {
     label: '福建',
     value: 'fj',
+    "aria-label": '福建',
+    "aria-labelledby": 'fj',
+    "data-type": 'fj',
     children: [
       {
         label: '福州',

src/OptionList/Column.tsx

@@ -1,5 +1,6 @@
 import cls from 'classnames';
 import * as React from 'react';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
@@ -139,6 +140,10 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
           fullPathKey,
           disableCheckbox,
         }) => {
+          const ariaProps = pickAttrs(option, {
+            aria: true,
+            data: true
+          });
           // >>>>> Open
           const triggerOpenPath = () => {
             if (isOptionDisabled(disabled)) {
@@ -170,6 +175,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
           return (
             <li
               key={fullPathKey}
+              {...ariaProps}
               className={cls(menuItemPrefixCls, classNames?.popup?.listItem, {
                 [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
                 [`${menuItemPrefixCls}-active`]:

tests/index.spec.tsx

@@ -1154,4 +1154,39 @@ describe('Cascader.Basic', () => {
     const { container } = render(<Cascader ref={cascaderRef} />);
     expect(cascaderRef.current?.nativeElement).toEqual(container.querySelector('.rc-cascader'));
   });
+
+  it('support aria-* and data-*', () => {
+    const options: CascaderProps["options"] = [
+      {
+        label: '福建',
+        value: 'fj',
+        "aria-label": '福建',
+        "aria-labelledby": 'fj',
+        "data-type": 'fj',
+        children: [
+          {
+            label: '福州',
+            value: 'fuzhou',
+            children: [
+              {
+                label: '马尾',
+                value: 'mawei',
+              },
+            ],
+          },
+          {
+            label: '泉州',
+            value: 'quanzhou',
+          },
+        ],
+      },
+    ];
+    const { container } = render(<Cascader options={options} />);
+    const item = container.querySelector('.rc-cascader-menu-item');
+    if (item) {
+      expect(item.getAttribute('aria-label')).toBe('福建');
+      expect(item.getAttribute('aria-labelledby')).toBe('fj');
+      expect(item.getAttribute('data-type')).toBe('fj');
+    }
+  });
 });