Issue #3296098 by catch, finnsky, smustgrave: Removal :tabbable usage in dialog.js

core/lib/Drupal/Core/Ajax/OpenDialogCommand.php

@@ -76,6 +76,12 @@ public function __construct($selector, string|\Stringable|null $title, $content,
     $title = PlainTextOutput::renderFromHtml($title);
 
     $dialog_options += ['title' => $title];
+    if (isset($dialog_options['dialogClass'])) {
+      @trigger_error('Passing $dialog_options[\'dialogClass\'] to OpenDialogCommand::__construct() is deprecated in drupal:10.3.0 and will be removed in drupal:12.0.0. Use $dialog_options[\'classes\'] instead. See https://www.drupal.org/node/3440844', E_USER_DEPRECATED);
+      $dialog_options['classes']['ui-dialog'] = $dialog_options['dialogClass'];
+      unset($dialog_options['dialogClass']);
+    }
+
     $this->selector = $selector;
     $this->content = $content;
     $this->dialogOptions = $dialog_options;

core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php

@@ -38,6 +38,21 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
    *   (optional) The position to render the off-canvas dialog.
    */
   public function __construct(string|\Stringable|null $title, $content, array $dialog_options = [], $settings = NULL, $position = 'side') {
+    $dialog_class = FALSE;
+    if (isset($dialog_options['classes']['ui-dialog'])) {
+      $dialog_class = $dialog_options['classes']['ui-dialog'];
+    }
+    elseif (isset($dialog_options['dialogClass'])) {
+      @trigger_error('Passing $dialog_options[\'dialogClass\'] to OpenOffCanvasDialogCommand::__construct() is deprecated in drupal:10.3.0 and will be removed in drupal:12.0.0. Use $dialog_options[\'classes\'] instead. See https://www.drupal.org/node/3440844', E_USER_DEPRECATED);
+      $dialog_class = $dialog_options['dialogClass'];
+      unset($dialog_options['dialogClass']);
+    }
+    if ($dialog_class) {
+      $dialog_options['classes']['ui-dialog'] = $dialog_class . ' ' . "ui-dialog-off-canvas ui-dialog-position-$position";
+    }
+    else {
+      $dialog_options['classes']['ui-dialog'] = "ui-dialog-off-canvas ui-dialog-position-$position";
+    }
     parent::__construct('#drupal-off-canvas', $title, $content, $dialog_options, $settings);
     $this->dialogOptions['modal'] = FALSE;
     $this->dialogOptions['autoResize'] = FALSE;
@@ -45,9 +60,7 @@ public function __construct(string|\Stringable|null $title, $content, array $dia
     $this->dialogOptions['draggable'] = FALSE;
     $this->dialogOptions['drupalAutoButtons'] = FALSE;
     $this->dialogOptions['drupalOffCanvasPosition'] = $position;
-    if (empty($dialog_options['dialogClass'])) {
-      $this->dialogOptions['dialogClass'] = "ui-dialog-off-canvas ui-dialog-position-$position";
-    }
+
     // Add CSS class to #drupal-off-canvas element. This enables developers to
     // select previous versions of off-canvas styles by using custom selector:
     // #drupal-off-canvas:not(.drupal-off-canvas-reset).

core/misc/dialog/dialog.jquery-ui.js

@@ -30,6 +30,82 @@
         $buttons.eq(index).addClass(opts.buttonPrimaryClass);
       }
     },
+    _createWrapper() {
+      this.uiDialog = $('<div>')
+        .hide()
+        .attr({
+          // Setting tabIndex makes the div focusable
+          tabIndex: -1,
+          role: 'dialog',
+        })
+        .appendTo(this._appendTo());
+
+      this._addClass(
+        this.uiDialog,
+        'ui-dialog',
+        'ui-widget ui-widget-content ui-front',
+      );
+      this._on(this.uiDialog, {
+        keydown(event) {
+          if (
+            this.options.closeOnEscape &&
+            !event.isDefaultPrevented() &&
+            event.keyCode &&
+            event.keyCode === $.ui.keyCode.ESCAPE
+          ) {
+            event.preventDefault();
+            this.close(event);
+            return;
+          }
+
+          // Prevent tabbing out of dialogs
+          if (
+            event.keyCode !== $.ui.keyCode.TAB ||
+            event.isDefaultPrevented()
+          ) {
+            return;
+          }
+
+          const tabbableElements = tabbable(this.uiDialog[0]);
+          if (tabbableElements.length) {
+            const first = tabbableElements[0];
+            const last = tabbableElements[tabbableElements.length - 1];
+
+            if (
+              (event.target === last || event.target === this.uiDialog[0]) &&
+              !event.shiftKey
+            ) {
+              this._delay(function () {
+                $(first).trigger('focus');
+              });
+              event.preventDefault();
+            } else if (
+              (event.target === first || event.target === this.uiDialog[0]) &&
+              event.shiftKey
+            ) {
+              this._delay(function () {
+                $(last).trigger('focus');
+              });
+              event.preventDefault();
+            }
+          }
+        },
+        mousedown(event) {
+          if (this._moveToTop(event)) {
+            this._focusTabbable();
+          }
+        },
+      });
+
+      // We assume that any existing aria-describedby attribute means
+      // that the dialog content is marked up properly
+      // otherwise we brute force the content as the description
+      if (!this.element.find('[aria-describedby]').length) {
+        this.uiDialog.attr({
+          'aria-describedby': this.element.uniqueId().attr('id'),
+        });
+      }
+    },
     // Override jQuery UI's `_focusTabbable()` so finding tabbable elements uses
     // the core/tabbable library instead of jQuery UI's `:tabbable` selector.
     _focusTabbable() {

core/misc/dialog/dialog.js

@@ -12,14 +12,12 @@
    * @type {object}
    *
    * @prop {boolean} [autoOpen=true]
-   * @prop {string} [dialogClass='']
    * @prop {string} [buttonClass='button']
    * @prop {string} [buttonPrimaryClass='button--primary']
    * @prop {function} close
    */
   drupalSettings.dialog = {
     autoOpen: true,
-    dialogClass: '',
     // Drupal-specific extensions: see dialog.jquery-ui.js.
     buttonClass: 'button',
     buttonPrimaryClass: 'button--primary',

core/modules/ckeditor5/ckeditor5.ckeditor5.yml

@@ -820,8 +820,9 @@ media_library_mediaLibrary:
             name: Drupal.ckeditor5.openDialog
             invoke: false
         dialogSettings:
+          classes:
+            ui-dialog: media-library-widget-modal
           height: 75%
-          dialogClass: media-library-widget-modal
   drupal:
     label: Media Library
     elements: false

core/modules/editor/js/editor.js

@@ -137,7 +137,9 @@
       );
       const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
         title: Drupal.t('Change text format?'),
-        dialogClass: 'editor-change-text-format-modal',
+        classes: {
+          'ui-dialog': 'editor-change-text-format-modal',
+        },
         resizable: false,
         buttons: [
           {

core/modules/media_library/src/MediaLibraryUiBuilder.php

@@ -89,7 +89,9 @@ public function __construct(EntityTypeManagerInterface $entity_type_manager, Req
    */
   public static function dialogOptions() {
     return [
-      'dialogClass' => 'media-library-widget-modal',
+      'classes' => [
+        'ui-dialog' => 'media-library-widget-modal',
+      ],
       'title' => t('Add or select media'),
       'height' => '75%',
       'width' => '75%',

core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php

@@ -126,7 +126,9 @@ public function linksDisplay() {
           'class' => ['use-ajax'],
           'data-dialog-type' => 'modal',
           'data-dialog-options' => Json::encode([
-            'dialogClass' => 'no-close',
+            'classes' => [
+              'ui-dialog' => 'no-close',
+            ],
           ]),
         ],
         '#attached' => [

core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php

@@ -47,6 +47,10 @@ public function testDialog($position) {
       'data' => (string) $dialog_contents,
       'dialogOptions' =>
         [
+          'classes' => [
+            'ui-dialog' => 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side'),
+            'ui-dialog-content' => 'drupal-off-canvas-reset',
+          ],
           'title' => 'AJAX Dialog & contents',
           'modal' => FALSE,
           'autoResize' => FALSE,
@@ -54,8 +58,6 @@ public function testDialog($position) {
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
           'drupalOffCanvasPosition' => $position ?: 'side',
-          'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side'),
-          'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
           'width' => 300,
         ],
       'effect' => 'fade',

core/modules/views/tests/modules/views_test_modal/src/Controller/TestController.php

@@ -22,7 +22,9 @@ public function modal() {
         'class' => ['use-ajax'],
         'data-dialog-type' => 'modal',
         'data-dialog-options' => Json::encode([
-          'dialogClass' => 'views-test-modal',
+          'classes' => [
+            'ui-dialog' => 'views-test-modal',
+          ],
           'height' => '50%',
           'width' => '50%',
           'title' => $this->t('Administer content'),

core/modules/views_ui/src/Form/Ajax/ViewsFormBase.php

@@ -244,7 +244,9 @@ protected function ajaxFormWrapper($form_class, FormStateInterface &$form_state)
       $display .= $output;
 
       $options = [
-        'dialogClass' => 'views-ui-dialog js-views-ui-dialog',
+        'classes' => [
+          'ui-dialog' => 'views-ui-dialog js-views-ui-dialog',
+        ],
         'width' => '75%',
       ];
 

core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php

@@ -34,8 +34,10 @@ public function testRender($position) {
         'resizable' => 'w',
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
-        'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
-        'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
+        'classes' => [
+          'ui-dialog' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
+          'ui-dialog-content' => 'drupal-off-canvas-reset',
+        ],
         'width' => 300,
         'drupalOffCanvasPosition' => $position,
       ],