From 29a3e5e7a254122decdd32cdb93adf176ecf283f Mon Sep 17 00:00:00 2001
From: webchick <drupal@webchick.net>
Date: Fri, 4 Oct 2019 09:01:31 -0700
Subject: [PATCH] Issue #3037781 by bnjmnm, andrewmacpherson, Wim Leers, seanB,
rainbreaw: Accessibility problem with invisible buttons in AJAX dialogs
---
core/misc/dialog/dialog.ajax.es6.js | 14 +------------
core/misc/dialog/dialog.ajax.js | 9 +--------
.../Ajax/DialogTest.php | 20 +++++++++++++++++++
3 files changed, 22 insertions(+), 21 deletions(-)
diff --git a/core/misc/dialog/dialog.ajax.es6.js b/core/misc/dialog/dialog.ajax.es6.js
index 2a017d29f8a7..cd1c4708d5a2 100644
--- a/core/misc/dialog/dialog.ajax.es6.js
+++ b/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'),
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index de1d3c921977..3f01d4939496 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/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'),
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php
index 26bdd185e6c1..b0c655190d88 100644
--- a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php
+++ b/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();
--
GitLab