Popover (and Dropdown) needs a way to set initial focus depending on its usage or content

[afercia]

Let's consider, for example, the "Content Structure" component (formerly "Table of Contents"). When clicking the toggle button that opens it, focus is moved to the first heading in the Document Outline. However, posts may have no headings at all:

In this case, there's no element to move focus to and a focus loss occurs. Press Tab again and focus fallbacks to the document root:

Additionally, even if there were headings, all the first part of the content (the "counts") is skipped and users of assistive technologies would have to explore content backwards to get the counts.

In this specific case, the initial focus should probably be moved to the Popover container, and the container should be properly labeled.

However, initial focus really depends on the content of the component. There might be cases where it would make sense to set the initial focus on a different element, for example an input field in a form with a very specific task to accomplish.

Since we can't predict which kind of content this component will be used for, the initial focus should be different depending on the specific component usage. I'd rather consider a way to set the initial focus via a prop, to pass in some way the element that should receive focus.

[grahamarmfield]

The Content Structure component now does get focus when the button is actioned. However, the focus is not at all visible which is an issue for sighted keyboard users - since it appears that focus has gone 'missing'. Is there a need for a separate issue on that.

As @afercia noted above, a further pressing of tab actually puts focus at the top of the document.

Additionally, if I happened to press shift-tab (reverse tab) focus then moves directly to the last focussable element in the block details sidebar.

Thus the Content Structure panel is not acting as a modal. Focus should be trapped in this element until the user wishes to dismiss the popup. I know the Escape key works here, but people may try other keys.

[afercia]

Totally agree thanks @grahamarmfield (hi!). About constraining tabbing, there's #5242

[noisysocks]

We should now be able to do this by setting focusOnMount="container" on the Popover.

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/popover/README.md#focusonmount

[afercia]

Yep also, the document statistics section is now focusable and uses role="note" aria-label="Document Statistics" tabindex="0" so it gets focused. There's also the new focusOnMount behavior to help with these cases so I'm going to close this issue.