diff options
12 files changed, 123 insertions, 15 deletions
diff --git a/core/lib/Drupal/Core/Ajax/OpenDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenDialogCommand.php index a15eaa3211f8..c9ba3e7bb1e4 100644 --- a/core/lib/Drupal/Core/Ajax/OpenDialogCommand.php +++ b/core/lib/Drupal/Core/Ajax/OpenDialogCommand.php @@ -76,6 +76,12 @@ 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); + $dialog_options['classes']['ui-dialog'] = $dialog_options['dialogClass']; + unset($dialog_options['dialogClass']); + } + $this->selector = $selector; $this->content = $content; $this->dialogOptions = $dialog_options; diff --git a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php index 1144a189d774..a7aefb00664b 100644 --- a/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php +++ b/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 @@ 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). diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js index 783797d1a148..32367977d8c8 100644 --- a/core/misc/dialog/dialog.jquery-ui.js +++ b/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() { diff --git a/core/misc/dialog/dialog.js b/core/misc/dialog/dialog.js index 3ec4218282b2..597ffde1ddf8 100644 --- a/core/misc/dialog/dialog.js +++ b/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', diff --git a/core/modules/ckeditor5/ckeditor5.ckeditor5.yml b/core/modules/ckeditor5/ckeditor5.ckeditor5.yml index 2163e5e5915a..2a2c3fd16587 100644 --- a/core/modules/ckeditor5/ckeditor5.ckeditor5.yml +++ b/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 diff --git a/core/modules/editor/js/editor.js b/core/modules/editor/js/editor.js index cc2d1b9fff6a..b0900e99b614 100644 --- a/core/modules/editor/js/editor.js +++ b/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: [ { diff --git a/core/modules/media_library/src/MediaLibraryUiBuilder.php b/core/modules/media_library/src/MediaLibraryUiBuilder.php index 47143fcc251a..f7319244eda5 100644 --- a/core/modules/media_library/src/MediaLibraryUiBuilder.php +++ b/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%', diff --git a/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php b/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php index 00ff48ce4ec4..ac2729c5e915 100644 --- a/core/modules/system/tests/modules/dialog_renderer_test/src/Controller/TestController.php +++ b/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' => [ diff --git a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php index 7002e8066371..5b20009d2c42 100644 --- a/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php +++ b/core/modules/system/tests/src/Functional/Ajax/OffCanvasDialogTest.php @@ -47,6 +47,10 @@ class OffCanvasDialogTest extends BrowserTestBase { '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 @@ 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', diff --git a/core/modules/views/tests/modules/views_test_modal/src/Controller/TestController.php b/core/modules/views/tests/modules/views_test_modal/src/Controller/TestController.php index b89cf4081d73..84c0360b746d 100644 --- a/core/modules/views/tests/modules/views_test_modal/src/Controller/TestController.php +++ b/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'), diff --git a/core/modules/views_ui/src/Form/Ajax/ViewsFormBase.php b/core/modules/views_ui/src/Form/Ajax/ViewsFormBase.php index 78efad376097..806a96d236dd 100644 --- a/core/modules/views_ui/src/Form/Ajax/ViewsFormBase.php +++ b/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%', ]; diff --git a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php index 0da679579bbc..1ad22f8905f4 100644 --- a/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php +++ b/core/tests/Drupal/Tests/Core/Ajax/OpenOffCanvasDialogCommandTest.php @@ -34,8 +34,10 @@ class OpenOffCanvasDialogCommandTest extends UnitTestCase { '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, ], |