From c6705a0b0538329fbbf6d1749a312b062ce6197c Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Tue, 24 Dec 2024 14:04:34 +0100
Subject: [PATCH] fix(react-formio): update action table storybook

---
 .../components/__fixtures__/form-actions.json | 240 ++++++++++++
 .../actions-table/actionsTable.component.tsx  |   3 +-
 .../actions-table/actionsTable.stories.tsx    | 362 ++++--------------
 .../form-control/formControl.component.tsx    |  15 +-
 .../components/select/select.component.tsx    |  30 +-
 .../defaultCellOperations.component.tsx       |  21 +-
 .../defaultOperationButton.component.tsx      |  13 +-
 7 files changed, 357 insertions(+), 327 deletions(-)
 create mode 100644 packages/react-formio/src/components/__fixtures__/form-actions.json

diff --git a/packages/react-formio/src/components/__fixtures__/form-actions.json b/packages/react-formio/src/components/__fixtures__/form-actions.json
new file mode 100644
index 00000000..e7384cbc
--- /dev/null
+++ b/packages/react-formio/src/components/__fixtures__/form-actions.json
@@ -0,0 +1,240 @@
+[
+  {
+    "name": "webhook",
+    "title": "Webhook (Premium)",
+    "description": "Allows you to trigger an external interface.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "webhook",
+      "title": "Webhook (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sql",
+    "title": "SQL Query",
+    "description": "Allows you to execute a remote SQL Query.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "sql",
+      "title": "SQL Query"
+    }
+  },
+  {
+    "name": "role",
+    "title": "Role Assignment",
+    "description": "Provides the Role Assignment capabilities.",
+    "priority": 1,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 1,
+      "name": "role",
+      "title": "Role Assignment"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "resetpass",
+    "title": "Reset Password",
+    "description": "Provides a way to reset a password field.",
+    "defaults": {
+      "handler": ["after", "before"],
+      "method": ["form", "create"],
+      "priority": 0,
+      "name": "resetpass",
+      "title": "Reset Password"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "save",
+    "title": "Save Submission",
+    "description": "Saves the submission into the database.",
+    "priority": 10,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create", "update"],
+      "priority": 10,
+      "name": "save",
+      "title": "Save Submission"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "login",
+    "title": "Login",
+    "description": "Provides a way to login to the application.",
+    "priority": 2,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 2,
+      "name": "login",
+      "title": "Login"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "office365contact",
+    "title": "Office 365 Contacts (Premium)",
+    "description": "Allows you to integrate into your Office 365 Contacts.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365contact",
+      "title": "Office 365 Contacts (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "office365calendar",
+    "title": "Office 365 Calendar (Premium)",
+    "description": "Allows you to integrate into your Office 365 Calendar.",
+    "premium": true,
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "office365calendar",
+      "title": "Office 365 Calendar (Premium)"
+    }
+  },
+  {
+    "name": "hubspotContact",
+    "title": "Hubspot Contact (Premium)",
+    "description": "Allows you to change contact fields in hubspot.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "hubspotContact",
+      "title": "Hubspot Contact (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "oauth",
+    "title": "OAuth (Premium)",
+    "description": "Provides OAuth authentication behavior to this form.",
+    "priority": 20,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["form", "create"],
+      "priority": 20,
+      "name": "oauth",
+      "title": "OAuth (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "ldap",
+    "title": "LDAP Login (Premium)",
+    "description": "Provides ldap login.",
+    "priority": 3,
+    "defaults": {
+      "handler": ["before"],
+      "method": ["create"],
+      "priority": 3,
+      "name": "ldap",
+      "title": "LDAP Login (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "googlesheet",
+    "title": "Google Sheets (Premium)",
+    "description": "Allows you to integrate data into Google sheets.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "googlesheet",
+      "title": "Google Sheets (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "sqlconnector",
+    "title": "SQL Connector (Premium)",
+    "description": "Allows you to execute a remote SQL Query via Resquel.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "sqlconnector",
+      "title": "SQL Connector (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "jira",
+    "title": "Jira (Premium)",
+    "description": "Allows you to create issues within Jira.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 0,
+      "name": "jira",
+      "title": "Jira (Premium)"
+    },
+    "premium": true
+  },
+  {
+    "name": "group",
+    "title": "Group Assignment (Premium)",
+    "premium": true,
+    "description": "Provides the Group Assignment capabilities.",
+    "priority": 5,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create", "update", "delete"],
+      "priority": 5,
+      "name": "group",
+      "title": "Group Assignment (Premium)"
+    },
+    "access": {
+      "handler": false,
+      "method": false
+    }
+  },
+  {
+    "name": "twilioSMS",
+    "title": "Twilio SMS (Premium)",
+    "premium": true,
+    "description": "Allows you to send SMS to phone numbers.",
+    "priority": 0,
+    "defaults": {
+      "handler": ["after"],
+      "method": ["create"],
+      "priority": 0,
+      "name": "twilioSMS",
+      "title": "Twilio SMS (Premium)"
+    }
+  }
+]
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
index 8f9d7813..48f6c2a4 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
+++ b/packages/react-formio/src/components/actions-table/actionsTable.component.tsx
@@ -35,6 +35,7 @@ export function ActionsTable({
     <Table {...props} disableFilters={disableFilters} disablePagination={disablePagination} columns={columns}>
       <div className={"pagination-group"}>
         <Select
+          data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
           choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
@@ -42,7 +43,7 @@ export function ActionsTable({
         />
         <div className={"pl-3"}>
           <button
-            data-testid={"submit"}
+            data-testid={"action-table-add"}
             disabled={currentAction === ""}
             className={"btn btn-success"}
             onClick={() => currentAction && onAddAction(currentAction)}
diff --git a/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx b/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx
index 6a28b647..7e2eec9f 100644
--- a/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx
+++ b/packages/react-formio/src/components/actions-table/actionsTable.stories.tsx
@@ -1,5 +1,7 @@
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
 
+import availableActions from "../__fixtures__/form-actions.json";
 import { ActionsTable } from "./actionsTable.component";
 
 export default {
@@ -21,11 +23,6 @@ export default {
         type: "boolean"
       }
     },
-    isEmpty: {
-      control: {
-        type: "boolean"
-      }
-    },
     disableFilters: {
       control: {
         type: "boolean"
@@ -36,296 +33,91 @@ export default {
         type: "boolean"
       }
     },
-    tags: {
-      control: {
-        type: "object"
-      }
-    },
     onAddAction: {
       action: "onAddAction"
     }
   },
   parameters: {}
-};
+} satisfies Meta<typeof ActionsTable>;
 
-export const Sandbox = (args: any) => {
-  return <ActionsTable {...args} data={args.isEmpty ? [] : args.data} />;
-};
+type Story = StoryObj<typeof ActionsTable>;
 
-Sandbox.args = {
-  icon: "server",
-  availableActions: [
-    {
-      name: "email",
-      title: "Email",
-      description: "Allows you to email people on submission.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "email",
-        title: "Email"
-      }
-    },
-    {
-      name: "webhook",
-      title: "Webhook (Premium)",
-      description: "Allows you to trigger an external interface.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "webhook",
-        title: "Webhook (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "sql",
-      title: "SQL Query",
-      description: "Allows you to execute a remote SQL Query.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "sql",
-        title: "SQL Query"
-      }
-    },
-    {
-      name: "role",
-      title: "Role Assignment",
-      description: "Provides the Role Assignment capabilities.",
-      priority: 1,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 1,
-        name: "role",
-        title: "Role Assignment"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "resetpass",
-      title: "Reset Password",
-      description: "Provides a way to reset a password field.",
-      defaults: {
-        handler: ["after", "before"],
-        method: ["form", "create"],
-        priority: 0,
-        name: "resetpass",
-        title: "Reset Password"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "save",
-      title: "Save Submission",
-      description: "Saves the submission into the database.",
-      priority: 10,
-      defaults: {
+export const Sandbox: Story = {
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("action-table-select");
+    const addButton = canvas.getByTestId("action-table-add");
+
+    expect(addButton).toHaveAttribute("disabled");
+
+    await userEvent.selectOptions(select, "save", {
+      delay: 100
+    });
+
+    await userEvent.click(addButton);
+
+    expect(args.onAddAction).toHaveBeenCalledWith("save");
+
+    const editButton = await canvas.getByRole("button", { name: /Operation button: Edit/i });
+    const deleteButton = await canvas.getByRole("button", { name: /Operation button: delete/i });
+
+    expect(editButton).toBeInTheDocument();
+    expect(deleteButton).toBeInTheDocument();
+
+    await userEvent.click(editButton);
+
+    expect(args.onClick).toHaveBeenCalledWith(
+      args.data[0],
+      args.operations!.find(({ action }) => action === "edit")
+    );
+
+    await userEvent.click(deleteButton);
+
+    expect(args.onClick).toHaveBeenCalledWith(
+      args.data[0],
+      args.operations!.find(({ action }) => action === "delete")
+    );
+  },
+  args: {
+    onAddAction: fn(),
+    onClick: fn(),
+    availableActions: availableActions.map(({ name, title }) => ({
+      label: title,
+      value: name
+    })),
+    data: [
+      {
+        _id: "602967600685b2158b24e99a",
         handler: ["before"],
         method: ["create", "update"],
         priority: 10,
         name: "save",
-        title: "Save Submission"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "login",
-      title: "Login",
-      description: "Provides a way to login to the application.",
-      priority: 2,
-      defaults: {
-        handler: ["before"],
-        method: ["create"],
-        priority: 2,
-        name: "login",
-        title: "Login"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "office365contact",
-      title: "Office 365 Contacts (Premium)",
-      description: "Allows you to integrate into your Office 365 Contacts.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "office365contact",
-        title: "Office 365 Contacts (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "office365calendar",
-      title: "Office 365 Calendar (Premium)",
-      description: "Allows you to integrate into your Office 365 Calendar.",
-      premium: true,
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "office365calendar",
-        title: "Office 365 Calendar (Premium)"
-      }
-    },
-    {
-      name: "hubspotContact",
-      title: "Hubspot Contact (Premium)",
-      description: "Allows you to change contact fields in hubspot.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "hubspotContact",
-        title: "Hubspot Contact (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "oauth",
-      title: "OAuth (Premium)",
-      description: "Provides OAuth authentication behavior to this form.",
-      priority: 20,
-      defaults: {
-        handler: ["after"],
-        method: ["form", "create"],
-        priority: 20,
-        name: "oauth",
-        title: "OAuth (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "ldap",
-      title: "LDAP Login (Premium)",
-      description: "Provides ldap login.",
-      priority: 3,
-      defaults: {
-        handler: ["before"],
-        method: ["create"],
-        priority: 3,
-        name: "ldap",
-        title: "LDAP Login (Premium)"
+        title: "Save Submission",
+        form: "602967600685b24dbe24e999",
+        machineName: "tcspjwhsevrzpcd:testForm:save"
+      } as never
+    ],
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit",
+        permissionsResolver() {
+          return true;
+        }
       },
-      premium: true
-    },
-    {
-      name: "googlesheet",
-      title: "Google Sheets (Premium)",
-      description: "Allows you to integrate data into Google sheets.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "googlesheet",
-        title: "Google Sheets (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "sqlconnector",
-      title: "SQL Connector (Premium)",
-      description: "Allows you to execute a remote SQL Query via Resquel.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "sqlconnector",
-        title: "SQL Connector (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "jira",
-      title: "Jira (Premium)",
-      description: "Allows you to create issues within Jira.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 0,
-        name: "jira",
-        title: "Jira (Premium)"
-      },
-      premium: true
-    },
-    {
-      name: "group",
-      title: "Group Assignment (Premium)",
-      premium: true,
-      description: "Provides the Group Assignment capabilities.",
-      priority: 5,
-      defaults: {
-        handler: ["after"],
-        method: ["create", "update", "delete"],
-        priority: 5,
-        name: "group",
-        title: "Group Assignment (Premium)"
-      },
-      access: { handler: false, method: false }
-    },
-    {
-      name: "twilioSMS",
-      title: "Twilio SMS (Premium)",
-      premium: true,
-      description: "Allows you to send SMS to phone numbers.",
-      priority: 0,
-      defaults: {
-        handler: ["after"],
-        method: ["create"],
-        priority: 0,
-        name: "twilioSMS",
-        title: "Twilio SMS (Premium)"
-      }
-    }
-  ].map(({ name, title }) => ({
-    label: title,
-    value: name
-  })),
-  data: [
-    {
-      _id: "602967600685b2158b24e99a",
-      handler: ["before"],
-      method: ["create", "update"],
-      priority: 10,
-      name: "save",
-      title: "Save Submission",
-      form: "602967600685b24dbe24e999",
-      machineName: "tcspjwhsevrzpcd:testForm:save"
-    }
-  ],
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver() {
+          return true;
+        }
       }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
-      }
-    }
-  ]
+    ]
+  }
 };
