Problem/Motivation

When a button element has focus, the expected behaviour is that pressing ENTER or SPACE should activate the button.

Drupal.behaviors.webformDisableAutoSubmit() is too aggressive, in the way that it prevents the default behaviour of the ENTER key for ALL types of <input>, including button types.

Proposed resolution

Don't add this behaviour to button input types. Filter these out of the jQuery element set in Drupal.behaviors.webformDisableAutoSubmit()

Remaining tasks

This could be tested with FunctionalJavascript tests. See the tests from #2711907: [regression] Some ajax-enabled buttons are not keyboard operable for an example of how to trigger keypresses correctly in PhantomJS.

User interface changes

Fix expected keyboard behaviour of buttons.

API changes

None.

Data model changes

None.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Status: Active » Needs review
StatusFileSize
new1.08 KB

This patch chains a .not() after the jQuery .find(), to filter out input types which are expected to behave as buttons. This includes the file upload input.

jrockowitz’s picture

Code looks fine to me. Do you want to add some tests? There are very few JS tests.

andrewmacpherson’s picture

Issue tags: +sprint

We're having an accessibility sprint in Amsterdam this weekend, maybe someone can look at adding tests then. My long term agenda is to get more test writers in involved in accessibility issues, especially with things like custom keyboard behaviours, which often break.

jrockowitz’s picture

Component: User interface » Accessibility

Applying new 'Accessibility' Component.

  • andrewmacpherson authored 6f531a0 on 8.x-5.x
    Issue #2890812 by andrewmacpherson: webformDisableAutoSubmit behaviour...
jrockowitz’s picture

Status: Needs review » Fixed

  • 390a5c4 committed on 8.x-5.x
    Issue #2890812 by andrewmacpherson: webformDisableAutoSubmit behaviour...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

keeganstreet’s picture

Hi @andrewmacpherson,

In the first commit 6f531a0, the following value was used:
.not('[type="submit"], [type="reset"], [type=["button"], [type="image"], [type="file"]')

In the second commit 390a5c4, this was changed to:
.not(':button, :input[type="image"], :input[type="file"]')

I don't think this was correct, as jQuery's :button selector does not select <input type="submit"> elements. This means that when a user presses Enter while focused on a Previous or Next button, the event is cancelled and nothing happens.

I would suggest changing this to:
.not('button, [type="submit"], [type="reset"], [type="button"], [type="image"], [type="file"]'), or
.not(':button, :submit, :reset, :image, :file')

keeganstreet’s picture

StatusFileSize
new904 bytes
jrockowitz’s picture

Status: Closed (fixed) » Needs review

Switching to needs review.

jrockowitz’s picture

Status: Needs review » Fixed

I committed the patch. Please download the latest dev release to review.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.