Fix tabbing from first or last block in site editor

packages/dom/src/dom/is-form-element.js

@@ -12,6 +12,10 @@ import isInputOrTextArea from './is-input-or-text-area';
  * @return {boolean} True if form element and false otherwise.
  */
 export default function isFormElement( element ) {
+	if ( ! element ) {
+		return false;
+	}
+
 	const { tagName } = element;
 	const checkForInputTextarea = isInputOrTextArea( element );
 	return (

test/e2e/specs/site-editor/writing-flow.spec.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
+} );
+
+test.describe( 'Site editor writing flow', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/41811.
+	test( 'allows shift tabbing to the block toolbar from the first block', async ( {
+		admin,
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Navigate to a template part with only a couple of blocks.
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+		} );
+
+		// Select the first site title block.
+		const siteTitleBlock = editor.canvas.locator(
+			'role=document[name="Block: Site Title"i]'
+		);
+		await expect( siteTitleBlock ).toBeVisible();
+		await editor.selectBlocks( siteTitleBlock );
+
+		// Shift tab to the toolbar.
+		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		const blockToolbarButton = page.locator(
+			'role=toolbar[name="Block tools"i] >> role=button[name="Site Title"i]'
+		);
+		await expect( blockToolbarButton ).toBeFocused();
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/41811.
+	test( 'allows tabbing to the inspector from the last block', async ( {
+		admin,
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Navigate to a template part with only a couple of blocks.
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+		} );
+
+		// Make sure the sidebar is open.
+		await editor.openDocumentSettingsSidebar();
+
+		// Select the last site tagline block.
+		const siteTaglineBlock = editor.canvas.locator(
+			'role=document[name="Block: Site Tagline"i]'
+		);
+		await expect( siteTaglineBlock ).toBeVisible();
+		await editor.selectBlocks( siteTaglineBlock );
+
+		// Tab to the inspector, tabbing three times to go past the two resize handles.
+		await pageUtils.pressKeyTimes( 'Tab', 3 );
+		const inspectorTemplateTab = page.locator(
+			'role=region[name="Editor settings"i] >> role=button[name="Template"i]'
+		);
+		await expect( inspectorTemplateTab ).toBeFocused();
+	} );
+} );