[minor] Adding type to buttons to avoid triggering onSubmit inside a form

packages/lib/src/accordion/Accordion.test.tsx

@@ -131,4 +131,18 @@ describe("Accordion component tests", () => {
     fireEvent.click(getByText("Accordion"));
     expect(onChange).not.toHaveBeenCalled();
   });
+  test("Accordion does not trigger onSubmit when inside a form", () => {
+    const onSubmit = jest.fn();
+    const { getByText } = render(
+      <form onSubmit={onSubmit}>
+        <DxcAccordion>
+          <DxcAccordion.AccordionItem label="Accordion">
+            <div>test-expanded</div>
+          </DxcAccordion.AccordionItem>
+        </DxcAccordion>
+      </form>
+    );
+    fireEvent.click(getByText("Accordion"));
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/accordion/AccordionItem.tsx

@@ -174,6 +174,7 @@ const AccordionItem = ({
         tabIndex={disabled ? -1 : tabIndex}
         aria-expanded={isItemExpanded}
         aria-controls={`accordion-panel-${id}`}
+        type="button"
       >
         <DxcContainer width="100%" height="100%">
           <DxcFlex gap="var(--spacing-gap-l)">

packages/lib/src/date-input/Calendar.tsx

@@ -283,6 +283,7 @@ const Calendar = ({
                   today.get("month") === date.month &&
                   today.get("year") === innerDate.get("year")
                 }
+                type="button"
               >
                 {date.day}
               </DayCellButton>

packages/lib/src/date-input/DateInput.test.tsx

@@ -497,4 +497,20 @@ describe("DateInput component tests", () => {
     userEvent.click(calendarAction);
     expect(getByText("October 2080")).toBeTruthy();
   });
+  test("Form onSubmit is not called when interacting with the calendar and pressing enter", () => {
+    const onSubmit = jest.fn();
+    const { getByRole, getAllByText } = render(
+      <form onSubmit={onSubmit}>
+        <DxcDateInput label="Default label" format="dd-mm-yy" defaultValue="21-10-80" />
+      </form>
+    );
+    const calendarAction = getByRole("combobox");
+    userEvent.click(calendarAction);
+    const day1 = getAllByText("1")[0];
+    if (day1 != null) {
+      userEvent.click(day1);
+    }
+    userEvent.type(calendarAction, "{enter}");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/date-input/DatePicker.tsx

@@ -107,13 +107,15 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen
           <HeaderButton
             aria-label={translatedLabels.calendar.previousMonthTitle}
             onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))}
+            type="button"
           >
             <DxcIcon icon="keyboard_arrow_left" />
           </HeaderButton>
         </Tooltip>
         <HeaderYearTrigger
           aria-live="polite"
           onClick={() => setContent((currentContent) => (currentContent === "yearPicker" ? "calendar" : "yearPicker"))}
+          type="button"
         >
           <HeaderYearTriggerLabel>
             {translatedLabels.calendar.months[innerDate.get("month")]} {innerDate.format("YYYY")}
@@ -124,6 +126,7 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen
           <HeaderButton
             aria-label={translatedLabels.calendar.nextMonthTitle}
             onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))}
+            type="button"
           >
             <DxcIcon icon="keyboard_arrow_right" />
           </HeaderButton>

packages/lib/src/date-input/YearPicker.tsx

@@ -109,6 +109,7 @@ const YearPicker = ({ onYearSelect, selectedDate, today }: YearPickerPropsType):
             onYearSelect(year);
           }}
           role="option"
+          type="button"
         >
           {year}
         </YearPickerButton>

packages/lib/src/dropdown/Dropdown.test.tsx

@@ -411,4 +411,15 @@ describe("Dropdown component tests", () => {
     });
     expect(queryByRole("menu")).toBeFalsy();
   });
