details tag in jQuery UI dialog not reachable via tab

[DanielRuf]

It seems there is a whitelist of tabbable html elements / tags, and <details> is not one of them.

That leads to the case, where any <details> can not be reached via tab in a jQuery UI dialog.

Relevant code parts:
https://github.com/jquery/jquery-ui/blob/main/ui/focusable.js#L45

https://github.com/jquery/jquery-ui/blob/main/ui/tabbable.js#L34

A workaround is to manually (or via some observer / listener / callback function in JavaScript) add tabindex="0" to any <details> and other elements missing in the list from the second code part. Not very elegant and a bit cumbersome, but adding the tabindex="0" at least fixes this accessibility problem.

[DanielRuf]

Mh, seems jQuery UI adds some more logic from

jquery-ui/external/jquery-3.7.0/jquery.js

Line 5367 in 08b7044

} else if ( ( jQuery.event.special[ type ] || {} ).delegateType ) {

when I add tabindex="0" to an element like <details>, which breaks the native event handler (enter, space) on these elements.

At least it seems so.