Rename extraAttributes to attributes.

source/buttons/confirm-button.ts

@@ -5,11 +5,11 @@ import {Component, VNode} from 'preact';
  * Component properties for {@linkcode ConfirmButton}.
  */
 export type ConfirmButtonProps = {
+  attributes: Record<string, unknown>;
   class: string;
   click: (event: MouseEvent) => unknown;
   confirmClass: string;
   confirmText: string;
-  extraAttributes: Record<string, string>;
   preventDefault: boolean;
   text: string;
   timeout: number;
@@ -76,11 +76,7 @@ export class ConfirmButton extends Component<
     }
 
     return html`
-      <button
+      <button ...${this.props.attributes} ...${props} onclick=${this.click}>
-        ...${this.props.extraAttributes}
-        ...${props}
-        onclick=${this.click}
-      >
         ${text}
       </button>
     `;

source/buttons/feedback-button.ts

@@ -5,8 +5,8 @@ import {Component, VNode} from 'preact';
  * Component properties for {@linkcode FeedbackButton}.
  */
 export type FeedbackButtonProps = {
+  attributes: Record<string, unknown>;
   click: (event: MouseEvent) => unknown;
-  extraAttributes: Record<string, string>;
   feedbackText: string;
   text: string;
   timeout: number;
@@ -60,7 +60,7 @@ export class FeedbackButton extends Component<
 
   render(): VNode {
     return html`
-      <button ...${this.props.extraAttributes} onclick=${this.click}>
+      <button ...${this.props.attributes} onclick=${this.click}>
         ${this.state.currentText}
       </button>
     `;

tests/buttons/confirm-button.test.ts

@@ -14,13 +14,13 @@ test('ConfirmButton', async (t) => {
   t.plan(3);
 
   const props: ConfirmButtonProps = {
+    attributes: {
+      id: 'confirm-button',
+    },
     class: 'button',
     click: (event) => t.true(event !== undefined),
     confirmClass: 'confirm',
     confirmText: 'Confirm Button',
-    extraAttributes: {
-      id: 'confirm-button',
-    },
     preventDefault: true,
     text: 'Button',
     timeout: 1000,

tests/buttons/feedback-button.test.ts

@@ -14,10 +14,10 @@ test('FeedbackButton', async (t) => {
   t.plan(5);
 
   const props: FeedbackButtonProps = {
-    click: (event) => t.true(event !== undefined),
+    attributes: {
-    extraAttributes: {
       id: 'feedback-button',
     },
+    click: (event) => t.true(event !== undefined),
     feedbackText: 'Feedback Example',
     text: 'Example',
     timeout: 1000,