+  test("Dropdown does not trigger form submission when inside a form", () => {
+    const onSubmit = jest.fn();
+    const { getByRole } = render(
+      <form onSubmit={onSubmit}>
+        <DxcDropdown options={options} label="dropdown-test-1" onSelectOption={() => {}} />
+      </form>
+    );
+    const dropdown = getByRole("button");
+    userEvent.click(dropdown);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/dropdown/Dropdown.tsx

@@ -283,6 +283,7 @@ const DxcDropdown = ({
                 aria-label="Show options"
                 tabIndex={tabIndex}
                 ref={triggerRef}
+                type="button"
               >
                 <DropdownTriggerContent iconPosition={iconPosition}>
                   {icon && (

packages/lib/src/tabs/Tabs.test.tsx

@@ -331,4 +331,29 @@ describe("Tabs component tests", () => {
     expect(tabs[1]?.getAttribute("aria-selected")).toBe("false");
     expect(tabs[2]?.getAttribute("aria-selected")).toBe("true");
   });
+  test("Tabs should not trigger onSubmit inside a form", () => {
+    const onSubmit = jest.fn();
+    const onTabClick = [jest.fn(), jest.fn(), jest.fn()];
+    const { getAllByRole } = render(
+      <form onSubmit={onSubmit}>
+        <DxcTabs>
+          <DxcTabs.Tab label="Tab-1" onClick={onTabClick[0]} defaultActive>
+            <></>
+          </DxcTabs.Tab>
+          <DxcTabs.Tab label="Tab-2" onClick={onTabClick[1]}>
+            <></>
+          </DxcTabs.Tab>
+          <DxcTabs.Tab label="Tab-3" onClick={onTabClick[2]}>
+            <></>
+          </DxcTabs.Tab>
+        </DxcTabs>
+      </form>
+    );
+    const tabs = getAllByRole("tab");
+    if (tabs[0]) {
+      fireEvent.click(tabs[0]);
+    }
+    expect(onTabClick[0]).toHaveBeenCalled();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/tabs/Tabs.tsx

@@ -208,6 +208,7 @@ const DxcTabs = ({ children, iconPosition = "left", margin, tabIndex = 0 }: Tabs
               disabled={!scrollLeftEnabled}
               onClick={scrollLeft}
               tabIndex={scrollLeftEnabled ? tabIndex : -1}
+              type="button"
             >
               <DxcIcon icon="keyboard_arrow_left" />
             </ScrollIndicatorButton>
@@ -229,6 +230,7 @@ const DxcTabs = ({ children, iconPosition = "left", margin, tabIndex = 0 }: Tabs
               disabled={!scrollRightEnabled}
               onClick={scrollRight}
               tabIndex={scrollRightEnabled ? tabIndex : -1}
+              type="button"
             >
               <DxcIcon icon="keyboard_arrow_right" />
             </ScrollIndicatorButton>

packages/lib/src/toggle-group/ToggleGroup.test.tsx

@@ -160,4 +160,21 @@ describe("Toggle group component tests", () => {
     fireEvent.click(getByRole("button", { name: "Ebay" }));
     expect(handleChange).toHaveBeenCalledWith([1, 2]);
   });
+
+  test("Togglegroup should not trigger onSubmit when inside a form", () => {
+    const handleSubmit = jest.fn();
+    const handleChange = jest.fn();
+    const options = [
+      { value: 1, label: "Amazon" },
+      { value: 2, label: "Ebay" },
+    ];
+    const { getByRole } = render(
+      <form onSubmit={handleSubmit}>
+        <DxcToggleGroup options={options} value={[1]} multiple onChange={handleChange} />
+      </form>
+    );
+    fireEvent.click(getByRole("button", { name: "Ebay" }));
+    expect(handleChange).toHaveBeenCalledWith([1, 2]);
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/toggle-group/ToggleGroup.tsx

@@ -120,6 +120,7 @@ export default function DxcToggleGroup({
               onlyIcon={!option.label && !!option.icon}
               selected={selected}
               tabIndex={!option.disabled ? tabIndex : -1}
+              type="button"
             >
               {option.icon && (
                 <IconContainer>

packages/lib/src/wizard/Wizard.test.tsx

@@ -140,4 +140,25 @@ describe("Wizard components tests", () => {
     expect(onClick).toHaveBeenNthCalledWith(1, 1);
     expect(onClick).toHaveBeenNthCalledWith(2, 0);
   });
+
+  test("Wizard should not trigger onSubmit when inside a form", () => {
+    const onSubmit = jest.fn();
+    const { getByText } = render(
+      <form onSubmit={onSubmit}>
+        <DxcWizard
+          steps={[
+            {
+              label: "first-step",
+            },
+            {
+              label: "second-step",
+            },
+          ]}
+        />
+      </form>
+    );
+    const step = getByText("second-step");
+    fireEvent.click(step);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
 });

packages/lib/src/wizard/Wizard.tsx

@@ -190,6 +190,7 @@ export default function DxcWizard({
             }}
             tabIndex={tabIndex}
             unvisited={i > (currentStep ?? innerCurrent)}
+            type="button"
           >
             <StepIndicator hasValidityIcon={step.valid != null}>
               <IconContainer