Non-autofocused Popover not reachable by keyboard

[rolfsmeds]

What is the problem?

A Popover that is not modal or otherwise configured to automatically steal focus is inherently inaccessible by keyboard (unless some custom means of moving focus to it is provided).

A couple of solution options come to mind:

• "Tab index emulation": programmatically moving focus to the overlay when tab is pressed on the target element after opening the popover. (And moving it back to the target element after the last tab stop inside the overlay; after returning to the target element, the "tab hijacking" is no longer in effect.)
• Refactoring Popover (and other overlays) to be based on native popover (and/or <dialog>) and moving them from the dedicated overlay section at the end of the DOM to be immediate siblings of the target element, whereby the overlay's first tab stop will natively follow the target element.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[web-padawan]

"Tab index emulation": programmatically moving focus to the overlay when tab is pressed on the target element after opening the popover.

Just to clarify: this has been implemented by #7609 according to the specification from #7607.

Especially, instead of "moving it back to the target element after the last tab stop inside the overlay" we move focus to the next element in the DOM that comes after the popover target (and I believe this is how it would also work with native popover).

[rolfsmeds]

Ah, indeed, I think the reason I thought it hadn't been is that it doesn't work with the "interactive tooltip" sample in the docs, but I suppose that is because the popover actually closes on blur when you tab onwards from it? (What actually happens there is when tabbing while focus is in the field is that the popover closes but focus doesn't move anywhere – presumably due to this mechanism.)

[web-padawan]

Yes, I think the problem in that example is that it closes due to the focus trigger. I'll take a look if we can fix that.

[rolfsmeds]

I actually already created this ticket: vaadin/docs#4147

[web-padawan]

Actually, I found a bug with the Tab logic of the popover: it checks isElementFocusable(this.target) and this returns true for the native input but false for vaadin-text-field where we have focusElement as focusable instead.

So this is somewhat similar to #8703 where wrong element is used. I'll work on a fix to also check for focusElement.