Issue #3296098 by catch, finnsky, smustgrave: Removal :tabbable usage in dialog.js (66c3914d) · Commits · project / drupal

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

+6 −0

Original line number	Diff line number	Diff line
		@@ -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

+16 −3

Original line number	Diff line number	Diff line
		@@ -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

+76 −0

Original line number	Diff line number	Diff line
		@@ -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

+0 −2

Original line number	Diff line number	Diff line
		@@ -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

+2 −1

Original line number	Diff line number	Diff line
		@@ -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