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

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

@@ -76,6 +76,16 @@ class OpenDialogCommand implements CommandInterface, CommandWithAttachedAssetsIn
     $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);
+      if (isset($dialog_options['classes']['ui-dialog'])) {
+        $dialog_options['classes']['ui-dialog'] = $dialog_options['classes']['ui-dialog'] . ' ' . $dialog_options['dialogClass'];
+      }
+      else {
+        $dialog_options['classes']['ui-dialog'] = $dialog_options['dialogClass'];
+      }
+    }
+
     $this->selector = $selector;
     $this->content = $content;
     $this->dialogOptions = $dialog_options;

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

@@ -38,6 +38,15 @@ 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 = '';
+    if (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'];
+    }
+    if (isset($dialog_options['classes']['ui-dialog'])) {
+      $dialog_class = $dialog_options['classes']['ui-dialog'];
+    }
+    $dialog_options['classes']['ui-dialog'] = trim("$dialog_class 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 +54,7 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
     $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/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/editor/tests/src/Kernel/EditorImageDialogTest.php

@@ -104,7 +104,9 @@ class EditorImageDialogTest extends EntityKernelTestBase {
       ],
       'dialogOptions' => [
         'title' => 'Edit Image',
-        'dialogClass' => 'editor-image-dialog',
+        'classes' => [
+          'ui-dialog' => 'editor-image-dialog',
+        ],
         'autoResize' => 'true',
       ],
       '_drupal_ajax' => '1',

core/modules/media_library/src/MediaLibraryUiBuilder.php

@@ -89,7 +89,9 @@ class MediaLibraryUiBuilder {
    */
   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 @@ class TestController {
           '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

@@ -40,6 +40,7 @@ class OffCanvasDialogTest extends BrowserTestBase {
     // Set up variables for this test.
     $dialog_renderable = AjaxTestController::dialogContents();
     $dialog_contents = \Drupal::service('renderer')->renderRoot($dialog_renderable);
+    $dialog_class = 'ui-dialog-off-canvas ui-dialog-position-' . ($position ?: 'side');
     $off_canvas_expected_response = [
       'command' => 'openDialog',
       'selector' => '#drupal-off-canvas',
@@ -47,6 +48,7 @@ class OffCanvasDialogTest extends BrowserTestBase {
       'data' => (string) $dialog_contents,
       'dialogOptions' =>
         [
+          'classes' => ['ui-dialog' => $dialog_class, 'ui-dialog-content' => 'drupal-off-canvas-reset'],
           'title' => 'AJAX Dialog & contents',
           'modal' => FALSE,
           'autoResize' => FALSE,
@@ -54,8 +56,6 @@ class OffCanvasDialogTest extends BrowserTestBase {
           '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 @@ class TestController extends ControllerBase {
         '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 @@ abstract class ViewsFormBase extends FormBase implements ViewsFormInterface {
       $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,7 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase {
         'resizable' => 'w',
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
-        'dialogClass' => 'ui-dialog-off-canvas ui-dialog-position-' . $position,
+        'classes' => ['ui-dialog' => 'ui-dialog-off-canvas ui-dialog-position-' . $position, 'ui-dialog-content' => 'drupal-off-canvas-reset'],
-        'classes' => ['ui-dialog-content' => 'drupal-off-canvas-reset'],
         'width' => 300,
         'drupalOffCanvasPosition' => $position,
       ],