Visitar URL original
Buttons which do not submit a form should be assigned type · Issue #3563 · uswds/uswds · GitHub
Skip to content

Buttons which do not submit a form should be assigned type #3563

Closed

Description

@aduth

Description

Most (all?) component examples which incorporate button element markup do not currently assign a type attribute.

Example (Accordion):

<button class="usa-accordion__button"
aria-expanded="{{ item.expanded | default('false') }}"
aria-controls="{{ accordion.id_prefix }}{{ item.id }}">

In absence of an assigned type, the default value is submit, which inherits the semantics of form submission.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

Arguably, many of these buttons are not intended to be interpreted as submit buttons. Instead, the use-case of type="button" applies instead.

From the above reference:

button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

The default behavior of submit buttons would cause their placement within a form element to trigger the form submission upon click. In the case of USWDS, there is no known user-facing issues by omitting type due to the fact that the default behavior of buttons is prevented.

Example (Accordion):

[CLICK]: {
[BUTTON](event) {
event.preventDefault();

However:

  • Semantically, any technology which crawls the markup may infer these as submit buttons. It's not clear to me if there are specific examples of this.
  • event.preventDefault() would not be needed if these were assigned type="type", which could serve as a simplification

Activity

  1. added
    Affects: Accessibility 🟡Affects access for disabled users or assistive tech. Record the barrier; not a severity score.
    Package: ButtonWork affecting Button. Apply only when this area helps route or find the issue.
    on Feb 24, 2021
  2. added
    Affects: Markup 🟡Suggestion would change the markup of a component
    and removed on May 6, 2022
  3. moved this from Ready to Schedule to Scheduled in USWDS Core Project Dataon May 8, 2022
  4. added this to the uswds 3.1.0 milestone on May 8, 2022
  5. moved this from Scheduled to Fed Final Review in USWDS Core Project Dataon May 9, 2022
  6. moved this from Fed Final Review to On deck in USWDS Core Project Dataon May 16, 2022
  7. moved this from On deck to In progress in USWDS Core Project Dataon May 16, 2022
  8. moved this from In progress to Review in USWDS Core Project Dataon May 18, 2022
  9. assigned and unassigned on May 20, 2022
  10. moved this from Review to Hold in USWDS Core Project Dataon Jun 3, 2022
  11. self-assigned this
    on Jun 3, 2022
  12. Repository owner moved this from Hold to Done in USWDS Core Project Dataon Jul 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Affects: Accessibility 🟡Affects access for disabled users or assistive tech. Record the barrier; not a severity score.Affects: Markup 🟡Suggestion would change the markup of a componentPackage: ButtonWork affecting Button. Apply only when this area helps route or find the issue.

Type

No type

Projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions