diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 03cb5858020789..045cdbfc84a533 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -12,7 +12,6 @@ import { computeCaretRect, focus, isHorizontalEdge, - isTextField, isVerticalEdge, placeCaretAtHorizontalEdge, placeCaretAtVerticalEdge, @@ -34,9 +33,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { - isBlockFocusStop, isInSameBlock, - hasInnerBlocksContext, isInsideRootBlock, getBlockDOMNode, getBlockClientId, @@ -115,12 +112,17 @@ export function getClosestTabbable( targetRect = target.getBoundingClientRect(); } - function isTabCandidate( node, i, array ) { + function isTabCandidate( node ) { // Not a candidate if the node is not tabbable. if ( ! focus.tabbable.isTabbableIndex( node ) ) { return false; } + // Skip focusable elements such as links within content editable nodes. + if ( node.isContentEditable && node.contentEditable !== 'true' ) { + return false; + } + if ( onlyVertical ) { const nodeRect = node.getBoundingClientRect(); @@ -132,48 +134,6 @@ export function getClosestTabbable( } } - // Prefer text fields... - if ( isTextField( node ) ) { - return true; - } - - // ...but settle for block focus stop. - if ( ! isBlockFocusStop( node ) ) { - return false; - } - - // If element contains inner blocks, stop immediately at its focus - // wrapper. - if ( hasInnerBlocksContext( node ) ) { - return true; - } - - // If navigating out of a block (in reverse), don't consider its - // block focus stop. - if ( node.contains( target ) ) { - return false; - } - - // In case of block focus stop, check to see if there's a better - // text field candidate within. - for ( - let offset = 1, nextNode; - ( nextNode = array[ i + offset ] ); - offset++ - ) { - // Abort if no longer testing descendents of focus stop. - if ( ! node.contains( nextNode ) ) { - break; - } - - // Apply same tests by recursion. This is important to consider - // nestable blocks where we don't want to settle for the inner - // block focus stop. - if ( isTabCandidate( nextNode, i + offset, array ) ) { - return false; - } - } - return true; } diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 4f9c971ccd0771..248587311d1d2b 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -31,18 +31,6 @@ export function getBlockPreviewContainerDOMNode( clientId, doc ) { return domNode.firstChild || domNode; } -/** - * Returns true if the given element is a block focus stop. Blocks without their - * own text fields rely on the focus stop to be keyboard navigable. - * - * @param {Element} element Element to test. - * - * @return {boolean} Whether element is a block focus stop. - */ -export function isBlockFocusStop( element ) { - return element.classList.contains( 'block-editor-block-list__block' ); -} - /** * Returns true if two elements are contained within the same block. * @@ -73,21 +61,6 @@ export function isInsideRootBlock( blockElement, element ) { return parentBlock === blockElement; } -/** - * Returns true if the given element contains inner blocks (an InnerBlocks - * element). - * - * @param {Element} element Element to test. - * - * @return {boolean} Whether element contains inner blocks. - */ -export function hasInnerBlocksContext( element ) { - return ( - element.classList.contains( 'block-editor-block-list__layout' ) || - !! element.querySelector( '.block-editor-block-list__layout' ) - ); -} - /** * Finds the block client ID given any DOM node inside the block. * diff --git a/packages/block-editor/src/utils/test/dom.js b/packages/block-editor/src/utils/test/dom.js deleted file mode 100644 index b755f74bcb899f..00000000000000 --- a/packages/block-editor/src/utils/test/dom.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Internal dependencies - */ -import { hasInnerBlocksContext } from '../dom'; - -describe( 'hasInnerBlocksContext()', () => { - it( 'should return false for a block node which has no inner blocks', () => { - const wrapper = document.createElement( 'div' ); - wrapper.innerHTML = - '
This is a test.
' + - '