Skip to content

USWDS - Button: Add type attribute#4695

Merged
thisisdano merged 10 commits into
developfrom
al-button-type
Jul 29, 2022
Merged

USWDS - Button: Add type attribute#4695
thisisdano merged 10 commits into
developfrom
al-button-type

Conversation

@amyleadem

@amyleadem amyleadem commented May 16, 2022

Copy link
Copy Markdown
Contributor

Summary

Added type="button" to all non-form buttons to prevent default submit behaviors. This allowed us to remove preventDefault() from the relevant component JS.

⚠️ This is a potentially breaking change. Teams should update all non-form buttons to include type="button" in their markup. <button> elements that do not receive a defined type attribute will inherit type="submit" behaviors by default. This can cause unintended and undesired behavior in our buttons. Resource: Details on button types (Mozilla)

This affects these dependent or related packages:

  • usa-accordion
  • usa-banner
  • usa-card
  • usa-header
  • usa-navbar
  • usa-modal
  • usa-nav
  • usa-sidenav

Description

Closes: #3563

Problem

<button> elements that do not receive a defined type attribute will inherit type="submit" behaviors by default. This can cause unintended and undesired behavior in our buttons. Resource: Details on button types (Mozilla) ➡️

Solution

⚠️ Added type="button" to all non-form buttons to prevent default submit behaviors. This allowed us to remove preventDefault() from relevant component JS.

Tasks

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

@amyleadem amyleadem changed the title USWDS - Buttons - Add button type to non-form buttons USWDS - Button: Add type attribute May 18, 2022
@thisisdano

Copy link
Copy Markdown
Contributor

This looks good, but I'm going to HOLD it for right now until I can understand whether we should consider this a "breaking" change

@thisisdano thisisdano merged commit aa119d4 into develop Jul 29, 2022
@thisisdano thisisdano deleted the al-button-type branch July 29, 2022 17:34
@thisisdano thisisdano mentioned this pull request Aug 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Buttons which do not submit a form should be assigned type

3 participants