diff --git a/packages/components/src/navigable-container/container.js b/packages/components/src/navigable-container/container.js index 6c9de468f0c591..77bbecd58dafcf 100644 --- a/packages/components/src/navigable-container/container.js +++ b/packages/components/src/navigable-container/container.js @@ -102,11 +102,7 @@ class NavigableContainer extends Component { const targetHasMenuItemRole = MENU_ITEM_ROLES.includes( targetRole ); - // `preventDefault()` on tab to avoid having the browser move the focus - // after this component has already moved it. - const isTab = event.code === 'Tab'; - - if ( targetHasMenuItemRole || isTab ) { + if ( targetHasMenuItemRole ) { event.preventDefault(); } } @@ -126,9 +122,16 @@ class NavigableContainer extends Component { const nextIndex = cycle ? cycleValue( index, focusables.length, offset ) : index + offset; + if ( nextIndex >= 0 && nextIndex < focusables.length ) { focusables[ nextIndex ].focus(); onNavigate( nextIndex, focusables[ nextIndex ] ); + + // `preventDefault()` on tab to avoid having the browser move the focus + // after this component has already moved it. + if ( event.code === 'Tab' ) { + event.preventDefault(); + } } }