Issue #2711907 by drpal, droplet, andrewmacpherson, starshaped, mckinzie25,...

Issue #2711907 by drpal, droplet, andrewmacpherson, starshaped, mckinzie25, hchonov: [regression] Some ajax-enabled buttons are not keyboard operable

core/misc/ajax.es6.js

@@ -635,7 +635,7 @@
       element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number')) {
       event.preventDefault();
       event.stopPropagation();
-      $(ajax.element_settings.element).trigger(ajax.element_settings.event);
+      $(element).trigger(ajax.element_settings.event);
     }
   };
 

core/misc/ajax.js

@@ -291,7 +291,7 @@
     if (event.which === 13 || event.which === 32 && element.type !== 'text' && element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number') {
       event.preventDefault();
       event.stopPropagation();
-      $(ajax.element_settings.element).trigger(ajax.element_settings.event);
+      $(element).trigger(ajax.element_settings.event);
     }
   };
 

core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml

@@ -30,3 +30,11 @@ ajax_forms_test.lazy_load_form:
   requirements:
     _access: 'TRUE'
 
+ajax_forms_test.image_button_form:
+  path: '/ajax_forms_image_button_form'
+  defaults:
+    _title: 'AJAX forms image button test'
+    _form: '\Drupal\ajax_forms_test\Form\AjaxFormsTestImageButtonForm'
+  requirements:
+    _access: 'TRUE'
+

core/modules/system/tests/modules/ajax_forms_test/src/Callbacks.php

@@ -32,6 +32,15 @@ public function checkboxCallback($form, FormStateInterface $form_state) {
     return $response;
   }
 
+  /**
+   * Ajax callback to confirm image button was submitted.
+   */
+  public function imageButtonCallback($form, FormStateInterface $form_state) {
+    $response = new AjaxResponse();
+    $response->addCommand(new HtmlCommand('#ajax_image_button_result', "<div id='ajax-1-more-div'>Something witty!</div>"));
+    return $response;
+  }
+
   /**
    * Ajax callback triggered by the checkbox in a #group.
    */

core/modules/system/tests/modules/ajax_forms_test/src/Form/AjaxFormsTestImageButtonForm.php

+<?php
+
+namespace Drupal\ajax_forms_test\Form;
+
+use Drupal\ajax_forms_test\Callbacks;
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Form builder: Builds a form that has image button with an ajax callback.
+ */
+class AjaxFormsTestImageButtonForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'ajax_forms_test_image_button_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $object = new Callbacks();
+    $form['image_button'] = [
+      '#type' => 'image_button',
+      '#name' => 'image_button',
+      '#src' => 'core/misc/icons/787878/cog.svg',
+      '#attributes' => ['alt' => $this->t('Edit')],
+      '#op' => 'edit',
+      '#ajax' => [
+        'callback' => [$object, 'imageButtonCallback'],
+      ],
+      '#suffix' => '<div id="ajax_image_button_result">Image button not pressed yet.</div>',
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    // No submit code needed.
+  }
+
+}

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

+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests the Ajax image buttons work with key press events.
+ *
+ * @group Ajax
+ */
+class AjaxFormImageButtonTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['ajax_forms_test'];
+
+  /**
+   * Tests image buttons can be operated with the keyboard ENTER key.
+   */
+  public function testAjaxImageButton() {
+    // Get a Field UI manage-display page.
+    $this->drupalGet('ajax_forms_image_button_form');
+    $assertSession = $this->assertSession();
+    $session = $this->getSession();
+
+    $enter_key_event = <<<JS
+jQuery('#edit-image-button')
+  .trigger(jQuery.Event('keypress', {
+    which: 13
+  }));
+JS;
+    // PhantomJS driver has buggy behavior with key events, we send a JavaScript
+    // key event instead.
+    // @todo: use WebDriver event when we remove PhantomJS driver.
+    $session->executeScript($enter_key_event);
+
+    $this->assertNotEmpty($assertSession->waitForElementVisible('css', '#ajax-1-more-div'), 'Page updated after image button pressed');
+  }
+
+}