Revert "Issue #3359494 by bnjmnm, lauriii, hooroomoo: Focus is lost on dialog close if the opener is inside a collapsible element"
This reverts commit d6bb0067c9.
merge-requests/4045/head
Lauri Eskola
parent
d6bb0067c9
commit
4730f5b6bd
|
|
@ -3,7 +3,7 @@
|
|||
* Extends the Drupal AJAX functionality to integrate the dialog API.
|
||||
*/
|
||||
|
||||
(function ($, Drupal, { focusable }) {
|
||||
(function ($, Drupal) {
|
||||
/**
|
||||
* Initialize dialogs for Ajax purposes.
|
||||
*
|
||||
|
|
@ -46,27 +46,6 @@
|
|||
// Overwrite the close method to remove the dialog on closing.
|
||||
settings.dialog.close = function (event, ...args) {
|
||||
originalClose.apply(settings.dialog, [event, ...args]);
|
||||
// Check if the opener element is inside an AJAX container.
|
||||
const $element = $(event.target);
|
||||
const ajaxContainer = $element.data('uiDialog')
|
||||
? $element
|
||||
.data('uiDialog')
|
||||
.opener.closest('[data-drupal-ajax-container]')
|
||||
: [];
|
||||
|
||||
// If the opener element was in an ajax container, and focus is on the
|
||||
// body element, we can assume focus was lost. To recover, focus is moved
|
||||
// to the first focusable element in the container.
|
||||
if (
|
||||
ajaxContainer.length &&
|
||||
(document.activeElement === document.body ||
|
||||
$(document.activeElement).not(':visible'))
|
||||
) {
|
||||
const focusableChildren = focusable(ajaxContainer[0]);
|
||||
if (focusableChildren.length > 0) {
|
||||
focusableChildren[0].focus();
|
||||
}
|
||||
}
|
||||
$(event.target).remove();
|
||||
};
|
||||
},
|
||||
|
|
@ -267,4 +246,4 @@
|
|||
$(window).on('dialog:beforeclose', (e, dialog, $element) => {
|
||||
$element.off('.dialog');
|
||||
});
|
||||
})(jQuery, Drupal, window.tabbable);
|
||||
})(jQuery, Drupal);
|
||||
|
|
|
|||
|
|
@ -393,8 +393,8 @@ class DisplayBlockTest extends ViewTestBase {
|
|||
$cached_id_token = Crypt::hmacBase64($cached_id, Settings::getHashSalt() . $this->container->get('private_key')->get());
|
||||
// @see \Drupal\contextual\Tests\ContextualDynamicContextTest:assertContextualLinkPlaceHolder()
|
||||
// Check existence of the contextual link placeholders.
|
||||
$this->assertSession()->responseContains('<div' . new Attribute(['data-contextual-id' => $id, 'data-contextual-token' => $id_token, 'data-drupal-ajax-container' => '']) . '></div>');
|
||||
$this->assertSession()->responseContains('<div' . new Attribute(['data-contextual-id' => $cached_id, 'data-contextual-token' => $cached_id_token, 'data-drupal-ajax-container' => '']) . '></div>');
|
||||
$this->assertSession()->responseContains('<div' . new Attribute(['data-contextual-id' => $id, 'data-contextual-token' => $id_token]) . '></div>');
|
||||
$this->assertSession()->responseContains('<div' . new Attribute(['data-contextual-id' => $cached_id, 'data-contextual-token' => $cached_id_token]) . '></div>');
|
||||
|
||||
// Get server-rendered contextual links.
|
||||
// @see \Drupal\contextual\Tests\ContextualDynamicContextTest:renderContextualLinks()
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ class ContextualLinksPlaceholder extends RenderElement {
|
|||
$attribute = new Attribute([
|
||||
'data-contextual-id' => $element['#id'],
|
||||
'data-contextual-token' => $token,
|
||||
'data-drupal-ajax-container' => '',
|
||||
]);
|
||||
$element['#markup'] = new FormattableMarkup('<div@attributes></div>', ['@attributes' => $attribute]);
|
||||
|
||||
|
|
|
|||
|
|
@ -88,14 +88,6 @@ class ContextualLinksTest extends WebDriverTestBase {
|
|||
$this->clickContextualLink('#block-branding', 'Test Link with Ajax');
|
||||
$this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '#drupal-modal'));
|
||||
$this->assertSession()->elementContains('css', '#drupal-modal', 'Everything is contextual!');
|
||||
$this->getSession()->getPage()->pressButton('Close');
|
||||
$this->assertSession()->assertNoElementAfterWait('css', 'ui.dialog');
|
||||
|
||||
// When the dialog is closed, the opening contextual link is now inside a
|
||||
// collapsed container, so focus should be routed to the contextual link
|
||||
// toggle button.
|
||||
$this->assertJsCondition('document.activeElement === document.querySelector("#block-branding button.trigger")');
|
||||
|
||||
// Check to make sure that page was not reloaded.
|
||||
$this->assertSession()->pageTextContains($current_page_string);
|
||||
|
||||
|
|
|
|||
|
|
@ -29,11 +29,3 @@ dialog_renderer_test.modal_content_input:
|
|||
_title: 'Thing 3'
|
||||
requirements:
|
||||
_access: 'TRUE'
|
||||
|
||||
dialog_renderer_test.collapsed_opener:
|
||||
path: '/dialog_renderer-collapsed-opener'
|
||||
defaults:
|
||||
_controller: '\Drupal\dialog_renderer_test\Controller\TestController::collapsedOpener'
|
||||
_title: 'Collapsed Openers'
|
||||
requirements:
|
||||
_access: 'TRUE'
|
||||
|
|
|
|||
|
|
@ -189,39 +189,4 @@ class TestController {
|
|||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays a dropbutton with a link that opens in a modal dialog.
|
||||
*
|
||||
* @return array
|
||||
* Render array with links.
|
||||
*/
|
||||
public function collapsedOpener() {
|
||||
return [
|
||||
'#markup' => '<h2>Honk</h2>',
|
||||
'dropbutton' => [
|
||||
'#type' => 'dropbutton',
|
||||
'#dropbutton_type' => 'small',
|
||||
'#links' => [
|
||||
'front' => [
|
||||
'title' => 'front!',
|
||||
'url' => Url::fromRoute('<front>'),
|
||||
],
|
||||
'in a dropbutton' => [
|
||||
'title' => 'inside a dropbutton',
|
||||
'url' => Url::fromRoute('dialog_renderer_test.modal_content'),
|
||||
'attributes' => [
|
||||
'class' => ['use-ajax'],
|
||||
'data-dialog-type' => 'modal',
|
||||
],
|
||||
],
|
||||
],
|
||||
],
|
||||
'#attached' => [
|
||||
'library' => [
|
||||
'core/drupal.ajax',
|
||||
],
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,31 +76,4 @@ class ModalRendererTest extends WebDriverTestBase {
|
|||
$this->assertJsCondition('document.activeElement === document.querySelector(".ui-dialog .form-text")');
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm focus management of a dialog openers in a dropbutton.
|
||||
*/
|
||||
public function testOpenerInDropbutton() {
|
||||
$assert_session = $this->assertSession();
|
||||
$page = $this->getSession()->getPage();
|
||||
|
||||
$this->drupalGet('dialog_renderer-collapsed-opener');
|
||||
|
||||
// Open a modal using a link inside a dropbutton.
|
||||
$page->find('css', '.dropbutton-toggle button')->click();
|
||||
$modal_link = $assert_session->waitForElementVisible('css', '.secondary-action a');
|
||||
$modal_link->click();
|
||||
$assert_session->waitForElementVisible('css', '.ui-dialog');
|
||||
$assert_session->assertVisibleInViewport('css', '.ui-dialog .ui-dialog-content');
|
||||
$page->pressButton('Close');
|
||||
|
||||
// When the dialog "closes" it is still present, so wait on it switching to
|
||||
// `display: none;`.
|
||||
$assert_session->waitForElement('css', '.ui-dialog[style*="display: none;"]');
|
||||
|
||||
// Confirm that when the modal closes, focus is moved to the first visible
|
||||
// and focusable item in the contextual link container, because the original
|
||||
// opener is not available.
|
||||
$this->assertJsCondition('document.activeElement === document.querySelector(".dropbutton-action a")');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue