Skip to content

Commit

Permalink
Add type="button" to the accordion toggler (see #6898)
Browse files Browse the repository at this point in the history
Description
-----------

If you happen to insert an accordion content element in a form, e.g. in an HTML code form field with the `{{insert_content::*}}` insert tag, the toggler of the accordion will currently submit the form when clicked, instead of just opening/closing the accordion.

This is because any `<button>` without a specific `type` will be treated as a `type="submit"` button by default: https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element

> The attribute's missing value default and invalid value default are both the _Submit Button state_.

Since our toggler button is not supposed to submit anything but rather just act "as a button", it needs `type="button"`.

Commits
-------

c5e8687 add type attribute to accordion toggler
  • Loading branch information
fritzmg committed Feb 16, 2024
1 parent b5c34ae commit c29e489
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
Expand Up @@ -6,7 +6,7 @@
{% block element %}
{% block element_header %}
<{{ element.header_tag }}{{ attrs(accordion_header_attributes|default).addClass('handorgel__header') }}>
<button{{ attrs(accordion_header_button_attributes|default).addClass('handorgel__header__button') }}>
<button{{ attrs(accordion_header_button_attributes|default).addClass('handorgel__header__button').set('type', 'button') }}>
{{- element.header -}}
</button>
</{{ element.header_tag }}>
Expand Down
Expand Up @@ -49,15 +49,15 @@ public function testOutputsAccordion(): void
$expectedOutput = <<<'HTML'
<div class="content-accordion">
<h3 class="handorgel__header">
<button class="handorgel__header__button">Text</button>
<button class="handorgel__header__button" type="button">Text</button>
</h3>
<div class="handorgel__content" data-open>
<div class="handorgel__content__inner">
text
</div>
</div>
<h3 class="handorgel__header">
<button class="handorgel__header__button">Image</button>
<button class="handorgel__header__button" type="button">Image</button>
</h3>
<div class="handorgel__content">
<div class="handorgel__content__inner">
Expand Down Expand Up @@ -103,15 +103,15 @@ public function testDoesNotAddTheDataOpenAttribute(): void
$expectedOutput = <<<'HTML'
<div class="content-accordion">
<h3 class="handorgel__header">
<button class="handorgel__header__button">Text</button>
<button class="handorgel__header__button" type="button">Text</button>
</h3>
<div class="handorgel__content">
<div class="handorgel__content__inner">
text
</div>
</div>
<h3 class="handorgel__header">
<button class="handorgel__header__button">Image</button>
<button class="handorgel__header__button" type="button">Image</button>
</h3>
<div class="handorgel__content">
<div class="handorgel__content__inner">
Expand Down

0 comments on commit c29e489

Please sign in to comment.