From 4fd86c6b744a3734969c223d67e8c22a028d1645 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Thu, 16 Jun 2022 22:32:36 -0500 Subject: [PATCH 1/4] Add escape key functionality for navigation submenus. --- packages/block-library/src/navigation-submenu/view.js | 11 +++++++---- packages/block-library/src/navigation/view.js | 8 ++++++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-submenu/view.js b/packages/block-library/src/navigation-submenu/view.js index f990729f48af0..2c0f4d2ce9286 100644 --- a/packages/block-library/src/navigation-submenu/view.js +++ b/packages/block-library/src/navigation-submenu/view.js @@ -49,13 +49,16 @@ document.addEventListener( 'click', function ( event ) { } } ); } ); -// Close on focus outside. +// Close on focus outside or escape key. document.addEventListener( 'keyup', function ( event ) { const submenuBlocks = document.querySelectorAll( - '.wp-block-navigation-submenu' + '.wp-block-navigation-item.has-child' ); - submenuBlocks.forEach( ( block ) => { - if ( ! block.contains( event.target ) ) { + submenuBlocks.forEach( function ( block ) { + if ( + ! block.contains( event.target ) || + ( block.contains( event.target ) && event.key === 'Escape' ) + ) { closeSubmenus( block ); } } ); diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 5116f983b5400..3bd4f09b16363 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -4,6 +4,7 @@ function closeSubmenus( element ) { .querySelectorAll( '[aria-expanded="true"]' ) .forEach( function ( toggle ) { toggle.setAttribute( 'aria-expanded', 'false' ); + toggle.focus(); } ); } @@ -55,13 +56,16 @@ window.addEventListener( 'load', () => { } } ); } ); - // Close on focus outside. + // Close on focus outside or escape key. document.addEventListener( 'keyup', function ( event ) { const submenuBlocks = document.querySelectorAll( '.wp-block-navigation-item.has-child' ); submenuBlocks.forEach( function ( block ) { - if ( ! block.contains( event.target ) ) { + if ( + ! block.contains( event.target ) || + ( block.contains( event.target ) && event.key === 'Escape' ) + ) { closeSubmenus( block ); } } ); From b17feae48cc7fdc87bc6fc7237902601996f4d52 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Thu, 16 Jun 2022 22:57:33 -0500 Subject: [PATCH 2/4] Fix to selector. --- packages/block-library/src/navigation-submenu/view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-submenu/view.js b/packages/block-library/src/navigation-submenu/view.js index 2c0f4d2ce9286..dd7f81a050766 100644 --- a/packages/block-library/src/navigation-submenu/view.js +++ b/packages/block-library/src/navigation-submenu/view.js @@ -52,9 +52,9 @@ document.addEventListener( 'click', function ( event ) { // Close on focus outside or escape key. document.addEventListener( 'keyup', function ( event ) { const submenuBlocks = document.querySelectorAll( - '.wp-block-navigation-item.has-child' + '.wp-block-navigation-submenu' ); - submenuBlocks.forEach( function ( block ) { + submenuBlocks.forEach( ( block ) => { if ( ! block.contains( event.target ) || ( block.contains( event.target ) && event.key === 'Escape' ) From 44284ca1246d0715f72c85d13d4039fd34b11d4c Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Thu, 16 Jun 2022 22:58:21 -0500 Subject: [PATCH 3/4] Add missing toggle focus to submenu close function. --- packages/block-library/src/navigation-submenu/view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation-submenu/view.js b/packages/block-library/src/navigation-submenu/view.js index dd7f81a050766..0d8730846ea0c 100644 --- a/packages/block-library/src/navigation-submenu/view.js +++ b/packages/block-library/src/navigation-submenu/view.js @@ -3,6 +3,7 @@ const closeSubmenus = ( element ) => { .querySelectorAll( '[aria-expanded="true"]' ) .forEach( ( toggle ) => { toggle.setAttribute( 'aria-expanded', 'false' ); + toggle.focus(); } ); }; From fd6f6f7f6b291d9ada4bb1eeffce1e2a6ef75aac Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Fri, 17 Jun 2022 08:08:40 -0500 Subject: [PATCH 4/4] Code comment. --- packages/block-library/src/navigation-submenu/view.js | 1 + packages/block-library/src/navigation/view.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/block-library/src/navigation-submenu/view.js b/packages/block-library/src/navigation-submenu/view.js index 0d8730846ea0c..d7fda2f8d8809 100644 --- a/packages/block-library/src/navigation-submenu/view.js +++ b/packages/block-library/src/navigation-submenu/view.js @@ -3,6 +3,7 @@ const closeSubmenus = ( element ) => { .querySelectorAll( '[aria-expanded="true"]' ) .forEach( ( toggle ) => { toggle.setAttribute( 'aria-expanded', 'false' ); + // Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped. toggle.focus(); } ); }; diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js index 3bd4f09b16363..6456babfbf12b 100644 --- a/packages/block-library/src/navigation/view.js +++ b/packages/block-library/src/navigation/view.js @@ -4,6 +4,7 @@ function closeSubmenus( element ) { .querySelectorAll( '[aria-expanded="true"]' ) .forEach( function ( toggle ) { toggle.setAttribute( 'aria-expanded', 'false' ); + // Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped. toggle.focus(); } ); }