Problem/Motivation
We are in the process of deprecating jQuery UI in core. jQueryUI dialog is among the components that need to be removed/replaced.
As mentioned in the parent issue: #3067261: [Plan] Remove jQuery UI components used by Drupal core and replace with a set of supported solutions
The OpenJS Foundation lists jQuery UI as an Emeritus project in https://openjsf.org/projects/ which is described as:
Emeritus projects are those which the maintainers feel have reached or are nearing end-of-life
This issue was originally proposed as specifically looking for a polyfill, with the following explanation:
dialog.js always aimed at using the HTML5 dialog spec. Chrome just added experimental support for dialogs in it's dev branch: http://demo.agektmr.com/dialog/
As time has moved on, it looks like a polyfill is not necessary.
We should let chrome use native dialogs when needed, it actually solves a bunch of messy issues, two of which are:
#2072037: Drupal dialog modal background z-index is set too low to reliably occlude core UI components
#1836392: In the Views UI, the interaction pattern of “All displays”/ “Override this display” is confusing
The problems mentioned above should absolutely be considered wile investigating what to use in place of jQueryUI dialog, but the options should be expanded to include different libraries - whatever option can best facilitate removing jQuery UI.
Proposed resolution
Add a native dialog element to the render API.
Add Umami/Claro/Olivero theme support
Convert existing core usages of jQuery UI dialog to use the native dialog.
Deprecate the jQuery UI dialog for removal in Drupal 11 or 12.
Remaining tasks
List of libraries assessed prior to the decision to use native dialogs:
If we are fortunate enough to find multiple libraries that meet these requirements, they should be compared using criteria such as: Code Style, Maturity, Responsiveness, Accessibility, UX, UI, Modularity, etc.
Libraries reviewed so far:
Tingle - https://robinparisi.github.io/tingle/Missing requirement #2Micromodal https://micromodal.now.sh/Missing requirement #2Jquery Modal https://github.com/kylefox/jquery-modal : modal onlyMissing requirement #2Vex https://github.com/HubSpot/vex : modal onlyMissing requirement #2Rmodal - https://rmodal.js.org/ : modal onlyMissing requirement #2Van11y dialog https://van11y.net/downloads/modal/demo/index.html - no way to open/close via JS, it's all tied to input elements.Missing requirement #1a11y dialog http://edenspiekermann.github.io/a11y-dialog/example/Missing requirement #1- Nyro modal (jquery) http://nyromodal.nyrodev.com/ : Meets the requirements but hasn't been updated since 2014.
- JqModal http://jquery.iceburg.net/jqModal/#where : Meets the requirements and even has a companion resize library. Hasn't been updated since 2016
Deque Cauldron pattern library - https://github.com/dequelabs/pattern-library. (Demos at https://pattern-library.dequelabs.com/composites/modals).Missing requirements #1 and #2. Unsure about #3. Reviewed in #26.- sweetalert2 https://sweetalert2.github.io/: Needs review
.
Libraries to review
- GoogleChrome/dialog-polyfill. Initial review in #12, needs another review to answer all the requirements.
Implement the library
Add additional tests for important dialog use cases that aren't part of existing coverage. Before doing this review Layout Builder's test coverage as it indirectly tests a wide variety of Dialog use cases.
User interface changes
Yes, TBD.
API changes
TBD.
Data model changes
Release notes snippet
Attached is the patched used to make the following work (minus the scrolling element, that's hardcoded CSS).
What needs to be done is making sure our API can handle native dialogs when available and that pretty much means we need to not use jQuery UI or in a very different way than today to avoid wildly different UX between native and polyfill.
