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
Description
Most (all?) component examples which incorporate
buttonelement markup do not currently assign atypeattribute.Example (Accordion):
uswds/src/components/06-accordion/accordion.njk
Lines 7 to 9 in f7acaf7
In absence of an assigned
type, the default value issubmit, 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:
The default behavior of submit buttons would cause their placement within a
formelement to trigger the form submission upon click. In the case of USWDS, there is no known user-facing issues by omittingtypedue to the fact that the default behavior of buttons is prevented.Example (Accordion):
uswds/src/js/components/accordion.js
Lines 70 to 72 in f7acaf7
However:
event.preventDefault()would not be needed if these were assignedtype="type", which could serve as a simplification