diff --git a/packages/react-formio/src/components/form-control/formControl.component.tsx b/packages/react-formio/src/components/form-control/formControl.component.tsx
index e4997ef7..483c25f3 100644
--- a/packages/react-formio/src/components/form-control/formControl.component.tsx
+++ b/packages/react-formio/src/components/form-control/formControl.component.tsx
@@ -1,12 +1,13 @@
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
+import React, { HTMLAttributes } from "react";
 
-export interface FormControlProps {
+export interface FormControlProps<Data = any> {
   name: string;
+  value?: Data;
   required?: boolean;
   label?: string;
   className?: string;
+  onChange?: (name: string, value: any) => void;
   description?: string | React.ComponentType | any;
   prefix?: JSX.Element | React.ComponentType | any;
   suffix?: JSX.Element | React.ComponentType | any;
@@ -55,11 +56,3 @@ export function FormControl({
     </div>
   );
 }
-
-FormControl.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  required: PropTypes.bool,
-  description: PropTypes.any
-};
diff --git a/packages/react-formio/src/components/select/select.component.tsx b/packages/react-formio/src/components/select/select.component.tsx
index f9687331..dece0e02 100644
--- a/packages/react-formio/src/components/select/select.component.tsx
+++ b/packages/react-formio/src/components/select/select.component.tsx
@@ -1,24 +1,19 @@
 import Choices from "@formio/choices.js";
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React, { ReactElement, useEffect, useRef } from "react";
+import React, { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
-export interface SelectProps<T = any> extends FormControlProps {
-  value?: any;
+export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
-  onChange?: (name: string, value: any) => void;
   placeholder?: string;
-  choices: { label: string; value: T }[];
+  choices: { label: string; value: Data }[];
   layout?: "html5" | "choicesjs";
   multiple?: boolean;
-
-  [key: string]: any;
 }
 
-export function Select<T = any>({
+export function Select<Data = any>({
   name,
   label,
   size,
@@ -33,14 +28,14 @@ export function Select<T = any>({
   multiple,
   layout,
   ...props
-}: SelectProps<T>): ReactElement {
-  const ref = useRef<any>();
+}: SelectProps<Data>): ReactElement {
+  const ref = useRef<HTMLSelectElement>(null);
 
   useEffect(() => {
     let instance: any;
 
     if (layout === "choicesjs") {
-      instance = new Choices(ref.current, {
+      instance = new Choices(ref.current as unknown as HTMLInputElement, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
@@ -67,8 +62,8 @@ export function Select<T = any>({
       {/* eslint-disable-next-line jsx-a11y/no-onchange */}
       <select
         ref={ref}
-        {...props}
         data-testid={`select_${name}`}
+        {...props}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}
@@ -90,12 +85,3 @@ export function Select<T = any>({
     </FormControl>
   );
 }
-
-Select.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  choices: PropTypes.array.isRequired
-};
diff --git a/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx b/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx
index f45fe6ee..9ec836cd 100644
--- a/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx
+++ b/packages/react-formio/src/components/table/components/defaultCellOperations.component.tsx
@@ -1,19 +1,32 @@
 import React from "react";
 
-import { DefaultOperationButton } from "./defaultOperationButton.component";
+import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {
+export interface DefaultCellOperationsProps {
+  operations: (OperationButtonProps & {
+    OperationButton: typeof DefaultOperationButton;
+    permissionsResolver?(data: unknown, ctx: any): boolean;
+  })[];
+  row: any;
+
+  onClick: (data: any, action: string) => void;
+  ctx: any;
+  i18n: (i18n: string) => string;
+}
+
+export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
   const data = row.original;
 
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }: any) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }: any) => {
+        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
+        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
           return (
             <OperationButton
               key={operation.action}
               {...operation}
+              data-testid={`operation-${index}-${operation.action}`}
               onClick={(action: string) => onClick(data, action)}
               data={data}
               i18n={i18n}
diff --git a/packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx b/packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx
index c9db210b..3471daaa 100644
--- a/packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx
+++ b/packages/react-formio/src/components/table/components/defaultOperationButton.component.tsx
@@ -1,11 +1,10 @@
 import classnames from "classnames";
-import React from "react";
+import { HTMLAttributes } from "react";
 
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps {
-  className?: string;
+export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   buttonType?: string;
   buttonSize?: string;
   buttonOutline?: boolean;
@@ -15,6 +14,7 @@ export interface OperationButtonProps {
   icon?: string;
   title?: string;
   i18n?: (i18n: string) => string;
+  ctx?: any;
 }
 
 export function DefaultOperationButton(props: OperationButtonProps) {
@@ -27,11 +27,16 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     action,
     icon = "",
     title = "",
-    i18n = (f: string) => f
+    i18n = (f: string) => f,
+    data,
+    ctx,
+    ...otherProps
   } = props;
 
   return (
     <button
+      {...otherProps}
+      aria-label={"Operation button: " + (title || action)}
       className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
       onClick={stopPropagationWrapper(() => onClick(action))}
     >