From 2277f3864451e2805980ab27216d0d035978f421 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Tue, 6 Aug 2024 08:26:12 -0700 Subject: [PATCH 1/5] fix(side-panel): close with esc key --- .../src/components/SidePanel/SidePanel.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index 5c481ec1a0..fa27f5651c 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -290,6 +290,12 @@ export let SidePanel = React.forwardRef( // Title animation on scroll related state const [labelTextHeight, setLabelTextHeight] = useState(0); + const handleEscapeKey = (event) => { + if (event.key === 'Escape' && open) { + onRequestClose?.(); + } + }; + useEffect(() => { if (open && !titleRef?.current) { setDoAnimateTitle(false); @@ -728,6 +734,7 @@ export let SidePanel = React.forwardRef( className={`${blockClass}__close-button`} label={closeIconDescription} onClick={onRequestClose} + onKeyDown={(event) => handleEscapeKey(event)} title={closeIconDescription} aria-label={closeIconDescription} ref={closeRef} @@ -825,6 +832,12 @@ export let SidePanel = React.forwardRef( ); }; + const handleKeyDown = (event) => { + handleEscapeKey(event); + + return slideIn ? undefined : keyDownListener; + }; + return ( {open && ( @@ -844,7 +857,7 @@ export let SidePanel = React.forwardRef( animate="visible" exit="exit" custom={{ placement, shouldReduceMotion }} - onKeyDown={slideIn ? undefined : keyDownListener} + onKeyDown={handleKeyDown} > <> {/* header */} From aa86d905b419641809f24e470925607c3f0bf162 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Tue, 6 Aug 2024 08:33:05 -0700 Subject: [PATCH 2/5] fix(side-panel): ignore esc slide in --- .../ibm-products/src/components/SidePanel/SidePanel.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index fa27f5651c..b78ca14215 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -833,9 +833,13 @@ export let SidePanel = React.forwardRef( }; const handleKeyDown = (event) => { - handleEscapeKey(event); + if (!slideIn) { + handleEscapeKey(event); - return slideIn ? undefined : keyDownListener; + return keyDownListener; + } + + return undefined; }; return ( From 57eae2471a1eb206428ee6ac88389e7d03a7a10b Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Tue, 6 Aug 2024 09:58:32 -0700 Subject: [PATCH 3/5] fix(side-panel): pass event --- packages/ibm-products/src/components/SidePanel/SidePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index b78ca14215..8bcf75ebdf 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -836,7 +836,7 @@ export let SidePanel = React.forwardRef( if (!slideIn) { handleEscapeKey(event); - return keyDownListener; + return keyDownListener(event); } return undefined; From 6bc95e5ca4a7aa441026849a7cdc25e5edefb481 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 8 Aug 2024 10:49:04 -0700 Subject: [PATCH 4/5] fix(side-panel): ensure that slide-in esc doesnt work --- .../ibm-products/src/components/SidePanel/SidePanel.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index 8bcf75ebdf..45946c7c23 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -734,7 +734,9 @@ export let SidePanel = React.forwardRef( className={`${blockClass}__close-button`} label={closeIconDescription} onClick={onRequestClose} - onKeyDown={(event) => handleEscapeKey(event)} + onKeyDown={(event) => + slideIn ? undefined : handleEscapeKey(event) + } title={closeIconDescription} aria-label={closeIconDescription} ref={closeRef} @@ -835,11 +837,8 @@ export let SidePanel = React.forwardRef( const handleKeyDown = (event) => { if (!slideIn) { handleEscapeKey(event); - - return keyDownListener(event); + keyDownListener(event); } - - return undefined; }; return ( From f06ff61fe2315752418d2a892925a7aebd1b8509 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Fri, 9 Aug 2024 07:17:05 -0700 Subject: [PATCH 5/5] fix(side-panel): cleanup --- packages/ibm-products/src/components/SidePanel/SidePanel.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx index 45946c7c23..6ad7d5d8dc 100644 --- a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx +++ b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx @@ -734,9 +734,7 @@ export let SidePanel = React.forwardRef( className={`${blockClass}__close-button`} label={closeIconDescription} onClick={onRequestClose} - onKeyDown={(event) => - slideIn ? undefined : handleEscapeKey(event) - } + onKeyDown={slideIn ? undefined : handleEscapeKey} title={closeIconDescription} aria-label={closeIconDescription} ref={closeRef}