Drupal core is in the process of removing all dependencies on the end-of-life jQuery UI library. One of ways that jQuery UI is used within core is the use of the :tabbable
selector to retrieve tabbable elements within a context. The tabbable library has been added to core as core/tabbable
, as a way to achieve this functionality without the dependency on jQuery UI .
Usage is different:
Before
const tabbableElements = $(context).find(':tabbable'); // returns a jQuery object with every tabbable element found in context.
After
const tabbableElements = tabbable.tabbable(context); // returns an array of DOM nodes of every tabbable element found in context.
Tabbable has additional functionality beyond identifying tabbable elements, details of which can be found on the tabbable library API documentation.
This is accompanied by a shim, core/tabbable.jquery.shim
. With this shim, existing jQuery uses of the :tabbable
selector will use
core/tabbable
to retrieve tabbable elements. This shim was added to jQuery instead of jQuery UI as there are multiple places in core that use :tabbable without declaring jQuery Ui as a dependency, yet didn't encounter problems as there were typically other requests for jQuery UI to be available.