From 0125ca615f0bff8a7b7d9edd18a4b38bcbff0f35 Mon Sep 17 00:00:00 2001
From: Brian Holland <56670523+Brian-Holland@users.noreply.github.com>
Date: Mon, 24 Jun 2024 10:18:35 -0500
Subject: [PATCH] fix: change ModalHeader to use h2

---
 src/components/FeedbackButton/FeedbackButton.spec.tsx | 10 +++++-----
 src/components/Modal/ModalHeader.tsx                  |  5 ++++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/FeedbackButton/FeedbackButton.spec.tsx b/src/components/FeedbackButton/FeedbackButton.spec.tsx
index 33dd6838c..63f26d256 100644
--- a/src/components/FeedbackButton/FeedbackButton.spec.tsx
+++ b/src/components/FeedbackButton/FeedbackButton.spec.tsx
@@ -28,7 +28,7 @@ describe('<FeedbackButton />', () => {
 
     const feedbackModal = await findByRole('dialog');
 
-    const heading = within(feedbackModal).getByRole('heading', { level: 5 });
+    const heading = within(feedbackModal).getByRole('heading', { level: 2 });
     expect(heading.textContent).toEqual('Give Feedback');
 
     const ratingSubtitle = within(feedbackModal).getByText(
@@ -129,7 +129,7 @@ describe('<FeedbackButton />', () => {
 
     const feedbackModal = await findByRole('dialog');
 
-    const heading = within(feedbackModal).getByRole('heading', { level: 5 });
+    const heading = within(feedbackModal).getByRole('heading', { level: 2 });
     expect(heading.textContent).toEqual('Give Feedback2');
 
     const ratingSubtitle = within(feedbackModal).getByText(
@@ -217,7 +217,7 @@ describe('<FeedbackButton />', () => {
 
     const feedbackModal = await findByRole('dialog');
 
-    const heading = within(feedbackModal).getByRole('heading', { level: 5 });
+    const heading = within(feedbackModal).getByRole('heading', { level: 2 });
     expect(heading.textContent).toEqual('Give Feedback');
 
     const feedbackModalRating = within(feedbackModal).getByTestId('feedback-modal-rating');
@@ -293,7 +293,7 @@ describe('<FeedbackButton />', () => {
 
     const feedbackModal = await findByRole('dialog');
 
-    const heading = within(feedbackModal).getByRole('heading', { level: 5 });
+    const heading = within(feedbackModal).getByRole('heading', { level: 2 });
     expect(heading.textContent).toEqual('Give Feedback');
 
     within(feedbackModal).getByText('How could we improve the way this works for you?');
@@ -346,7 +346,7 @@ describe('<FeedbackButton />', () => {
 
     const feedbackModal = await findByRole('dialog');
 
-    const heading = within(feedbackModal).getByRole('heading', { level: 5 });
+    const heading = within(feedbackModal).getByRole('heading', { level: 2 });
     expect(heading.textContent).toEqual('Give Feedback');
 
     within(feedbackModal).getByText('How could we improve the way this works for you?');
diff --git a/src/components/Modal/ModalHeader.tsx b/src/components/Modal/ModalHeader.tsx
index 3ab309941..62a1039fc 100644
--- a/src/components/Modal/ModalHeader.tsx
+++ b/src/components/Modal/ModalHeader.tsx
@@ -1,3 +1,6 @@
-import { ModalHeader } from 'reactstrap';
+import React from 'react';
+import { ModalHeader as RsModalHeader } from 'reactstrap';
+
+const ModalHeader = ({ ...props }) => <RsModalHeader tag="h2" {...props} />;
 
 export default ModalHeader;