Site Editor: Navigation panel items are focusable when hidden

[creativecoder]

Description

When using keyboard navigation within the site editor in full screen mode, the navigation panel items are still focusable, even when hidden.

This makes it unclear where focus is located and creates several extra tab presses to navigate the header controls.

Step-by-step reproduction instructions

1. Load the site editor, and make sure it is in full screen mode (on by default, can be toggled in the "More menu" at the top left)
2. Start tabbing through the page
3. Notice that in between the "W" menu and the block inserter "+", there are several steps where focus is not visually indicated.

Expected behaviour

Focus goes directly from "W" to "+" when tabbing.

Actual behaviour

Focus is captured by hidden elements

Screenshots or screen recording (optional)

Note how the focused element (document.activeElement) is not visible on the screen.

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: 10.1.0-rc.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes (TT1 Blocks)

Device information

• Device: Desktop
• Operating system: macOS
• Browser: Firefox and Chrome

[Quintis1212]

Hello ) I think I can fix this )

[Quintis1212]

Hello I created prototype which set tabindex to -1 to all inner elements , but its working only after nav was open and then closed :
path gutenberg/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
`

               const rootElem = document.getElementById("root-elem")

	function recursiveTab (node){

	const	childListEl = node.childNodes

			childListEl.forEach(function(item){
				console.log(item)

			if (item.setAttribute ){
				item.setAttribute("tabindex","-1");
			}

			if (item.hasChildNodes()){
				return recursiveTab(item)
			}
			});
	}

	if ( rootElem && rootElem.childNodes){
		recursiveTab(rootElem)
	}

`

		<div className="edit-site-navigation-panel__inner"  id="root-elem">
			<div className="edit-site-navigation-panel__site-title-container">
				<div className="edit-site-navigation-panel__site-title">
					{ siteTitle }
				</div>
			</div>`

`

Can any one help me to improve function ?)

[creativecoder]

Some context I've picked up since opening this issue: there's a performance concern with re-rendering the navigation panel when it's opened, which is why it's hidden, but still rendered, when closed.

I think the simplest way to handle this issue is going to be applying the css rule display: none when the navigation panel is closed... this should prevent it from receiving focus.

[Quintis1212]

@creativecoder thank you for help ) your way is simpler