From f4a0b774e2a7c23d0bdb32cdd33d69d46fbe4296 Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Tue, 11 Nov 2025 16:18:56 -0500
Subject: [PATCH] chore: Added first unit tests.

---
 jest.config.js                                |   3 +-
 package.json                                  |   3 +-
 packages/module/package.json                  |   1 +
 .../user-feedback/design-guidelines.js        |  24 +-
 packages/module/src/Feedback/FeedbackForm.tsx |   4 +-
 .../Feedback/__tests__/FeedbackForm.test.tsx  | 480 ++++++++++++
 .../__snapshots__/FeedbackForm.test.tsx.snap  | 686 ++++++++++++++++++
 7 files changed, 1184 insertions(+), 17 deletions(-)
 create mode 100644 packages/module/src/Feedback/__tests__/FeedbackForm.test.tsx
 create mode 100644 packages/module/src/Feedback/__tests__/__snapshots__/FeedbackForm.test.tsx.snap

diff --git a/jest.config.js b/jest.config.js
index 5e55518..f5f897f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -14,5 +14,6 @@ module.exports = {
     '\\.(css|less)$': '<rootDir>/styleMock.js'
   },
   testEnvironment: 'jsdom',
-  setupFiles: ['./jest.setup.js']
+  setupFiles: ['./jest.setup.js'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom']
 };
diff --git a/package.json b/package.json
index 8b63082..7d9b6d5 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,7 @@
     "lint:js": "node --max-old-space-size=4096 node_modules/.bin/eslint packages --ext js,jsx,ts,tsx --cache",
     "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache",
     "lint": "yarn lint:js && yarn lint:md",
-    "test": "echo 'Disabled JEST testing'",
-    "_test": "TZ=EST jest packages",
+    "test": "TZ=EST jest packages",
     "test:a11y": "yarn workspace @patternfly/react-user-feedback test:a11y",
     "serve:a11y": "yarn workspace @patternfly/react-user-feedback serve:a11y",
     "prepare": "husky install"
diff --git a/packages/module/package.json b/packages/module/package.json
index dfd7131..c7adf20 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -21,6 +21,7 @@
     "docs:build": "pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5001",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
+    "test": "jest",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
     "serve:a11y": "yarn serve coverage"
   },
