Verified Commit 055e0831 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3397785 by yash.rode, srishtiiee, lauriii, smustgrave: Dialog focus is... 

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 762fcae9)
parent bc6752e6

core/misc/dialog/dialog.ajax.js

+10 −5
Original line number Diff line number Diff line
@@ -38,11 +38,16 @@ 
          $dialog.trigger('dialogButtonsChange');

        }



        // If the body element has focus, it means focus was effectively lost.

        // In these instances, force focus on the dialog.

        if (document.activeElement === document.body) {

          $dialog.dialog('widget').trigger('focus');

        setTimeout(function () {

          // Account for pre-existing focus handling that may have already moved

          // the focus inside the dialog.

          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;

core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php

+4 −0
Original line number Diff line number Diff line
@@ -167,8 +167,12 @@ public function testDialog() { 
    // Press buttons in the dialog to ensure there are no AJAX errors.

    $this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Hello world');

    $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()->assertWaitOnAjaxRequest();

    $has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');

    $this->assertEquals('Do it', $has_focus_text);



    // Reset: close the form.

    $form_dialog->findButton('Close')->press();