feat: Certificate Status marked up as a heading level 2

Author: vladislavkeblysh

src/course-home/progress-tab/ProgressTab.test.jsx

@@ -5,6 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
 import MockAdapter from 'axios-mock-adapter';
+import { within } from '@testing-library/react';
 
 import {
   fireEvent, initializeMockApp, logUnhandledRequests, render, screen, act,
@@ -1250,6 +1251,11 @@ describe('Progress Tab', () => {
           linkType: 'button',
           pageName: 'progress',
         });
+
+        const certificateStatusComponent = screen.queryByTestId('certificate-status-component');
+        expect(certificateStatusComponent).toBeInTheDocument();
+        const headerElement = within(certificateStatusComponent).getByRole('heading', { level: 2 });
+        expect(headerElement).toBeInTheDocument();
       });
 
       it('Displays nothing if audit only', async () => {

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -243,7 +243,7 @@ const CertificateStatus = () => {
       <Card className="bg-light-200 raised-card">
         <ProgressCertificateStatusSlot courseId={courseId}>
           <div id={`${certCase}_certificate_status`}>
-            <Card.Header title={header} />
+            <Card.Header title={<h2>{header}</h2>} />
             <Card.Section className="small text-gray-700">
               {body}
             </Card.Section>