From e1058920f1f14032f66cf1f0ccb64680507fce5a Mon Sep 17 00:00:00 2001 From: Quintis1212 Date: Wed, 3 Mar 2021 22:13:52 +0200 Subject: [PATCH 01/11] accessibility improvement on #29530 issue --- .../edit-site/src/components/block-editor/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index fa07ae90b70fa..1b965635d2ab0 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -61,6 +61,17 @@ export default function BlockEditor( { setIsInserterOpen } ) { useTypingObserver(), ] ); + const { setIsNavigationPanelOpened } = useDispatch( editSiteStore ); + + const keyPress = (e) => { + if(e.key === "Escape") { + // write your logic here. + setIsNavigationPanelOpened(false); + } + } + + document.addEventListener("keydown", keyPress); + // Allow scrolling "through" popovers over the canvas. This is only called // for as long as the pointer is over a popover. function onWheel( { deltaX, deltaY } ) { From 13ccb4a0781e98351ddc38312c5a259697ab267a Mon Sep 17 00:00:00 2001 From: Quintis1212 Date: Thu, 4 Mar 2021 00:00:29 +0200 Subject: [PATCH 02/11] accessibility improvement on #29530 issue ( improved event listener function ) --- .../navigation-sidebar/navigation-toggle/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 4b53da55fc023..8fbaf0a9a2d19 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -35,6 +35,14 @@ function NavigationToggle( { icon, isOpen } ) { const { setIsNavigationPanelOpened } = useDispatch( editSiteStore ); + const keyPress = ( e ) => { + if ( e.key === 'Escape' ) { + setIsNavigationPanelOpened( false ); + } + }; + + document.addEventListener( 'keydown', keyPress , {once:true} ) + if ( ! isActive ) { return null; } From 127c831e07b4214d293ec9a47597aa88b2de7ef3 Mon Sep 17 00:00:00 2001 From: Quintis1212 <34488718+Quintis1212@users.noreply.github.com> Date: Thu, 4 Mar 2021 00:03:52 +0200 Subject: [PATCH 03/11] Update index.js removed not optimized function --- .../edit-site/src/components/block-editor/index.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 1b965635d2ab0..fa07ae90b70fa 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -61,17 +61,6 @@ export default function BlockEditor( { setIsInserterOpen } ) { useTypingObserver(), ] ); - const { setIsNavigationPanelOpened } = useDispatch( editSiteStore ); - - const keyPress = (e) => { - if(e.key === "Escape") { - // write your logic here. - setIsNavigationPanelOpened(false); - } - } - - document.addEventListener("keydown", keyPress); - // Allow scrolling "through" popovers over the canvas. This is only called // for as long as the pointer is over a popover. function onWheel( { deltaX, deltaY } ) { From 2c5d87878ffe54cf1a62651129e484b234cc4cf9 Mon Sep 17 00:00:00 2001 From: Quintis1212 <34488718+Quintis1212@users.noreply.github.com> Date: Thu, 4 Mar 2021 16:04:38 +0200 Subject: [PATCH 04/11] Function optimized --- .../navigation-toggle/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 8fbaf0a9a2d19..d02d9f1e97394 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -35,13 +35,15 @@ function NavigationToggle( { icon, isOpen } ) { const { setIsNavigationPanelOpened } = useDispatch( editSiteStore ); - const keyPress = ( e ) => { - if ( e.key === 'Escape' ) { - setIsNavigationPanelOpened( false ); - } - }; - - document.addEventListener( 'keydown', keyPress , {once:true} ) + document.addEventListener( + 'keydown', + function ( e ) { + if ( e.key === 'Escape' ) { + setIsNavigationPanelOpened( false ); + } + }, + { once: true } + ); if ( ! isActive ) { return null; From e066b2343a65aa254118886e5b63c06ae735ea91 Mon Sep 17 00:00:00 2001 From: Quintis1212 <34488718+Quintis1212@users.noreply.github.com> Date: Fri, 5 Mar 2021 10:22:32 +0200 Subject: [PATCH 05/11] Adding event listener to div element --- .../navigation-toggle/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index d02d9f1e97394..78d38ac40d44a 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -35,15 +35,12 @@ function NavigationToggle( { icon, isOpen } ) { const { setIsNavigationPanelOpened } = useDispatch( editSiteStore ); - document.addEventListener( - 'keydown', - function ( e ) { - if ( e.key === 'Escape' ) { - setIsNavigationPanelOpened( false ); - } - }, - { once: true } - ); + function closeOnEscape( event ) { + if ( event.keyCode === ESCAPE ) { + event.stopPropagation(); + setIsNavigationPanelOpened( false ); + } + } if ( ! isActive ) { return null; @@ -70,6 +67,7 @@ function NavigationToggle( { icon, isOpen } ) { className={ 'edit-site-navigation-toggle' + ( isOpen ? ' is-open' : '' ) } + onKeyDown={ closeOnEscape } >