fix: restore old logic for getting focusable elements

[web-padawan]

Description

1. Restored the previous (Vaadin 14-23) logic for collecting focusable elements that was changed in refactor: move focus utils to component-base #3141 and added tests for handling hidden elements
2. Added tests for vaadin-accordion inside vaadin-dialog to ensure Tab works

Fixes #3410

Type of change

• Bugfix

[web-padawan]

This change causes tests to fail. I will investigate further how to handle this properly.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[web-padawan]

This check makes it work for vaadin-details and vaadin-accordion-panel: in those cases both host element and its focusElement satisfy the isElementFocused condition, so we should pick the right one.

[web-padawan]

Here is the old logic from 22.0 branch where it was previously placed:

web-components/packages/vaadin-overlay/src/vaadin-overlay.js

Lines 941 to 944 in d0f0627

	_focusedIndex(elements) {
	elements = elements || this._getFocusableElements();
	return elements.indexOf(elements.filter(this._isFocused).pop());
	}

[vaadin-bot]

This ticket/PR has been released with platform 23.0.0.beta2 and is also targeting the upcoming stable 23.0.0 version.

[knoobie]

I have an edge case here.. not sure if it's worth to be reported

I have the following structure:

dialog > accordion > accordion panel > content

In the content I've a list of buttons that, once clicked, remove itself and add a h3 with tabindex=-1, text and a back button to show the list of buttons again. Of course, to manage focus, I'm focusing the h3 for a11y compliance. Now the focus sits on the h3 with tabindex=-1 - I expect that the next tab focuses the back button.. but instead it vanishes and I need like 3 tabs to reach the back button. This can be worked around by using tabindex=0 on the header. So I'm not sure if you even wanna do anything 😅

[web-padawan]

Sounds like an edge case indeed. It's hard to say if we can make it work as expected without taking a closer look.
Feel free to create an issue with a code example, if possible, so that I could reproduce it in a web component.

[knoobie]

Created #4863 for it - really minor, I have a workarond :) Not sure if it has other implications, that I can't forsee tho.