Site editor: Site icon moves off-screen when tabbing through the UI

[afercia]

Description

Turns out the addition of the 'View site' link to the site hub in the site editor, see #50420, broke the layout when tabbing with teh keyboard trough the UI. See animated GIF:

When the navigation panel is closed, the 'View site' link is stil focusable and can be tabbed to. Instead, I think it should not be rendered. It should work like the 'Open command center' button, which is rendered conditionally only in the 'view' mode. See

gutenberg/packages/edit-site/src/components/site-hub/index.js

Lines 159 to 175 in b30e1ef

	<Button
	href={ homeUrl }
	target="_blank"
	label={ __( 'View site' ) }
	aria-label={ __( 'View site (opens in a new tab)' ) }
	icon={ external }
	className="edit-site-site-hub__site-view-link"
	/>
	</HStack>
	{ canvasMode === 'view' && (
	<Button
	className="edit-site-site-hub_toggle-command-center"
	icon={ search }
	onClick={ () => openCommandCenter() }
	label={ __( 'Open command center' ) }
	/>
	) }

Cc @glendaviesnz

Step-by-step reproduction instructions

• Go to the Site editor.
• Use the Tab key to navigate to the canvas overlay.
• Press Enter to switch the editor to Edit mode.
• Press the Tab key once: focus goes to the first block. Not sure this is OK but it's a separate issue.
• Keep pressing the Tab key to navigate through the entire UI and start from scratch.
• Or Press Shift + Tab to navigate backwards.
• Observe that the 'View site' link is still focusable. It stays not visible, only the tooltip is visible.
• Observe that when the 'View site' link receives focus, the Site icon button moves off-screen and the layout breaks.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[glendaviesnz]

Thanks @afercia for spotting this and suggesting a fix. I have added a PR here.