Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3397785 by yash.rode, srishtiiee, lauriii, smustgrave: Dialog focus is returned to dialog instead of first tabbable element on dialog AJAX update 

(cherry picked from commit 762fcae92c)
merge-requests/5687/head
Lauri Eskola 2023-12-05 10:58:11 +02:00
parent bc6752e6e3
commit 055e083144
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/misc/dialog/dialog.ajax.js
View File

@ -38,11 +38,16 @@
$dialog.trigger('dialogButtonsChange'); $dialog.trigger('dialogButtonsChange');
} }
// If the body element has focus, it means focus was effectively lost. setTimeout(function () {
// In these instances, force focus on the dialog. // Account for pre-existing focus handling that may have already moved
if (document.activeElement === document.body) { // the focus inside the dialog.
$dialog.dialog('widget').trigger('focus'); if (!$dialog[0].contains(document.activeElement)) {
} // Move focus to the first focusable element in the next event loop
// to allow dialog buttons to be changed first.
$dialog.dialog('instance')._focusedElement = null;
$dialog.dialog('instance')._focusTabbable();
}
}, 0);
} }
const originalClose = settings.dialog.close; const originalClose = settings.dialog.close;

4
core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php
View File

@ -167,8 +167,12 @@ class DialogTest extends WebDriverTestBase {
// Press buttons in the dialog to ensure there are no AJAX errors. // Press buttons in the dialog to ensure there are no AJAX errors.
$this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Hello world'); $this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Hello world');
$this->assertSession()->assertWaitOnAjaxRequest(); $this->assertSession()->assertWaitOnAjaxRequest();
$has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
$this->assertEquals('Do it', $has_focus_text);
$this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Preview'); $this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Preview');
$this->assertSession()->assertWaitOnAjaxRequest(); $this->assertSession()->assertWaitOnAjaxRequest();
$has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
$this->assertEquals('Do it', $has_focus_text);
// Reset: close the form. // Reset: close the form.
$form_dialog->findButton('Close')->press(); $form_dialog->findButton('Close')->press();