Navigation block: unable to explore block settings moving with Tab key

[talksina]

Description

In Gutenberg's block editor, when adding a Navigation block to insert a menu in the content, the single menu items have a serious keyboard issue: tabbing through settings, brings the focus back to the content.
Expected result: after adding a menu item in a Navigation block, pressing the Tab key on the selected menu item just added, should take keyboard focus to the single block's settings: link text, title attribute, rel attribute, advanced...
Current result: pressing Tab, after reaching the collapsible button "block settings", takes to a control called "drag to resize", which is in the block's content. It might be a tabindexing bug. Happens with all screen readers (Jaws for Windows, NVDA, VoiceOver)...

Step-by-step reproduction instructions

0. Pre-requirements: test it with or without screen readers, pressing the Tab key. Jaws and NVDA for Windows must be tested both with and without virtual cursor for Jaws (jawskey plus z) or focus mode (NVDA key plus space) for NVDA. Test it by adding the block in contents or templates.
1. Create a blank content -post, page, template...-
2. Add a Navigation block, and create a blank menu from it.
3. Add a new menu item. Page link, post link, custom link or whatever is the same. Affecting both parent menu items and child menu items in submenus. Affects also menus without any submenu.
4. Select (with arrow keys) the block you have just added. Let's assume the link's called "about us".
5. Once on the "about us" link text or block, press the Tab key. You should go smoothly until "block settings" collapsible button.
6. One more tab, and keyboard focus will land on the "drag to resize" item. That's not the way it should work, tab should focus all the settings as it does in other blocks. Only workaround found is to turn focus mode off, or virtual mode on, going through the editor as a readable Word document and access the setting manually using the "search in page" screen reader command.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.5.2, Gutenberg 18.2 stable. Windows 11 with Jaws for Windows 2024, then NVDA 2024.1. Theme used: default WordPress theme, twenty-twentyfour. Browsers: latest Chrome, latest Edge, Safari. On iOS 17.4 with VoiceOver, block's settings are not accessible at all. Devices used: Microsoft Surface Pro with Windows 11, iPhone 13 pro max with iOS 17.4 landscape and portrait mode, iPad Mini 6 with iPadOS17.4 landscape and portrait mode with VoiceOver screen reader, both with and without hardware keyboard connected.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

Thanks for reporting this. I see slightly different behavior ('drag to resize' doesn't seem to become focused), but on the whole have the same bug, so what I describe below might be slightly different.

I think it's something that happens when interacting with the 'Text' input in the block's sidebar, it causes the block's content to be replaced in the DOM.

When blurring that field, the RichText contenteditable is re-inserted into the DOM, and it might be autofocusing somehow.

With Voiceover active, it happens as soon as I tab into the 'Text' input, without it active it happens when I blur the input.

Here's the relevant code:

gutenberg/packages/block-library/src/navigation-link/edit.js

Lines 174 to 175 in 314beb7

	onFocus={ () => setIsLabelFieldFocused( true ) }
	onBlur={ () => setIsLabelFieldFocused( false ) }

gutenberg/packages/block-library/src/navigation-link/edit.js

Lines 503 to 535 in 314beb7

	! isLabelFieldFocused && (
	<>
	<RichText
	ref={ ref }
	identifier="label"
	className="wp-block-navigation-item__label"
	value={ label }
	onChange={ ( labelValue ) =>
	setAttributes( {
	label: labelValue,
	} )
	}
	onMerge={ mergeBlocks }
	onReplace={ onReplace }
	__unstableOnSplitAtEnd={ () =>
	insertBlocksAfter(
	createBlock(
	'core/navigation-link'
	)
	)
	}
	aria-label={ __(
	'Navigation link text'
	) }
	placeholder={ itemLabelPlaceholder }
	withoutInteractiveFormatting
	allowedFormats={ [
	'core/bold',
	'core/italic',
	'core/image',
	'core/strikethrough',
	] }
	/>

[alexstine]

I could not reproduce this in Firefox, browser specific?

[talksina]

Found it in Chrome and Edge. Go to "edit mode" from the newly added menu item, then tab after the "block settings". Where you find "block" and "styles" tabs. Go ahead with Tab key, I think you won't reach the element's attributes. If you have it on, turn virtual cursor off. Or focus mode on, with NVDA. Don't know VoiceOver as I no longer have a mac with me.

[alexstine]

@talksina Finally figured out how to reproduce this. I made a fix but it's fairly complicated. Let's see if I can get it reviewed.

@talldan You were on the right track but that wasn't it. Please see my PR.

#61374

It appears you found the attempted patch but not the fix. Essentially, the fix did not work I think because the re-rendering onBlur also takes focus. Either that or onChange is picking up the tab out of the input.

Thanks.

[talksina]

Seems fixed in 18.3.0 but needs further tests from other users/devs. Please check it out

[alexstine]

@talksina I can still reproduce the bug in Firefox. Still awaiting PR reviews... 😞