diff --git a/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js b/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js
index b075986..562e150 100644
--- a/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js
+++ b/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import srcImport0 from '../../../content/design-guidelines/./img/advanced-user-feedback.png';
-import srcImport1 from '../../../content/design-guidelines/./img/dropdown-selection.png';
-import srcImport2 from '../../../content/design-guidelines/./img/share-feedback.png';
-import srcImport3 from '../../../content/design-guidelines/./img/report-bug.png';
-import srcImport4 from '../../../content/design-guidelines/./img/research-opportunities.png';
-import srcImport5 from '../../../content/design-guidelines/./img/user-feedback-external-links.png';
+import srcImport6 from '../../../content/design-guidelines/./img/advanced-user-feedback.png';
+import srcImport7 from '../../../content/design-guidelines/./img/dropdown-selection.png';
+import srcImport8 from '../../../content/design-guidelines/./img/share-feedback.png';
+import srcImport9 from '../../../content/design-guidelines/./img/report-bug.png';
+import srcImport10 from '../../../content/design-guidelines/./img/research-opportunities.png';
+import srcImport11 from '../../../content/design-guidelines/./img/user-feedback-external-links.png';
 const pageData = {
   "id": "User feedback",
   "section": "extensions",
@@ -44,7 +44,7 @@ const Component = () => (
       {`Elements`}
     </AutoLinkHeader>
     <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      <img src={srcImport0} width={srcImport0.width} height={srcImport0.height} {...{"alt":"Image of advanced feedback modal with annotations","className":"ws-img "}}>
+      <img src={srcImport6} width={srcImport6.width} height={srcImport6.height} {...{"alt":"Image of advanced feedback modal with annotations","className":"ws-img "}}>
       </img>
     </p>
     <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
@@ -86,7 +86,7 @@ const Component = () => (
       {`For example, you can allow users to access the modal by selecting a masthead’s help icon and choosing “Share feedback” in the dropdown menu:`}
     </p>
     <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      <img src={srcImport1} width={srcImport1.width} height={srcImport1.height} {...{"alt":"Image of expanded dropdown menu with link to sharing feedback","className":"ws-img "}}>
+      <img src={srcImport7} width={srcImport7.width} height={srcImport7.height} {...{"alt":"Image of expanded dropdown menu with link to sharing feedback","className":"ws-img "}}>
       </img>
     </p>
     <AutoLinkHeader {...{"id":"variations","headingLevel":"h2","className":"ws-title ws-h2"}}>
@@ -110,7 +110,7 @@ const Component = () => (
           {`The general feedback form allows users to enter feedback into a text box and submit.`}
         </p>
         <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-          <img src={srcImport2} width={srcImport2.width} height={srcImport2.height} {...{"alt":"Image of a form  within a  modal to share feedback","className":"ws-img "}}>
+          <img src={srcImport8} width={srcImport8.width} height={srcImport8.height} {...{"alt":"Image of a form  within a  modal to share feedback","className":"ws-img "}}>
           </img>
         </p>
       </li>
@@ -122,7 +122,7 @@ const Component = () => (
           {`The bug report form allows users to enter feedback into a text box and submit. Its description directs users to a URL where they can submit a support ticket for critical issues.`}
         </p>
         <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-          <img src={srcImport3} width={srcImport3.width} height={srcImport3.height} {...{"alt":"Image of a form within a modal to report bugs","className":"ws-img "}}>
+          <img src={srcImport9} width={srcImport9.width} height={srcImport9.height} {...{"alt":"Image of a form within a modal to report bugs","className":"ws-img "}}>
           </img>
         </p>
       </li>
@@ -134,7 +134,7 @@ const Component = () => (
           {`The user research opt-in form allows users to enter their email address to participate in future research efforts.`}
         </p>
         <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-          <img src={srcImport4} width={srcImport4.width} height={srcImport4.height} {...{"alt":"Image of a form within a modal to sign up for research opportunities","className":"ws-img "}}>
+          <img src={srcImport10} width={srcImport10.width} height={srcImport10.height} {...{"alt":"Image of a form within a modal to sign up for research opportunities","className":"ws-img "}}>
           </img>
         </p>
       </li>
@@ -146,7 +146,7 @@ const Component = () => (
       {`Selecting an item redirects users to an external URL (like a qualtrics form) that opens in a separate tab.`}
     </p>
     <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      <img src={srcImport5} width={srcImport5.width} height={srcImport5.height} {...{"alt":"Image of modal with links to external forms","className":"ws-img "}}>
+      <img src={srcImport11} width={srcImport11.width} height={srcImport11.height} {...{"alt":"Image of modal with links to external forms","className":"ws-img "}}>
       </img>
     </p>
   </React.Fragment>
diff --git a/packages/module/src/Feedback/FeedbackForm.tsx b/packages/module/src/Feedback/FeedbackForm.tsx
index 2c36271..f76c0e0 100644
--- a/packages/module/src/Feedback/FeedbackForm.tsx
+++ b/packages/module/src/Feedback/FeedbackForm.tsx
@@ -54,7 +54,7 @@ export const FeedbackForm = ({
   async function handleModalSubmission() {
     try {
       const emailAddress = checked && currentEmail ? currentEmail : '';
-      onSubmit(emailAddress, textAreaValue, checked);
+      await onSubmit(emailAddress, textAreaValue, checked);
     } catch (err) {
       handleFeedbackError();
     }
@@ -93,7 +93,7 @@ export const FeedbackForm = ({
         {textAreaHidden ? (
           ''
         ) : (
-          <FormGroup label={textareaLabel} fieldId="horizontal-form-exp">
+          <FormGroup label={textareaLabel} fieldId="feedback-description-text">
             <TextArea
               value={textAreaValue}
               onChange={(_event, value) => setTextAreaValue(value)}
diff --git a/packages/module/src/Feedback/__tests__/FeedbackForm.test.tsx b/packages/module/src/Feedback/__tests__/FeedbackForm.test.tsx
new file mode 100644
index 0000000..740da83
--- /dev/null
+++ b/packages/module/src/Feedback/__tests__/FeedbackForm.test.tsx
@@ -0,0 +1,480 @@
+import { render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FeedbackForm, FeedbackFormProps } from '../FeedbackForm';
+import { LocaleContext } from '../../context/LocaleContext';
+import { defaultFeedback } from '../../locales/Locale';
+
+describe('FeedbackForm', () => {
+  const defaultProps: FeedbackFormProps = {
+    email: '',
+    onCloseModal: jest.fn(),
+    onSubmit: jest.fn(),
+    onClickBack: jest.fn(),
+    handleFeedbackError: jest.fn(),
+    modalTitle: 'Share your feedback',
+    modalDescription: 'Tell us about your experience',
+    textareaLabel: 'Feedback',
+    feedbackType: 'Feedback',
+    checkboxDescription: 'Get emails about research opportunities',
+    textAreaHidden: false,
+    submitTitle: 'Submit'
+  };
+
+  const renderWithLocale = (props: Partial<FeedbackFormProps> = {}) => 
+    render(
+      <LocaleContext.Provider value={defaultFeedback}>
+        <FeedbackForm {...defaultProps} {...props} />
+      </LocaleContext.Provider>
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // Textarea Interactions
+  describe('Textarea Interactions', () => {
+    test('updates textarea value when user types', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'This is my feedback');
+
+      expect(textarea).toHaveValue('This is my feedback');
+    });
+
+    test('allows clearing textarea by selecting all and deleting', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Test feedback');
+      await user.clear(textarea);
+
+      expect(textarea).toHaveValue('');
+    });
+
+    test('does not render textarea when textAreaHidden is true', () => {
+      renderWithLocale({ textAreaHidden: true });
+
+      expect(screen.queryByRole('textbox', { name: /feedback/i })).not.toBeInTheDocument();
+    });
+  });
+
+  // Checkbox Interactions
+  describe('Checkbox Interactions', () => {
+    test('toggles checkbox when clicked', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+
+      expect(checkbox).not.toBeChecked();
+
+      await user.click(checkbox);
+
+      expect(checkbox).toBeChecked();
+    });
+
+    test('shows email input when checkbox is checked', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+
+      expect(screen.queryByRole('textbox', { name: /error state username example/i })).not.toBeInTheDocument();
+
+      await user.click(checkbox);
+
+      expect(screen.getByRole('textbox', { name: /error state username example/i })).toBeInTheDocument();
+    });
+
+    test('hides email input when checkbox is unchecked after being checked', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+
+      await user.click(checkbox);
+      expect(screen.getByRole('textbox', { name: /error state username example/i })).toBeInTheDocument();
+
+      await user.click(checkbox);
+      expect(screen.queryByRole('textbox', { name: /error state username example/i })).not.toBeInTheDocument();
+    });
+
+    test('can toggle checkbox using Space key', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      checkbox.focus();
+
+      await user.keyboard(' ');
+
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  // Email Input Interactions
+  describe('Email Input Interactions', () => {
+    test('updates email value when user types', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'test@example.com');
+
+      expect(emailInput).toHaveValue('test@example.com');
+    });
+
+    test('shows validation error for invalid email on blur', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'invalid-email');
+      await user.tab();
+
+      expect(screen.getByText('Email address is invalid.')).toBeInTheDocument();
+    });
+
+    test('does not show validation error for valid email on blur', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'test@example.com');
+      await user.tab();
+
+      expect(screen.queryByText('Email address is invalid.')).not.toBeInTheDocument();
+    });
+
+    test('updates validation state when correcting invalid email', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'invalid');
+      await user.tab();
+
+      expect(screen.getByText('Email address is invalid.')).toBeInTheDocument();
+
+      await user.clear(emailInput);
+      await user.type(emailInput, 'valid@example.com');
+      await user.tab();
+
+      expect(screen.queryByText('Email address is invalid.')).not.toBeInTheDocument();
+    });
+
+    test('preserves provided email prop in input', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ email: 'preset@example.com' });
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      expect(emailInput).toHaveValue('preset@example.com');
+    });
+  });
+
+  // Button Interactions
+  describe('Button Interactions', () => {
+    test('calls onSubmit when submit button is clicked with valid feedback', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      renderWithLocale({ onSubmit });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Great product!');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalledWith('', 'Great product!', false);
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls onSubmit with email when checkbox is checked and email is valid', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      renderWithLocale({ onSubmit });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Great product!');
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'user@example.com');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalledWith('user@example.com', 'Great product!', true);
+    });
+
+    test('calls onClickBack when back button is clicked', async () => {
+      const user = userEvent.setup();
+      const onClickBack = jest.fn();
+      renderWithLocale({ onClickBack });
+
+      const backButton = screen.getByRole('button', { name: 'Back' });
+      await user.click(backButton);
+
+      expect(onClickBack).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls onCloseModal when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const onCloseModal = jest.fn();
+      renderWithLocale({ onCloseModal });
+
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      await user.click(cancelButton);
+
+      expect(onCloseModal).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Submit Button State
+  describe('Submit Button State', () => {
+    test('disables submit button when feedback type is Feedback and textarea is empty', () => {
+      renderWithLocale({ feedbackType: 'Feedback' });
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeDisabled();
+    });
+
+    test('enables submit button when feedback type is Feedback and textarea has valid content', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ feedbackType: 'Feedback' });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Good');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeEnabled();
+    });
+
+    test('disables submit button when checkbox is checked but email is invalid', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ feedbackType: 'Feedback' });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Great product!');
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'invalid-email');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeDisabled();
+    });
+
+    test('enables submit button when checkbox is checked and email is valid for Feedback type', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ feedbackType: 'Feedback' });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Great!');
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'valid@example.com');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeEnabled();
+    });
+
+    test('disables submit button for Research Opportunities type when checkbox is unchecked', () => {
+      renderWithLocale({ feedbackType: '[Research Opportunities]' });
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeDisabled();
+    });
+
+    test('enables submit button for Research Opportunities type when checkbox is checked with valid email', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ feedbackType: '[Research Opportunities]' });
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'test@example.com');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeEnabled();
+    });
+
+    test('disables submit button when textarea has only one character', async () => {
+      const user = userEvent.setup();
+      renderWithLocale({ feedbackType: 'Bug' });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'A');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  // Error Handling
+  describe('Error Handling', () => {
+    test('calls handleFeedbackError when onSubmit throws an error', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn().mockRejectedValue(new Error('Submission failed'));
+      const handleFeedbackError = jest.fn();
+      renderWithLocale({ onSubmit, handleFeedbackError });
+
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Test feedback');
+
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(handleFeedbackError).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Form Workflow
+  describe('Form Workflow', () => {
+    test('completes full feedback submission workflow', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      renderWithLocale({ onSubmit, feedbackType: 'Feedback' });
+
+      // Type feedback
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'The application is very user-friendly!');
+
+      // Check the research opportunities checkbox
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      // Enter email
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.type(emailInput, 'user@example.com');
+
+      // Submit
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalledWith('user@example.com', 'The application is very user-friendly!', true);
+    });
+
+    test('completes feedback submission without email opt-in', async () => {
+      const user = userEvent.setup();
+      const onSubmit = jest.fn();
+      renderWithLocale({ onSubmit, feedbackType: 'Bug' });
+
+      // Type bug description
+      const textarea = screen.getByRole('textbox', { name: /feedback/i });
+      await user.type(textarea, 'Found a bug in the login page');
+
+      // Submit without checking the checkbox
+      const submitButton = screen.getByRole('button', { name: 'Submit' });
+      await user.click(submitButton);
+
+      expect(onSubmit).toHaveBeenCalledWith('', 'Found a bug in the login page', false);
+    });
+  });
+
+  // Accessibility
+  describe('Accessibility', () => {
+    test('renders modal title as h1', () => {
+      renderWithLocale({ modalTitle: 'Provide Feedback' });
+
+      const heading = screen.getByRole('heading', { level: 1, name: 'Provide Feedback' });
+      expect(heading).toBeInTheDocument();
+    });
+
+    test('email input has correct type attribute', async () => {
+      const user = userEvent.setup();
+      renderWithLocale();
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      expect(emailInput).toHaveAttribute('type', 'email');
+    });
+
+    test('checkbox displays description', () => {
+      renderWithLocale({ checkboxDescription: 'We will contact you about user research studies' });
+
+      expect(screen.getByText('We will contact you about user research studies')).toBeInTheDocument();
+    });
+  });
+
+  // Snapshot Tests
+  describe('Snapshots', () => {
+    test('renders default state snapshot', () => {
+      const { asFragment } = renderWithLocale({
+        modalTitle: 'Share your feedback',
+        modalDescription: 'Tell us about your experience',
+        feedbackType: 'Feedback'
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('renders with checkbox checked and email visible snapshot', async () => {
+      const user = userEvent.setup();
+      const { asFragment } = renderWithLocale({
+        modalTitle: 'Share your feedback',
+        feedbackType: 'Feedback'
+      });
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('renders Research Opportunities type snapshot', () => {
+      const { asFragment } = renderWithLocale({
+        modalTitle: 'Join our research',
+        feedbackType: '[Research Opportunities]',
+        textAreaHidden: true
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('renders with email validation error snapshot', async () => {
+      const user = userEvent.setup();
+      const { asFragment } = renderWithLocale({
+        modalTitle: 'Share your feedback',
+        feedbackType: 'Bug',
+        email: 'preset@example.com'
+      });
+
+      const checkbox = screen.getByRole('checkbox', { name: /yes, i would like to hear about research opportunities/i });
+      await user.click(checkbox);
+
+      const emailInput = screen.getByRole('textbox', { name: /error state username example/i });
+      await user.clear(emailInput);
+      await user.type(emailInput, 'invalid-email');
+      await user.tab();
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/module/src/Feedback/__tests__/__snapshots__/FeedbackForm.test.tsx.snap b/packages/module/src/Feedback/__tests__/__snapshots__/FeedbackForm.test.tsx.snap
new file mode 100644
index 0000000..358a798
--- /dev/null
+++ b/packages/module/src/Feedback/__tests__/__snapshots__/FeedbackForm.test.tsx.snap
@@ -0,0 +1,686 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackForm Snapshots renders Research Opportunities type snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="chr-c-feedback-content"
+  >
+    <div
+      class="chr-c-feedback-heading"
+    >
+      <h1
+        class="pf-v6-c-content--h1"
+        data-ouia-component-id="OUIA-Generated-Content-32"
+        data-ouia-component-type="PF6/Content"
+        data-ouia-safe="true"
+        data-pf-content="true"
+      >
+        Join our research
+      </h1>
+      Tell us about your experience
+    </div>
+    <form
+      class="pf-v6-c-form chr-c-feedback-content-main"
+      novalidate=""
+    >
+      <div
+        class="pf-v6-c-form__group pf-u-mt-20"
+      >
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <div
+            class="pf-v6-c-check"
+          >
+            <input
+              aria-invalid="false"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-32"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="feedback-checkbox"
+              type="checkbox"
+            />
+            <label
+              class="pf-v6-c-check__label"
+              for="feedback-checkbox"
+            >
+              Yes, I would like to hear about research opportunities
+            </label>
+            <span
+              class="pf-v6-c-check__description"
+            >
+              Get emails about research opportunities
+            </span>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div
+      class="pf-v6-c-action-list chr-c-feedback-footer"
+    >
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-primary chr-c-feedback-footer-button"
+            data-ouia-component-id="submit-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-secondary chr-c-feedback-footer-button"
+            data-ouia-component-id="back-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Back
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-link chr-c-feedback-footer-button"
+            data-ouia-component-id="cancel-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FeedbackForm Snapshots renders default state snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="chr-c-feedback-content"
+  >
+    <div
+      class="chr-c-feedback-heading"
+    >
+      <h1
+        class="pf-v6-c-content--h1"
+        data-ouia-component-id="OUIA-Generated-Content-30"
+        data-ouia-component-type="PF6/Content"
+        data-ouia-safe="true"
+        data-pf-content="true"
+      >
+        Share your feedback
+      </h1>
+      Tell us about your experience
+    </div>
+    <form
+      class="pf-v6-c-form chr-c-feedback-content-main"
+      novalidate=""
+    >
+      <div
+        class="pf-v6-c-form__group"
+      >
+        <div
+          class="pf-v6-c-form__group-label"
+        >
+          <label
+            class="pf-v6-c-form__label"
+            for="feedback-description-text"
+          >
+            <span
+              class="pf-v6-c-form__label-text"
+            >
+              Feedback
+            </span>
+          </label>
+            
+        </div>
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <span
+            class="pf-v6-c-form-control pf-m-textarea pf-m-resize-both chr-c-feedback-text-area"
+          >
+            <textarea
+              aria-invalid="false"
+              id="feedback-description-text"
+              name="feedback-description-text"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-form__group pf-u-mt-20"
+      >
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <div
+            class="pf-v6-c-check"
+          >
+            <input
+              aria-invalid="false"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-30"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="feedback-checkbox"
+              type="checkbox"
+            />
+            <label
+              class="pf-v6-c-check__label"
+              for="feedback-checkbox"
+            >
+              Yes, I would like to hear about research opportunities
+            </label>
+            <span
+              class="pf-v6-c-check__description"
+            >
+              Get emails about research opportunities
+            </span>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div
+      class="pf-v6-c-action-list chr-c-feedback-footer"
+    >
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-primary chr-c-feedback-footer-button"
+            data-ouia-component-id="submit-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-secondary chr-c-feedback-footer-button"
+            data-ouia-component-id="back-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Back
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-link chr-c-feedback-footer-button"
+            data-ouia-component-id="cancel-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FeedbackForm Snapshots renders with checkbox checked and email visible snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="chr-c-feedback-content"
+  >
+    <div
+      class="chr-c-feedback-heading"
+    >
+      <h1
+        class="pf-v6-c-content--h1"
+        data-ouia-component-id="OUIA-Generated-Content-31"
+        data-ouia-component-type="PF6/Content"
+        data-ouia-safe="true"
+        data-pf-content="true"
+      >
+        Share your feedback
+      </h1>
+      Tell us about your experience
+    </div>
+    <form
+      class="pf-v6-c-form chr-c-feedback-content-main"
+      novalidate=""
+    >
+      <div
+        class="pf-v6-c-form__group"
+      >
+        <div
+          class="pf-v6-c-form__group-label"
+        >
+          <label
+            class="pf-v6-c-form__label"
+            for="feedback-description-text"
+          >
+            <span
+              class="pf-v6-c-form__label-text"
+            >
+              Feedback
+            </span>
+          </label>
+            
+        </div>
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <span
+            class="pf-v6-c-form-control pf-m-textarea pf-m-resize-both chr-c-feedback-text-area"
+          >
+            <textarea
+              aria-invalid="false"
+              id="feedback-description-text"
+              name="feedback-description-text"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-form__group pf-u-mt-20"
+      >
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <div
+            class="pf-v6-c-check"
+          >
+            <input
+              aria-invalid="false"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-31"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="feedback-checkbox"
+              type="checkbox"
+            />
+            <label
+              class="pf-v6-c-check__label"
+              for="feedback-checkbox"
+            >
+              Yes, I would like to hear about research opportunities
+            </label>
+            <span
+              class="pf-v6-c-check__description"
+            >
+              Get emails about research opportunities
+            </span>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div
+      class="pf-u-font-family-heading-sans-serif chr-c-feedback-email"
+    >
+      Email
+    </div>
+    <span
+      class="pf-v6-c-form-control"
+    >
+      <input
+        aria-invalid="false"
+        aria-label="Error state username example"
+        data-ouia-component-id="OUIA-Generated-TextInputBase-16"
+        data-ouia-component-type="PF6/TextInput"
+        data-ouia-safe="true"
+        id="textInput-basic-2"
+        type="email"
+        value=""
+      />
+    </span>
+    <div
+      class="pf-v6-c-action-list chr-c-feedback-footer"
+    >
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-primary chr-c-feedback-footer-button"
+            data-ouia-component-id="submit-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-secondary chr-c-feedback-footer-button"
+            data-ouia-component-id="back-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Back
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-link chr-c-feedback-footer-button"
+            data-ouia-component-id="cancel-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FeedbackForm Snapshots renders with email validation error snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="chr-c-feedback-content"
+  >
+    <div
+      class="chr-c-feedback-heading"
+    >
+      <h1
+        class="pf-v6-c-content--h1"
+        data-ouia-component-id="OUIA-Generated-Content-33"
+        data-ouia-component-type="PF6/Content"
+        data-ouia-safe="true"
+        data-pf-content="true"
+      >
+        Share your feedback
+      </h1>
+      Tell us about your experience
+    </div>
+    <form
+      class="pf-v6-c-form chr-c-feedback-content-main"
+      novalidate=""
+    >
+      <div
+        class="pf-v6-c-form__group"
+      >
+        <div
+          class="pf-v6-c-form__group-label"
+        >
+          <label
+            class="pf-v6-c-form__label"
+            for="feedback-description-text"
+          >
+            <span
+              class="pf-v6-c-form__label-text"
+            >
+              Feedback
+            </span>
+          </label>
+            
+        </div>
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <span
+            class="pf-v6-c-form-control pf-m-textarea pf-m-resize-both chr-c-feedback-text-area"
+          >
+            <textarea
+              aria-invalid="false"
+              id="feedback-description-text"
+              name="feedback-description-text"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-form__group pf-u-mt-20"
+      >
+        <div
+          class="pf-v6-c-form__group-control"
+        >
+          <div
+            class="pf-v6-c-check"
+          >
+            <input
+              aria-invalid="false"
+              class="pf-v6-c-check__input"
+              data-ouia-component-id="OUIA-Generated-Checkbox-33"
+              data-ouia-component-type="PF6/Checkbox"
+              data-ouia-safe="true"
+              id="feedback-checkbox"
+              type="checkbox"
+            />
+            <label
+              class="pf-v6-c-check__label"
+              for="feedback-checkbox"
+            >
+              Yes, I would like to hear about research opportunities
+            </label>
+            <span
+              class="pf-v6-c-check__description"
+            >
+              Get emails about research opportunities
+            </span>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div
+      class="pf-u-font-family-heading-sans-serif chr-c-feedback-email"
+    >
+      Email
+    </div>
+    <span
+      class="pf-v6-c-form-control pf-m-error"
+    >
+      <input
+        aria-invalid="true"
+        aria-label="Error state username example"
+        data-ouia-component-id="OUIA-Generated-TextInputBase-17"
+        data-ouia-component-type="PF6/TextInput"
+        data-ouia-safe="true"
+        id="textInput-basic-2"
+        type="email"
+        value="invalid-email"
+      />
+      <span
+        class="pf-v6-c-form-control__utilities"
+      >
+        <span
+          class="pf-v6-c-form-control__icon pf-m-status"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+    <div
+      class="pf-v6-c-alert pf-m-inline pf-m-plain pf-m-danger"
+      data-ouia-component-id="OUIA-Generated-Alert-danger-3"
+      data-ouia-component-type="PF6/Alert"
+      data-ouia-safe="true"
+    >
+      <div
+        class="pf-v6-c-alert__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </div>
+      <h4
+        class="pf-v6-c-alert__title"
+      >
+        <span
+          class="pf-v6-screen-reader"
+        >
+          Danger alert:
+        </span>
+        Email address is invalid.
+      </h4>
+    </div>
+    <div
+      class="pf-v6-c-action-list chr-c-feedback-footer"
+    >
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-primary chr-c-feedback-footer-button"
+            data-ouia-component-id="submit-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Submit
+            </span>
+          </button>
+        </div>
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-secondary chr-c-feedback-footer-button"
+            data-ouia-component-id="back-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Back
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-action-list__group"
+      >
+        <div
+          class="pf-v6-c-action-list__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-link chr-c-feedback-footer-button"
+            data-ouia-component-id="cancel-feedback"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;