diff --git a/app/client/packages/design-system/ads/src/Button/Button.tsx b/app/client/packages/design-system/ads/src/Button/Button.tsx
index 4fe30a4265b6..32d7edb1059c 100644
--- a/app/client/packages/design-system/ads/src/Button/Button.tsx
+++ b/app/client/packages/design-system/ads/src/Button/Button.tsx
@@ -40,6 +40,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       startIcon,
       UNSAFE_height,
       UNSAFE_width,
+      // Extract aria-label to ensure it's properly passed for accessibility
+      "aria-label": ariaLabel,
       ...rest
     } = props;
 
@@ -49,6 +51,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const buttonRef = useDOMRef(ref);
     const { focusProps, isFocusVisible } = useFocusRing();
 
+    // Determine aria-label for accessibility
+    // Icon-only buttons should have an aria-label for screen readers
+    const computedAriaLabel = ariaLabel;
+
     return (
       <StyledButton
         as={renderAs || "button"}
@@ -57,6 +63,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...focusProps}
         UNSAFE_height={UNSAFE_height}
         UNSAFE_width={UNSAFE_width}
+        aria-busy={isLoading}
+        aria-label={computedAriaLabel}
         className={clsx(ButtonClassName, className)}
         data-disabled={props.isDisabled || false}
         data-loading={isLoading}
