DOM: tabbable throws an error while editor in Select Mode

[ramonjd]

Description

When tabbing through elements in the Post Editor, tabbable.js throws an error when it cannot find a target element in its "focusable" array, which is an array of elements that are eligible for focus.

The issue came to light in #35655. Props to @andrewserong for first documenting it.

As far as I can see, the error is thrown in tabbable.js because the focussed element doesn't appear in the array of focusable elements.

The index therefore is -1.

So when I logged things out like

	if ( index > -1 ) {
		focusables.length = index;
	} else {
		console.log( 'element index', element, index );
	}

The element is, more often than not, .block-selection-button_select-button, and this only happens when I enable select mode (hitting Esc in the editor).

Step-by-step reproduction instructions

1. Open the Post Editor, preferably with a post that has a few blocks
2. Enter Select Mode by hitting the Esc key. You'll know you're in Select mode when the block controls toolbar turns to black.
3. Now open the Block Editor List View.
4. Start tabbing around.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.8.1
• Gutenberg (trunk) as of November 25, 2021
• Chrome, Firefox, Safari

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

[alexstine]

@ramonjd Is this still valid? I thought I remembered a PR that fixed this.

[ramonjd]

Is this still valid? I thought I remembered a PR that fixed this.

Thanks for the ping @alexstine

Looks like this was resolved by #38961