Issue #3037781 by bnjmnm, andrewmacpherson, Wim Leers, seanB, rainbreaw:...

Issue #3037781 by bnjmnm, andrewmacpherson, Wim Leers, seanB, rainbreaw: Accessibility problem with invisible buttons in AJAX dialogs

core/misc/dialog/dialog.ajax.es6.js

@@ -65,19 +65,7 @@
         '.form-actions input[type=submit], .form-actions a.button',
       );
       $buttons.each(function() {
-        // Hidden form buttons need special attention. For browser consistency,
-        // the button needs to be "visible" in order to have the enter key fire
-        // the form submit event. So instead of a simple "hide" or
-        // "display: none", we set its dimensions to zero.
-        // See http://mattsnider.com/how-forms-submit-when-pressing-enter/
-        const $originalButton = $(this).css({
-          display: 'block',
-          width: 0,
-          height: 0,
-          padding: 0,
-          border: 0,
-          overflow: 'hidden',
-        });
+        const $originalButton = $(this).css({ display: 'none' });
         buttons.push({
           text: $originalButton.html() || $originalButton.attr('value'),
           class: $originalButton.attr('class'),

core/misc/dialog/dialog.ajax.js

@@ -38,14 +38,7 @@
       var buttons = [];
       var $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
       $buttons.each(function () {
-        var $originalButton = $(this).css({
-          display: 'block',
-          width: 0,
-          height: 0,
-          padding: 0,
-          border: 0,
-          overflow: 'hidden'
-        });
+        var $originalButton = $(this).css({ display: 'none' });
         buttons.push({
           text: $originalButton.html() || $originalButton.attr('value'),
           class: $originalButton.attr('class'),

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

@@ -140,6 +140,26 @@ public function testDialog() {
     $preview = $form_dialog->findButton('Preview');
     $this->assertNotNull($preview, 'The dialog contains a "Preview" button.');
 
+    // When a form with submit inputs is in a dialog, the form's submit inputs
+    // are copied to the dialog buttonpane as buttons. The originals should have
+    // their styles set to display: none.
+    $hidden_buttons = $this->getSession()->getPage()->findAll('css', '.ajax-test-form [type="submit"]');
+    $this->assertCount(2, $hidden_buttons);
+    $hidden_button_text = [];
+    foreach ($hidden_buttons as $button) {
+      $styles = $button->getAttribute('style');
+      $this->assertTrue((stripos($styles, 'display: none;') !== FALSE));
+      $hidden_button_text[] = $button->getAttribute('value');
+    }
+
+    // The copied buttons should have the same text as the submit inputs they
+    // were copied from.
+    $moved_to_buttonpane_buttons = $this->getSession()->getPage()->findAll('css', '.ui-dialog-buttonpane button');
+    $this->assertCount(2, $moved_to_buttonpane_buttons);
+    foreach ($moved_to_buttonpane_buttons as $key => $button) {
+      $this->assertEqual($button->getText(), $hidden_button_text[$key]);
+    }
+
     // Reset: close the form.
     $form_dialog->findButton('Close')->press();