diff --git a/app/client/packages/design-system/ads/src/Select/Select.tsx b/app/client/packages/design-system/ads/src/Select/Select.tsx
index 49780c5b2f4a..5c5da78f9535 100644
--- a/app/client/packages/design-system/ads/src/Select/Select.tsx
+++ b/app/client/packages/design-system/ads/src/Select/Select.tsx
@@ -30,6 +30,7 @@ function Select(props: SelectProps) {
     isDisabled = false,
     isLoading = false,
     isMultiSelect,
+    isRequired = false,
     isValid,
     maxTagCount = isMultiSelect
       ? props.value?.length > 1
@@ -41,6 +42,10 @@ function Select(props: SelectProps) {
     showSearch = false,
     size = "md",
     virtual = false,
+    // Extract aria props for accessibility
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     ...rest
   } = props;
   const searchRef = useRef<HTMLInputElement>(null);
@@ -76,9 +81,19 @@ function Select(props: SelectProps) {
     setSearchValue("");
   };
 
+  // Determine aria-invalid based on isValid prop
+  // When isValid is explicitly false, the field has a validation error
+  const ariaInvalid = isValid === false ? "true" : undefined;
+
   return (
     <RCSelect
       {...rest}
+      aria-busy={isLoading}
+      aria-describedby={ariaDescribedby}
+      aria-invalid={ariaInvalid}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      aria-required={isRequired || undefined}
       className={clsx(SelectClassName, className)}
       clearIcon={<Icon name="close-circle-line" size="md" />}
       data-is-valid={isValid}
diff --git a/app/client/packages/design-system/ads/src/Select/Select.types.ts b/app/client/packages/design-system/ads/src/Select/Select.types.ts
index 3905d97162b2..90a1988798fc 100644
--- a/app/client/packages/design-system/ads/src/Select/Select.types.ts
+++ b/app/client/packages/design-system/ads/src/Select/Select.types.ts
@@ -11,6 +11,8 @@ export type SelectProps = RCSelectProps & {
   isDisabled?: boolean;
   isValid?: boolean;
   isLoading?: boolean;
+  /** Whether the select field is required (for accessibility) */
+  isRequired?: boolean;
   dropdownMatchSelectWidth?: boolean | number;
 };
 
diff --git a/app/client/src/components/common/Collapsible.test.tsx b/app/client/src/components/common/Collapsible.test.tsx
new file mode 100644
index 000000000000..8a64ac8f60c6
--- /dev/null
+++ b/app/client/src/components/common/Collapsible.test.tsx
@@ -0,0 +1,285 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { lightTheme } from "selectors/themeSelectors";
+import { Collapsible, CollapsibleGroup, DisabledCollapsible } from "./Collapsible";
+
+const renderCollapsible = (props = {}) => {
+  return render(
+    <ThemeProvider theme={lightTheme}>
+      <Collapsible label="Test Collapsible" {...props}>
+        <div data-testid="collapsible-content">Collapsible Content</div>
+      </Collapsible>
+    </ThemeProvider>,
+  );
+};
+
+describe("Collapsible Accessibility Tests", () => {
+  describe("ARIA Attributes", () => {
+    it("should render the collapsible component with a label", () => {
+      renderCollapsible();
+
+      expect(screen.getByText("Test Collapsible")).toBeInTheDocument();
+    });
+
+    it("should render children when expanded by default", () => {
+      renderCollapsible({ expand: true });
+
+      expect(screen.getByTestId("collapsible-content")).toBeInTheDocument();
+    });
+
+    it("should have an expandable icon that indicates state", () => {
+      const { container } = renderCollapsible({ expand: true });
+
+      const icon = container.querySelector(".collapsible-icon");
+      expect(icon).toBeInTheDocument();
+    });
+
+    it("should toggle expansion state when clicking the label", async () => {
+      renderCollapsible({ expand: false });
+
+      // Initially collapsed
+      expect(screen.queryByTestId("collapsible-content")).not.toBeInTheDocument();
+
+      // Click to expand
+      const label = screen.getByText("Test Collapsible").closest(".icon-text");
+      if (label) {
+        fireEvent.click(label);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByTestId("collapsible-content")).toBeInTheDocument();
+      });
+    });
+
+    it("should collapse when clicking the label on expanded state", async () => {
+      renderCollapsible({ expand: true });
+
+      // Initially expanded
+      expect(screen.getByTestId("collapsible-content")).toBeInTheDocument();
+
+      // Click to collapse
+      const label = screen.getByText("Test Collapsible").closest(".icon-text");
+      if (label) {
+        fireEvent.click(label);
+      }
+
+      await waitFor(() => {
+        expect(screen.queryByTestId("collapsible-content")).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Keyboard Accessibility", () => {
+    it("should have a clickable label element", () => {
+      const { container } = renderCollapsible();
+
+      const label = container.querySelector(".icon-text");
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveStyle({ cursor: "pointer" });
+    });
+
+    it("should be accessible via click interaction", async () => {
+      const handleCustomCollapse = jest.fn();
+      renderCollapsible({ handleCustomCollapse });
+
+      const label = screen.getByText("Test Collapsible").closest(".icon-text");
+      if (label) {
+        fireEvent.click(label);
+      }
+
+      await waitFor(() => {
+        expect(handleCustomCollapse).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Icon State Indication", () => {
+    it("should show down-arrow icon when expanded", () => {
+      const { container } = renderCollapsible({ expand: true });
+
+      const icon = container.querySelector(".collapsible-icon");
+      expect(icon).toBeInTheDocument();
+    });
+
+    it("should show arrow-right icon when collapsed", () => {
+      const { container } = renderCollapsible({ expand: false });
+
+      const icon = container.querySelector('[name="arrow-right-s-line"]');
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe("State Management", () => {
+    it("should respect initial expand prop", () => {
+      renderCollapsible({ expand: true });
+
+      expect(screen.getByTestId("collapsible-content")).toBeInTheDocument();
+    });
+
+    it("should respect initial collapsed state", () => {
+      renderCollapsible({ expand: false });
+
+      expect(screen.queryByTestId("collapsible-content")).not.toBeInTheDocument();
+    });
+
+    it("should update state when expand prop changes", async () => {
+      const { rerender } = render(
+        <ThemeProvider theme={lightTheme}>
+          <Collapsible label="Test" expand={false}>
+            <div data-testid="content">Content</div>
+          </Collapsible>
+        </ThemeProvider>,
+      );
+
+      expect(screen.queryByTestId("content")).not.toBeInTheDocument();
+
+      rerender(
+        <ThemeProvider theme={lightTheme}>
+          <Collapsible label="Test" expand={true}>
+            <div data-testid="content">Content</div>
+          </Collapsible>
+        </ThemeProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("CustomLabelComponent", () => {
+    it("should render custom label component when provided", () => {
+      const CustomLabel = ({ datasource }: { datasource?: unknown }) => (
+        <span data-testid="custom-label">Custom Label</span>
+      );
+
+      renderCollapsible({ CustomLabelComponent: CustomLabel });
+
+      expect(screen.getByTestId("custom-label")).toBeInTheDocument();
+    });
+  });
+
+  describe("DisabledCollapsible", () => {
+    it("should render with disabled styling", () => {
+      const { container } = render(
+        <ThemeProvider theme={lightTheme}>
+          <DisabledCollapsible label="Disabled Section" />
+        </ThemeProvider>,
+      );
+
+      expect(screen.getByText("Disabled Section")).toBeInTheDocument();
+
+      // Check for disabled styling
+      const wrapper = container.querySelector('[class*="CollapsibleWrapper"]');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it("should show tooltip when provided", () => {
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <DisabledCollapsible
+            label="Disabled Section"
+            tooltipLabel="This section is disabled"
+          />
+        </ThemeProvider>,
+      );
+
+      expect(screen.getByText("Disabled Section")).toBeInTheDocument();
+    });
+  });
+
+  describe("CollapsibleGroup", () => {
+    it("should render children within a group", () => {
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <CollapsibleGroup>
+            <div data-testid="group-child">Group Child</div>
+          </CollapsibleGroup>
+        </ThemeProvider>,
+      );
+
+      expect(screen.getByTestId("group-child")).toBeInTheDocument();
+    });
+
+    it("should apply height and maxHeight props", () => {
+      const { container } = render(
+        <ThemeProvider theme={lightTheme}>
+          <CollapsibleGroup height="500px" maxHeight="600px">
+            <div>Content</div>
+          </CollapsibleGroup>
+        </ThemeProvider>,
+      );
+
+      const wrapper = container.firstChild;
+      expect(wrapper).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility Recommendations", () => {
+    /**
+     * Note: The Collapsible component currently lacks some accessibility attributes
+     * that would improve screen reader support:
+     * 
+     * - aria-expanded: Should be "true" when expanded, "false" when collapsed
+     * - aria-controls: Should reference the ID of the content panel
+     * - role="button": The clickable label should have this role
+     * - tabIndex="0": To make it keyboard focusable
+     * - Keyboard support: Enter and Space keys should toggle the collapse state
+     * 
+     * These tests document the expected behavior for accessibility compliance.
+     */
+
+    it("should have a label that is clickable", () => {
+      const { container } = renderCollapsible();
+
+      const label = container.querySelector(".icon-text");
+      expect(label).toBeInTheDocument();
+    });
+
+    it("should provide visual indication of expanded/collapsed state", () => {
+      const { container, rerender } = render(
+        <ThemeProvider theme={lightTheme}>
+          <Collapsible label="Test" expand={true}>
+            <div>Content</div>
+          </Collapsible>
+        </ThemeProvider>,
+      );
+
+      // Check that icon indicates expanded state
+      let icon = container.querySelector(".collapsible-icon");
+      expect(icon).toBeInTheDocument();
+
+      // Re-render with collapsed state
+      rerender(
+        <ThemeProvider theme={lightTheme}>
+          <Collapsible label="Test" expand={false}>
+            <div>Content</div>
+          </Collapsible>
+        </ThemeProvider>,
+      );
+
+      // Icon should still be present but may have different attributes
+      icon = container.querySelector('[name="arrow-right-s-line"]');
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe("Handle Custom Collapse", () => {
+    it("should call handleCustomCollapse when toggle occurs", async () => {
+      const handleCustomCollapse = jest.fn();
+      renderCollapsible({ handleCustomCollapse, expand: true });
+
+      const label = screen.getByText("Test Collapsible").closest(".icon-text");
+      if (label) {
+        fireEvent.click(label);
+      }
+
+      await waitFor(() => {
+        expect(handleCustomCollapse).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/client/src/components/editorComponents/Button.test.tsx b/app/client/src/components/editorComponents/Button.test.tsx
new file mode 100644
index 000000000000..1904274f34e4
--- /dev/null
+++ b/app/client/src/components/editorComponents/Button.test.tsx
@@ -0,0 +1,412 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { lightTheme } from "selectors/themeSelectors";
+import Button, { type ButtonProps } from "./Button";
+
+const renderButton = (props: Partial<ButtonProps> = {}) => {
+  return render(
+    <ThemeProvider theme={lightTheme}>
+      <Button text="Test Button" {...props} />
+    </ThemeProvider>,
+  );
+};
+
+describe("Button Accessibility Tests", () => {
+  describe("Basic Rendering", () => {
+    it("should render with text", () => {
+      renderButton({ text: "Click Me" });
+
+      expect(screen.getByRole("button", { name: "Click Me" })).toBeInTheDocument();
+    });
+
+    it("should render as a button element when no href is provided", () => {
+      renderButton();
+
+      const button = screen.getByRole("button");
+      expect(button.tagName.toLowerCase()).toBe("button");
+    });
+
+    it("should render as an anchor element when href is provided", () => {
+      renderButton({ href: "https://example.com" });
+
+      const link = screen.getByRole("link");
+      expect(link.tagName.toLowerCase()).toBe("a");
+    });
+  });
+
+  describe("Button Types", () => {
+    it("should support button type", () => {
+      renderButton({ type: "button" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "button");
+    });
+
+    it("should support submit type", () => {
+      renderButton({ type: "submit" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "submit");
+    });
+
+    it("should support reset type", () => {
+      renderButton({ type: "reset" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("type", "reset");
+    });
+  });
+
+  describe("Click Handling", () => {
+    it("should call onClick handler when clicked", () => {
+      const onClick = jest.fn();
+      renderButton({ onClick });
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not call onClick when disabled", () => {
+      const onClick = jest.fn();
+      renderButton({ onClick, disabled: true });
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Disabled State", () => {
+    it("should have disabled attribute when disabled prop is true", () => {
+      renderButton({ disabled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+
+    it("should not be disabled by default", () => {
+      renderButton();
+
+      const button = screen.getByRole("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    it("should apply disabled styles", () => {
+      renderButton({ disabled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-disabled");
+    });
+  });
+
+  describe("Loading State", () => {
+    it("should show loading spinner when loading prop is true", () => {
+      renderButton({ loading: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-loading");
+    });
+
+    it("should be disabled when loading", () => {
+      renderButton({ loading: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+
+    it("should not call onClick when loading", () => {
+      const onClick = jest.fn();
+      renderButton({ onClick, loading: true });
+
+      const button = screen.getByRole("button");
+      fireEvent.click(button);
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Intent Styling", () => {
+    it("should apply primary intent class", () => {
+      renderButton({ intent: "primary", filled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-intent-primary");
+    });
+
+    it("should apply success intent class", () => {
+      renderButton({ intent: "success", filled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-intent-success");
+    });
+
+    it("should apply warning intent class", () => {
+      renderButton({ intent: "warning", filled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-intent-warning");
+    });
+
+    it("should apply danger intent class", () => {
+      renderButton({ intent: "danger", filled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-intent-danger");
+    });
+  });
+
+  describe("Size Variants", () => {
+    it("should apply large size class", () => {
+      renderButton({ size: "large" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-large");
+    });
+
+    it("should apply small size class", () => {
+      renderButton({ size: "small" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-small");
+    });
+  });
+
+  describe("Filled and Outline Styles", () => {
+    it("should apply filled style", () => {
+      renderButton({ filled: true });
+
+      const button = screen.getByRole("button");
+      expect(button).not.toHaveClass("bp3-minimal");
+    });
+
+    it("should apply minimal style when not filled", () => {
+      renderButton({ filled: false });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-minimal");
+    });
+
+    it("should apply outline style", () => {
+      const { container } = renderButton({ outline: true });
+
+      // Check that outline styles are applied
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("Icon Support", () => {
+    it("should render with left icon", () => {
+      renderButton({ icon: "plus", iconAlignment: "left" });
+
+      const button = screen.getByRole("button");
+      const icon = button.querySelector(".bp3-icon");
+      expect(icon).toBeInTheDocument();
+    });
+
+    it("should render with right icon", () => {
+      renderButton({ icon: "plus", iconAlignment: "right" });
+
+      const button = screen.getByRole("button");
+      const rightIcon = button.querySelector(".bp3-icon.bp3-align-right");
+      expect(rightIcon || button.querySelector(".bp3-icon")).toBeInTheDocument();
+    });
+  });
+
+  describe("Link Button (href)", () => {
+    it("should render as anchor with href", () => {
+      renderButton({ href: "https://example.com" });
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "https://example.com");
+    });
+
+    it("should support target attribute", () => {
+      renderButton({ href: "https://example.com", target: "_blank" });
+
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("target", "_blank");
+    });
+
+    it("should not call onClick when href is provided (navigation behavior)", () => {
+      const onClick = jest.fn();
+      renderButton({ href: "https://example.com", onClick });
+
+      const link = screen.getByRole("link");
+      fireEvent.click(link);
+
+      // Anchor buttons typically don't call onClick in the same way
+      // The navigation is handled by the href attribute
+      expect(link).toBeInTheDocument();
+    });
+  });
+
+  describe("Fluid Width", () => {
+    it("should expand to full width when fluid is true", () => {
+      const { container } = renderButton({ fluid: true });
+
+      const buttonWrapper = container.querySelector('[style*="width: 100%"]');
+      expect(buttonWrapper || screen.getByRole("button")).toBeInTheDocument();
+    });
+  });
+
+  describe("Custom Styling", () => {
+    it("should apply custom className", () => {
+      renderButton({ className: "custom-button" });
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("custom-button");
+    });
+
+    it("should apply custom borderRadius", () => {
+      renderButton({ borderRadius: "8px" });
+
+      const button = screen.getByRole("button");
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("Focus Management", () => {
+    it("should be focusable by default", () => {
+      renderButton();
+
+      const button = screen.getByRole("button");
+      button.focus();
+      expect(button).toHaveFocus();
+    });
+
+    it("should not receive focus when disabled", async () => {
+      renderButton({ disabled: true });
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      // Disabled buttons can receive focus programmatically but not via Tab
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe("Keyboard Accessibility", () => {
+    it("should trigger click on Enter key", async () => {
+      const onClick = jest.fn();
+      renderButton({ onClick });
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      fireEvent.keyDown(button, { key: "Enter", code: "Enter" });
+      fireEvent.keyUp(button, { key: "Enter", code: "Enter" });
+
+      // Native button handles Enter automatically
+      expect(button).toBeInTheDocument();
+    });
+
+    it("should trigger click on Space key", async () => {
+      const onClick = jest.fn();
+      renderButton({ onClick });
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      fireEvent.keyDown(button, { key: " ", code: "Space" });
+
+      // Native button handles Space automatically
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility Attributes", () => {
+    it("should have accessible name from text prop", () => {
+      renderButton({ text: "Submit Form" });
+
+      expect(screen.getByRole("button", { name: "Submit Form" })).toBeInTheDocument();
+    });
+
+    it("should have accessible name from children if no text", () => {
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <Button>Child Content</Button>
+        </ThemeProvider>,
+      );
+
+      expect(screen.getByRole("button", { name: "Child Content" })).toBeInTheDocument();
+    });
+
+    it("should be accessible when only icon is provided", () => {
+      renderButton({ icon: "plus", text: undefined });
+
+      const button = screen.getByRole("button");
+      // Icon-only buttons should have an accessible name via aria-label
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("Form Integration", () => {
+    it("should work as submit button in forms", () => {
+      const onSubmit = jest.fn((e) => e.preventDefault());
+
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <form onSubmit={onSubmit}>
+            <Button type="submit" text="Submit" />
+          </form>
+        </ThemeProvider>,
+      );
+
+      const button = screen.getByRole("button", { name: "Submit" });
+      fireEvent.click(button);
+
+      expect(onSubmit).toHaveBeenCalled();
+    });
+  });
+
+  describe("State Transitions", () => {
+    it("should reflect loading state change", () => {
+      const { rerender } = render(
+        <ThemeProvider theme={lightTheme}>
+          <Button text="Click" loading={false} />
+        </ThemeProvider>,
+      );
+
+      let button = screen.getByRole("button");
+      expect(button).not.toHaveClass("bp3-loading");
+      expect(button).not.toBeDisabled();
+
+      rerender(
+        <ThemeProvider theme={lightTheme}>
+          <Button text="Click" loading={true} />
+        </ThemeProvider>,
+      );
+
+      button = screen.getByRole("button");
+      expect(button).toHaveClass("bp3-loading");
+      expect(button).toBeDisabled();
+    });
+
+    it("should reflect disabled state change", () => {
+      const { rerender } = render(
+        <ThemeProvider theme={lightTheme}>
+          <Button text="Click" disabled={false} />
+        </ThemeProvider>,
+      );
+
+      let button = screen.getByRole("button");
+      expect(button).not.toBeDisabled();
+
+      rerender(
+        <ThemeProvider theme={lightTheme}>
+          <Button text="Click" disabled={true} />
+        </ThemeProvider>,
+      );
+
+      button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/client/src/components/editorComponents/EditableText.test.tsx b/app/client/src/components/editorComponents/EditableText.test.tsx
new file mode 100644
index 000000000000..e428b0b8ae66
--- /dev/null
+++ b/app/client/src/components/editorComponents/EditableText.test.tsx
@@ -0,0 +1,474 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { lightTheme } from "selectors/themeSelectors";
+import { EditableText, EditInteractionKind } from "./EditableText";
+import { MemoryRouter } from "react-router-dom";
+
+const renderEditableText = (props = {}) => {
+  return render(
+    <MemoryRouter>
+      <ThemeProvider theme={lightTheme}>
+        <EditableText
+          type="text"
+          defaultValue="Initial Value"
+          onTextChanged={jest.fn()}
+          placeholder="Enter value"
+          editInteractionKind={EditInteractionKind.SINGLE}
+          {...props}
+        />
+      </ThemeProvider>
+    </MemoryRouter>,
+  );
+};
+
+describe("EditableText Accessibility Tests", () => {
+  describe("Basic Rendering", () => {
+    it("should render with initial value", () => {
+      renderEditableText();
+
+      expect(screen.getByText("Initial Value")).toBeInTheDocument();
+    });
+
+    it("should render with placeholder when no value", () => {
+      renderEditableText({ defaultValue: "" });
+
+      expect(screen.getByPlaceholderText("Enter value")).toBeInTheDocument();
+    });
+
+    it("should display the edit icon by default", () => {
+      renderEditableText();
+
+      const editIcon = document.querySelector(".t--action-name-edit-icon");
+      expect(editIcon).toBeInTheDocument();
+    });
+  });
+
+  describe("Edit Interaction - Single Click", () => {
+    it("should enter edit mode on single click when editInteractionKind is SINGLE", async () => {
+      renderEditableText({ editInteractionKind: EditInteractionKind.SINGLE });
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(".bp3-editable-text-input");
+        expect(input).toBeInTheDocument();
+      });
+    });
+
+    it("should show input field in edit mode", async () => {
+      renderEditableText({ editInteractionKind: EditInteractionKind.SINGLE });
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(".bp3-editable-text-input");
+        expect(input).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Edit Interaction - Double Click", () => {
+    it("should not enter edit mode on single click when editInteractionKind is DOUBLE", async () => {
+      renderEditableText({ editInteractionKind: EditInteractionKind.DOUBLE });
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      // Should not enter edit mode
+      const input = document.querySelector(".bp3-editable-text-input");
+      expect(input).not.toBeInTheDocument();
+    });
+
+    it("should enter edit mode on double click when editInteractionKind is DOUBLE", async () => {
+      renderEditableText({ editInteractionKind: EditInteractionKind.DOUBLE });
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.doubleClick(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(".bp3-editable-text-input");
+        expect(input).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Value Changes", () => {
+    it("should call onTextChanged when value is confirmed", async () => {
+      const onTextChanged = jest.fn();
+      renderEditableText({
+        onTextChanged,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          fireEvent.change(input, { target: { value: "New Value" } });
+          fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        }
+      });
+
+      await waitFor(() => {
+        expect(onTextChanged).toHaveBeenCalledWith("New Value");
+      });
+    });
+
+    it("should update value on input change", async () => {
+      const onTextChanged = jest.fn();
+      renderEditableText({
+        onTextChanged,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          fireEvent.change(input, { target: { value: "Changed Value" } });
+          expect(input.value).toBe("Changed Value");
+        }
+      });
+    });
+  });
+
+  describe("Validation", () => {
+    it("should show error when isInvalid returns error message", async () => {
+      const isInvalid = (value: string) =>
+        value.length < 3 ? "Minimum 3 characters required" : false;
+
+      renderEditableText({
+        isInvalid,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          // Enter invalid value
+          fireEvent.change(input, { target: { value: "ab" } });
+        }
+      });
+
+      await waitFor(() => {
+        // Error tooltip should be visible
+        const tooltip = document.querySelector('[data-visible="true"]');
+        expect(tooltip || screen.queryByText("Minimum 3 characters required")).toBeTruthy();
+      });
+    });
+
+    it("should accept valid input", async () => {
+      const isInvalid = (value: string) => (value.length < 3 ? "Error" : false);
+      const onTextChanged = jest.fn();
+
+      renderEditableText({
+        isInvalid,
+        onTextChanged,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          fireEvent.change(input, { target: { value: "Valid Value" } });
+          fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        }
+      });
+
+      await waitFor(() => {
+        expect(onTextChanged).toHaveBeenCalledWith("Valid Value");
+      });
+    });
+  });
+
+  describe("Disabled State", () => {
+    it("should not show edit icon when disabled", () => {
+      renderEditableText({ disabled: true });
+
+      const editIcon = document.querySelector(".t--action-name-edit-icon");
+      expect(editIcon).not.toBeInTheDocument();
+    });
+
+    it("should not enter edit mode when disabled", async () => {
+      renderEditableText({
+        disabled: true,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      // Should not enter edit mode
+      const input = document.querySelector(".bp3-editable-text-input");
+      expect(input).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Loading State", () => {
+    it("should show spinner when updating", () => {
+      renderEditableText({ updating: true });
+
+      const spinner = document.querySelector(".ads-v2-spinner");
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it("should hide edit icon when updating", () => {
+      renderEditableText({ updating: true });
+
+      const editIcon = document.querySelector(".t--action-name-edit-icon");
+      expect(editIcon).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Minimal Mode", () => {
+    it("should not show edit icon in minimal mode", () => {
+      renderEditableText({ minimal: true });
+
+      const editIcon = document.querySelector(".t--action-name-edit-icon");
+      expect(editIcon).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Hide Edit Icon", () => {
+    it("should hide edit icon when hideEditIcon is true", () => {
+      renderEditableText({ hideEditIcon: true });
+
+      const editIcon = document.querySelector(".t--action-name-edit-icon");
+      expect(editIcon).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Value Transform", () => {
+    it("should transform value using valueTransform function", async () => {
+      const valueTransform = (value: string) => value.toUpperCase();
+      renderEditableText({
+        valueTransform,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          fireEvent.change(input, { target: { value: "lowercase" } });
+          expect(input.value).toBe("LOWERCASE");
+        }
+      });
+    });
+  });
+
+  describe("Max Length", () => {
+    it("should respect maxLength prop", async () => {
+      renderEditableText({
+        maxLength: 10,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(
+          ".bp3-editable-text-input",
+        ) as HTMLInputElement;
+        if (input) {
+          expect(input.maxLength).toBe(10);
+        }
+      });
+    });
+  });
+
+  describe("Multiline Support", () => {
+    it("should support multiline editing when multiline is true", async () => {
+      renderEditableText({
+        multiline: true,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const textarea = document.querySelector("textarea.bp3-editable-text-input");
+        // BlueprintJS may render as textarea in multiline mode
+        expect(textarea || document.querySelector(".bp3-editable-text-input")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Focus and Blur", () => {
+    it("should call onBlur when editing is cancelled", async () => {
+      const onBlur = jest.fn();
+      renderEditableText({
+        onBlur,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const input = document.querySelector(".bp3-editable-text-input");
+        if (input) {
+          // Press Escape to cancel
+          fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+        }
+      });
+
+      await waitFor(() => {
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Force Default", () => {
+    it("should reset to default value when forceDefault is true", async () => {
+      const { rerender } = renderEditableText({
+        defaultValue: "Default Value",
+        forceDefault: false,
+      });
+
+      // Initial value should be displayed
+      expect(screen.getByText("Default Value")).toBeInTheDocument();
+
+      // Force default value
+      rerender(
+        <MemoryRouter>
+          <ThemeProvider theme={lightTheme}>
+            <EditableText
+              type="text"
+              defaultValue="Default Value"
+              onTextChanged={jest.fn()}
+              placeholder="Enter value"
+              editInteractionKind={EditInteractionKind.SINGLE}
+              forceDefault={true}
+            />
+          </ThemeProvider>
+        </MemoryRouter>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("Default Value")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Underline Style", () => {
+    it("should apply underline style when underline is true", () => {
+      const { container } = renderEditableText({ underline: true });
+
+      const textContainer = container.querySelector('[class*="TextContainer"]');
+      expect(textContainer).toBeInTheDocument();
+    });
+  });
+
+  describe("Full Width", () => {
+    it("should use full width when useFullWidth is true", async () => {
+      const { container } = renderEditableText({
+        useFullWidth: true,
+        editInteractionKind: EditInteractionKind.SINGLE,
+      });
+
+      // Enter edit mode
+      const editableText = screen.getByText("Initial Value").closest("div");
+      if (editableText) {
+        fireEvent.click(editableText);
+      }
+
+      await waitFor(() => {
+        const wrapper = container.querySelector('[class*="EditableTextWrapper"]');
+        expect(wrapper).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Accessibility Recommendations", () => {
+    /**
+     * Note: The EditableText component could benefit from additional accessibility attributes:
+     * 
+     * - aria-label: Should describe the editable text field
+     * - aria-describedby: Should reference error messages
+     * - aria-invalid: Should be set when validation fails
+     * - role="button": The clickable container could have this role
+     * - tabIndex="0": For keyboard accessibility
+     * 
+     * These tests document expected accessibility behavior.
+     */
+
+    it("should be interactive when enabled", () => {
+      renderEditableText();
+
+      const editableText = screen.getByText("Initial Value").closest("div");
+      expect(editableText).toBeInTheDocument();
+    });
+
+    it("should provide visual feedback for editable state", () => {
+      const { container } = renderEditableText();
+
+      // Check for cursor pointer style
+      const wrapper = container.querySelector('[class*="EditableTextWrapper"]');
+      expect(wrapper).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/app/client/src/components/editorComponents/RadioButtonGroup.test.tsx b/app/client/src/components/editorComponents/RadioButtonGroup.test.tsx
new file mode 100644
index 000000000000..8a34160665f6
--- /dev/null
+++ b/app/client/src/components/editorComponents/RadioButtonGroup.test.tsx
@@ -0,0 +1,238 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import { ThemeProvider } from "styled-components";
+import { lightTheme } from "selectors/themeSelectors";
+import RadioButtonGroup from "./RadioButtonGroup";
+
+// Mock the redux-form types
+const mockMeta = {
+  invalid: false,
+  touched: false,
+  error: "",
+};
+
+const mockInput = {
+  onChange: jest.fn(),
+  value: "",
+};
+
+const defaultOptions = [
+  { label: "Option 1", value: "option1", subtext: "Subtext for option 1" },
+  { label: "Option 2", value: "option2", subtext: "Subtext for option 2" },
+  { label: "Option 3", value: "option3", subtext: "Subtext for option 3" },
+];
+
+const renderRadioButtonGroup = (props = {}) => {
+  return render(
+    <ThemeProvider theme={lightTheme}>
+      <RadioButtonGroup
+        label="Test Radio Group"
+        options={defaultOptions}
+        initialValue=""
+        testid="test-radio-group"
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+};
+
+describe("RadioButtonGroup Accessibility Tests", () => {
+  describe("ARIA Attributes", () => {
+    it("should have role='radiogroup' on the container", () => {
+      renderRadioButtonGroup();
+
+      const radioGroup = screen.getByRole("radiogroup");
+      expect(radioGroup).toBeInTheDocument();
+    });
+
+    it("should have aria-label on the radio group", () => {
+      renderRadioButtonGroup({ label: "Custom Label" });
+
+      const radioGroup = screen.getByRole("radiogroup");
+      expect(radioGroup).toHaveAttribute("aria-label", "Custom Label");
+    });
+
+    it("should have role='radio' on each radio button", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      expect(radioButtons).toHaveLength(3);
+    });
+
+    it("should have aria-checked='false' on unselected radio buttons", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      radioButtons.forEach((button) => {
+        expect(button).toHaveAttribute("aria-checked", "false");
+      });
+    });
+
+    it("should have aria-checked='true' on the selected radio button", async () => {
+      renderRadioButtonGroup({ initialValue: "option1" });
+
+      await waitFor(() => {
+        const radioButtons = screen.getAllByRole("radio");
+        const selectedButton = radioButtons.find(
+          (btn) => btn.getAttribute("data-value") === "option1",
+        );
+        expect(selectedButton).toHaveAttribute("aria-checked", "true");
+      });
+    });
+
+    it("should update aria-checked when selection changes", async () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      const firstButton = radioButtons[0];
+
+      fireEvent.click(firstButton);
+
+      await waitFor(() => {
+        expect(firstButton).toHaveAttribute("aria-checked", "true");
+
+        // Other buttons should still be unchecked
+        const otherButtons = radioButtons.slice(1);
+        otherButtons.forEach((btn) => {
+          expect(btn).toHaveAttribute("aria-checked", "false");
+        });
+      });
+    });
+
+    it("should have data-value attribute for each radio button", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      expect(radioButtons[0]).toHaveAttribute("data-value", "option1");
+      expect(radioButtons[1]).toHaveAttribute("data-value", "option2");
+      expect(radioButtons[2]).toHaveAttribute("data-value", "option3");
+    });
+
+    it("should have data-label attribute for each radio button", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      expect(radioButtons[0]).toHaveAttribute("data-label", "Option 1");
+      expect(radioButtons[1]).toHaveAttribute("data-label", "Option 2");
+      expect(radioButtons[2]).toHaveAttribute("data-label", "Option 3");
+    });
+  });
+
+  describe("Keyboard Navigation", () => {
+    it("should select radio button on click", async () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      fireEvent.click(radioButtons[1]);
+
+      await waitFor(() => {
+        expect(radioButtons[1]).toHaveAttribute("aria-checked", "true");
+      });
+    });
+
+    it("should call input.onChange when selection changes", async () => {
+      const input = { ...mockInput };
+      renderRadioButtonGroup({ input });
+
+      const radioButtons = screen.getAllByRole("radio");
+      fireEvent.click(radioButtons[0]);
+
+      await waitFor(() => {
+        expect(input.onChange).toHaveBeenCalledWith("option1");
+      });
+    });
+
+    it("should have accessible button labels", () => {
+      renderRadioButtonGroup();
+
+      expect(screen.getByText("Option 1")).toBeInTheDocument();
+      expect(screen.getByText("Option 2")).toBeInTheDocument();
+      expect(screen.getByText("Option 3")).toBeInTheDocument();
+    });
+  });
+
+  describe("Error State Accessibility", () => {
+    it("should display error message when meta is invalid and touched", () => {
+      renderRadioButtonGroup({
+        meta: { ...mockMeta, invalid: true, touched: true, error: "Required field" },
+      });
+
+      expect(screen.getByText("Required field")).toBeInTheDocument();
+    });
+
+    it("should not display error message when field is not touched", () => {
+      renderRadioButtonGroup({
+        meta: { ...mockMeta, invalid: true, touched: false, error: "Required field" },
+      });
+
+      expect(screen.queryByText("Required field")).not.toBeInTheDocument();
+    });
+
+    it("should have error container with proper styling", () => {
+      const { container } = renderRadioButtonGroup({
+        meta: { ...mockMeta, invalid: true, touched: true, error: "Error" },
+      });
+
+      const errorContainer = container.querySelector(".dropdown-errorMsg");
+      expect(errorContainer).toBeInTheDocument();
+    });
+  });
+
+  describe("Subtitle Accessibility", () => {
+    it("should display subtitle for selected option when showSubtitle is true", async () => {
+      renderRadioButtonGroup({ showSubtitle: true, initialValue: "option1" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Subtext for option 1")).toBeInTheDocument();
+      });
+    });
+
+    it("should update subtitle when selection changes", async () => {
+      renderRadioButtonGroup({ showSubtitle: true });
+
+      const radioButtons = screen.getAllByRole("radio");
+      fireEvent.click(radioButtons[1]);
+
+      await waitFor(() => {
+        expect(screen.getByText("Subtext for option 2")).toBeInTheDocument();
+      });
+    });
+
+    it("should not display subtitle when showSubtitle is false", () => {
+      renderRadioButtonGroup({ showSubtitle: false, initialValue: "option1" });
+
+      expect(screen.queryByText("Subtext for option 1")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Screen Reader Support", () => {
+    it("should have a visible heading for the radio group", () => {
+      renderRadioButtonGroup({ label: "Choose an option" });
+
+      const heading = screen.getByRole("heading", { name: "Choose an option" });
+      expect(heading).toBeInTheDocument();
+    });
+
+    it("should associate radio buttons with their labels", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      expect(radioButtons[0]).toHaveTextContent("Option 1");
+      expect(radioButtons[1]).toHaveTextContent("Option 2");
+      expect(radioButtons[2]).toHaveTextContent("Option 3");
+    });
+  });
+
+  describe("Focus Management", () => {
+    it("should have tabIndex on radio buttons", () => {
+      renderRadioButtonGroup();
+
+      const radioButtons = screen.getAllByRole("radio");
+      radioButtons.forEach((button) => {
+        expect(button).toHaveAttribute("tabIndex");
+      });
+    });
+  });
+});
\ No newline at end of file