Try to run e2e tests with the post editor in full screen mode.

packages/e2e-test-utils-playwright/src/admin/create-new-post.ts

@@ -42,6 +42,6 @@ export async function createNewPost(
 
 	await this.editor.setPreferences( 'core/edit-post', {
 		welcomeGuide: options.showWelcomeGuide ?? false,
-		fullscreenMode: options.fullscreenMode ?? false,
+		fullscreenMode: options.fullscreenMode ?? true,
 	} );
 }

packages/e2e-test-utils-playwright/src/admin/edit-post.ts

@@ -19,6 +19,6 @@ export async function editPost( this: Admin, postId: string | number ) {
 
 	await this.editor.setPreferences( 'core/edit-post', {
 		welcomeGuide: false,
-		fullscreenMode: false,
+		fullscreenMode: true,
 	} );
 }

test/e2e/specs/editor/various/a11y.spec.js

@@ -38,13 +38,24 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
 		// Navigate to the 'Editor top bar' region.
 		await pageUtils.pressKeys( 'ctrl+`' );
 
-		// This test assumes the Editor is not in Fullscreen mode. Check the
-		// first tabbable element within the 'Editor top bar' region is the
-		// 'Block Inserter' button.
 		await pageUtils.pressKeys( 'Tab' );
-		await expect(
-			page.locator( 'role=button[name=/Block Inserter/i]' )
-		).toBeFocused();
+
+		const isFullScreenMode = await page.evaluate( () => {
+			return window.wp.data
+				.select( 'core/edit-post' )
+				.isFeatureActive( 'fullscreenMode' );
+		} );
+		// When full screen mode is enabled, check the first tabbable element
+		// within the 'Editor top bar' region is the 'View Posts' link otherwise
+		// check it's the 'Block Inserter' button.
+		// When running this test locally, make sure that in macOS webkit (Safari)
+		// links are focusable and tabbable by setting the related preferences at
+		// system and browser level.
+		const elementToTest = isFullScreenMode
+			? 'role=link[name=/View Posts/i]'
+			: 'role=button[name=/Block Inserter/i]';
+
+		await expect( page.locator( elementToTest ) ).toBeFocused();
 	} );
 
 	test( 'should constrain tabbing within a modal', async ( {

test/e2e/specs/editor/various/fullscreen-mode.spec.js

@@ -4,36 +4,95 @@
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Fullscreen Mode', () => {
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.createNewPost();
+		await editor.setPreferences( 'core/edit-post', {
+			fullscreenMode: false,
+		} );
 	} );
 
-	test.afterEach( async ( { requestUtils } ) => {
+	test.afterEach( async ( { requestUtils, editor } ) => {
 		await requestUtils.deleteAllPosts();
+		await editor.setPreferences( 'core/edit-post', {
+			fullscreenMode: true,
+		} );
 	} );
 
-	test( 'should open the fullscreen mode from the more menu', async ( {
+	test( 'should open and close the fullscreen mode from the more menu', async ( {
 		page,
 	} ) => {
 		// Open Options Menu
 		await page.click(
 			'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
 		);
 
-		// Select Full Screen Mode
-		await page
-			.locator( 'role=menuitemcheckbox', { hasText: 'Fullscreen mode' } )
-			.click();
+		const body = page.locator( 'body' );
 
-		// Check the body class.
-		await expect( page.locator( 'body' ) ).toHaveClass(
-			/is-fullscreen-mode/
-		);
+		const fullScreenCheckbox = page
+			.getByRole( 'menuitemcheckbox' )
+			.filter( { hasText: 'Fullscreen mode' } );
+
+		const viewPostsLink = page.getByRole( 'link', {
+			name: 'View Posts',
+		} );
+
+		// Select Full Screen Mode.
+		await fullScreenCheckbox.click();
+
+		// Check the body does have the CSS class.
+		await expect( body ).toHaveClass( /is-fullscreen-mode/ );
+
+		// Check the View Posts link is visible.
+		await expect( viewPostsLink ).toBeVisible();
+
+		// Unselect Full Screen Mode.
+		await fullScreenCheckbox.click();
+
+		// Check the body does not have the CSS class.
+		await expect( body ).not.toHaveClass( /is-fullscreen-mode/ );
+
+		// Check the View Posts link is not visible.
+		await expect( viewPostsLink ).toBeHidden();
+	} );
+
+	test( 'should open and close the fullscreen mode via the keyboard shortcut', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		const body = page.locator( 'body' );
+
+		const viewPostsLink = page.getByRole( 'link', {
+			name: 'View Posts',
+		} );
+
+		// Emulates CTRL+Shift+Alt + F
+		await pageUtils.pressKeys( 'secondary+F' );
+
+		// Check the body does have the CSS class.
+		await expect( body ).toHaveClass( /is-fullscreen-mode/ );
+
+		// Check the View Posts link is visible.
+		await expect( viewPostsLink ).toBeVisible();
+
+		await expect(
+			page
+				.getByRole( 'button', { name: 'Dismiss this notice' } )
+				.filter( { hasText: 'Fullscreen mode activated' } )
+		).toBeVisible();
+
+		// Emulates CTRL+Shift+Alt + F
+		await pageUtils.pressKeys( 'secondary+F' );
+
+		// Check the body does not have the CSS class.
+		await expect( body ).not.toHaveClass( /is-fullscreen-mode/ );
+
+		// Check the View Posts link is not visible.
+		await expect( viewPostsLink ).toBeHidden();
 
 		await expect(
-			page.locator(
-				'role=region[name="Editor top bar"i] >> role=link[name="View Posts"i]'
-			)
+			page
+				.getByRole( 'button', { name: 'Dismiss this notice' } )
+				.filter( { hasText: 'Fullscreen mode deactivated' } )
 		).toBeVisible();
 	} );
 } );