From 4b418fdeed23f653e85c4b1714a69f8744f8f0a3 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Wed, 28 Feb 2024 17:50:25 +0800 Subject: [PATCH 1/6] feat: Dialog support aria-* in closable --- src/Dialog/Content/Panel.tsx | 19 +++++++++++++++---- src/IDialogPropTypes.tsx | 2 +- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index 2be44237..f78f5e69 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -1,9 +1,10 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util/lib/ref'; -import React, { useRef } from 'react'; +import React, { useMemo, useRef } from 'react'; import { RefContext } from '../../context'; import type { IDialogPropTypes } from '../../IDialogPropTypes'; import MemoChildren from './MemoChildren'; +import pickAttrs from 'rc-util/lib/pickAttrs'; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; const entityStyle = { outline: 'none' }; @@ -95,12 +96,22 @@ const Panel = React.forwardRef((props, ref) => { ); } - + const ariaProps = typeof closable === "object" ? pickAttrs(closable, true) : {}; + const mergedClosableIcon = useMemo(() => { + if (typeof closable === "object" && closable.closeIcon) { + return closable.closeIcon; + } + if (closable) { + return closeIcon ?? ; + } + return null; + }, [closable, closeIcon]); + let closer: React.ReactNode; if (closable) { closer = ( - ); } diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index ac64ac33..2d9bf12c 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -28,7 +28,7 @@ export type IDialogPropTypes = { afterClose?: () => any; afterOpenChange?: (open: boolean) => void; onClose?: (e: SyntheticEvent) => any; - closable?: boolean; + closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes); maskClosable?: boolean; visible?: boolean; destroyOnClose?: boolean; From a74b4c7f6e1b5cc9997d395c6c7a7ed062d663cb Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Wed, 28 Feb 2024 18:03:28 +0800 Subject: [PATCH 2/6] feat: Dialog support aria-* in closable --- src/Dialog/Content/Panel.tsx | 2 +- tests/index.spec.tsx | 40 ++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index f78f5e69..4e6c7163 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -104,7 +104,7 @@ const Panel = React.forwardRef((props, ref) => { if (closable) { return closeIcon ?? ; } - return null; + return ; }, [closable, closeIcon]); let closer: React.ReactNode; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 39ee9f17..c79dd88f 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -640,4 +640,44 @@ describe('dialog', () => { ); spy.mockRestore(); }); + + it('support aria-* in closable', () => { + const onClose = jest.fn(); + const wrapper = mount( + + ); + jest.runAllTimers(); + wrapper.update(); + + const btn = wrapper.find('.rc-dialog-close'); + expect(btn.text()).toBe('test'); + expect(btn.getDOMNode().getAttribute('aria-label')).toBe('test aria-label'); + btn.simulate('click'); + + jest.runAllTimers(); + wrapper.update(); + expect(onClose).toHaveBeenCalledTimes(1); + }); + it('should not display closeIcon when closable is false', () => { + const onClose = jest.fn(); + const wrapper = mount( + + ); + jest.runAllTimers(); + wrapper.update(); + + const btn = wrapper.find('.rc-dialog-close'); + expect(btn.find('.rc-dialog-close-x')).not.toBeNull(); + }); }); From d192ace7c0c2e0575ee2ad4446fe29f6b8a87e07 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 29 Feb 2024 10:28:43 +0800 Subject: [PATCH 3/6] feat: Dialog support aria-* in closable --- src/Dialog/Content/Panel.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index 4e6c7163..1d397fac 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -96,22 +96,22 @@ const Panel = React.forwardRef((props, ref) => { ); } - const ariaProps = typeof closable === "object" ? pickAttrs(closable, true) : {}; - const mergedClosableIcon = useMemo(() => { - if (typeof closable === "object" && closable.closeIcon) { - return closable.closeIcon; - } - if (closable) { - return closeIcon ?? ; - } - return ; - }, [closable, closeIcon]); + + + const closableObj = + typeof closable === 'object' + ? closable + : closable + ? { closeIcon: closeIcon ?? } + : {}; + + const ariaProps = pickAttrs(closableObj, true); let closer: React.ReactNode; if (closable) { closer = ( ); } From 4ce183c0f5d3c9943b1e17246ba6e680f4cdc45b Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 29 Feb 2024 10:32:52 +0800 Subject: [PATCH 4/6] feat: Dialog support aria-* in closable --- src/Dialog/Content/Panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index 1d397fac..c13e010f 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util/lib/ref'; -import React, { useMemo, useRef } from 'react'; +import React, { useRef } from 'react'; import { RefContext } from '../../context'; import type { IDialogPropTypes } from '../../IDialogPropTypes'; import MemoChildren from './MemoChildren'; From cd7c2a3fe4ed06441086d916991371be88450140 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 29 Feb 2024 14:10:35 +0800 Subject: [PATCH 5/6] feat: optimize code --- src/Dialog/Content/Panel.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index c13e010f..7dbe7a29 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util/lib/ref'; -import React, { useRef } from 'react'; +import React, { useMemo, useRef } from 'react'; import { RefContext } from '../../context'; import type { IDialogPropTypes } from '../../IDialogPropTypes'; import MemoChildren from './MemoChildren'; @@ -98,12 +98,15 @@ const Panel = React.forwardRef((props, ref) => { } - const closableObj = - typeof closable === 'object' - ? closable - : closable - ? { closeIcon: closeIcon ?? } - : {}; + const closableObj = useMemo(() => { + if (typeof closable === 'object') { + return closable; + } + if (closable) { + return { closeIcon: closeIcon ?? }; + } + return {}; + }, [closable, closeIcon]); const ariaProps = pickAttrs(closableObj, true); From ffd08a5ed680a1abe7bae7e6bf98153c1a77a4a3 Mon Sep 17 00:00:00 2001 From: kiner-tang <1127031143@qq.com> Date: Thu, 29 Feb 2024 14:29:01 +0800 Subject: [PATCH 6/6] feat: optimize code --- src/Dialog/Content/Panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index 7dbe7a29..afea6a4f 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -99,7 +99,7 @@ const Panel = React.forwardRef((props, ref) => { const closableObj = useMemo(() => { - if (typeof closable === 'object') { + if (typeof closable === 'object' && closable !== null) { return closable; } if (closable) {