Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

USWDS - Button: Add type attribute #4695

Merged
merged 10 commits into from
Jul 29, 2022
Merged

USWDS - Button: Add type attribute #4695

merged 10 commits into from
Jul 29, 2022

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented May 16, 2022

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 thisisdano added the Status: Hold 🔴 We're holding this PR for later release. Do not merge. label Jun 3, 2022
@thisisdano
Copy link
Member

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 added Status: Complete We've completed this issue and removed Status: Hold 🔴 We're holding this PR for later release. Do not merge. labels Jul 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Complete We've completed this issue
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