From e70d3c3232236098aa33d2e14d9e243caf091d53 Mon Sep 17 00:00:00 2001 From: tangwenhui1 Date: Sun, 11 May 2025 08:15:01 +0800 Subject: [PATCH 1/2] feat: support aria-* and data-* --- examples/simple.tsx | 5 ++++- examples/utils.tsx | 2 ++ src/Cascader.tsx | 6 +++++- src/OptionList/Column.tsx | 6 ++++++ tests/index.spec.tsx | 35 +++++++++++++++++++++++++++++++++++ 5 files changed, 52 insertions(+), 2 deletions(-) diff --git a/examples/simple.tsx b/examples/simple.tsx index ebad6c64..eae763de 100644 --- a/examples/simple.tsx +++ b/examples/simple.tsx @@ -4,10 +4,13 @@ import type { CascaderProps } from '../src'; import Cascader from '../src'; import type { Option2 } from './utils'; -const addressOptions = [ +const addressOptions: CascaderProps["options"] = [ { label: '福建', value: 'fj', + "aria-label": '福建', + "aria-labelledby": 'fj', + "data-type": 'fj', children: [ { label: '福州', diff --git a/examples/utils.tsx b/examples/utils.tsx index c7d64d66..ce961274 100644 --- a/examples/utils.tsx +++ b/examples/utils.tsx @@ -3,6 +3,7 @@ export interface Option { name?: string; nodes?: Option[]; disabled?: boolean; + [key: string]: any; } export interface Option2 { @@ -14,4 +15,5 @@ export interface Option2 { isLeaf?: boolean; loading?: boolean; children?: Option2[]; + [key: string]: any; } diff --git a/src/Cascader.tsx b/src/Cascader.tsx index dc41765a..21670606 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -30,15 +30,19 @@ import { import { formatStrategyValues, toPathOptions } from './utils/treeUtil'; import { warningNullOptions } from './utils/warningPropsUtil'; + +export type HTMLAriaDataAttributes = React.AriaAttributes & Record<`data-${string}`, unknown> & Pick, 'role'>; + export interface BaseOptionType { disabled?: boolean; disableCheckbox?: boolean; label?: React.ReactNode; value?: string | number | null; children?: DefaultOptionType[]; + [key: string]: any; } -export type DefaultOptionType = BaseOptionType & Record; +export type DefaultOptionType = BaseOptionType & HTMLAriaDataAttributes & Record; export interface ShowSearchType< OptionType extends DefaultOptionType = DefaultOptionType, diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx index 7c3edb2d..cab2dc9a 100644 --- a/src/OptionList/Column.tsx +++ b/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 { + const ariaProps = pickAttrs(option, { + aria: true, + data: true + }); // >>>>> Open const triggerOpenPath = () => { if (isOptionDisabled(disabled)) { @@ -170,6 +175,7 @@ export default function Column { const { container } = render(); 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(); + 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'); + } + }); }); From d4060a5c21f8c2a40ef5ad22cb64b1d84808c5e9 Mon Sep 17 00:00:00 2001 From: tangwenhui1 Date: Sun, 11 May 2025 11:31:59 +0800 Subject: [PATCH 2/2] feat: opt code --- examples/simple.tsx | 2 +- examples/utils.tsx | 2 -- src/Cascader.tsx | 6 +----- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/examples/simple.tsx b/examples/simple.tsx index eae763de..583cecf1 100644 --- a/examples/simple.tsx +++ b/examples/simple.tsx @@ -4,7 +4,7 @@ import type { CascaderProps } from '../src'; import Cascader from '../src'; import type { Option2 } from './utils'; -const addressOptions: CascaderProps["options"] = [ +const addressOptions = [ { label: '福建', value: 'fj', diff --git a/examples/utils.tsx b/examples/utils.tsx index ce961274..c7d64d66 100644 --- a/examples/utils.tsx +++ b/examples/utils.tsx @@ -3,7 +3,6 @@ export interface Option { name?: string; nodes?: Option[]; disabled?: boolean; - [key: string]: any; } export interface Option2 { @@ -15,5 +14,4 @@ export interface Option2 { isLeaf?: boolean; loading?: boolean; children?: Option2[]; - [key: string]: any; } diff --git a/src/Cascader.tsx b/src/Cascader.tsx index 21670606..dc41765a 100644 --- a/src/Cascader.tsx +++ b/src/Cascader.tsx @@ -30,19 +30,15 @@ import { import { formatStrategyValues, toPathOptions } from './utils/treeUtil'; import { warningNullOptions } from './utils/warningPropsUtil'; - -export type HTMLAriaDataAttributes = React.AriaAttributes & Record<`data-${string}`, unknown> & Pick, 'role'>; - export interface BaseOptionType { disabled?: boolean; disableCheckbox?: boolean; label?: React.ReactNode; value?: string | number | null; children?: DefaultOptionType[]; - [key: string]: any; } -export type DefaultOptionType = BaseOptionType & HTMLAriaDataAttributes & Record; +export type DefaultOptionType = BaseOptionType & Record; export interface ShowSearchType< OptionType extends DefaultOptionType = DefaultOptionType,