Audit usage of header elements in Learner Dashboard (#618)

Author: justinhynes

src/containers/CoursesPanel/NoCoursesView/__snapshots__/index.test.jsx.snap

@@ -9,9 +9,11 @@ exports[`NoCoursesView snapshot 1`] = `
     alt="No Courses view banner"
     src="icon/mock/path"
   />
-  <h1>
+  <h3
+    className="h1"
+  >
     Looking for a new challenge?
-  </h1>
+  </h3>
   <p>
     Explore our courses to add them to your dashboard.
   </p>

src/containers/CoursesPanel/NoCoursesView/index.jsx

@@ -19,9 +19,9 @@ export const NoCoursesView = () => {
       className="d-flex align-items-center justify-content-center mb-4.5"
     >
       <Image src={emptyCourseSVG} alt={formatMessage(messages.bannerAlt)} />
-      <h1>
+      <h3 className="h1">
         {formatMessage(messages.lookingForChallengePrompt)}
-      </h1>
+      </h3>
       <p>
         {formatMessage(messages.exploreCoursesPrompt)}
       </p>

src/containers/Dashboard/DashboardLayout.jsx

@@ -40,8 +40,7 @@ export const DashboardLayout = ({ children }) => {
         <Col {...courseListColumnProps} className="course-list-column">
           {children}
         </Col>
-        <Col {...columnConfig.sidebar} className="sidebar-column">
-          {!isCollapsed && (<h2 className="course-list-title">&nbsp;</h2>)}
+        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
           <WidgetSidebarSlot />
         </Col>
       </Row>

src/containers/Dashboard/DashboardLayout.test.jsx

@@ -84,10 +84,9 @@ describe('DashboardLayout', () => {
 
   describe('not collapsed', () => {
     const testWidgetSpacing = () => {
-      it('shows a blank (nbsp) h2 spacer component above widget sidebar', () => {
+      it('shows not-collapsed class on widget sidebar', () => {
         const columns = el.instance.findByType(Col);
-        // nonbreaking space equivalent
-        expect(columns[1].findByType('h2')[0].children[0].el).toEqual('\xA0');
+        expect(columns[1].props.className).toContain('not-collapsed');
       });
     };
     describe('sidebar showing', () => {

src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap

@@ -24,7 +24,12 @@ exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
       lg={
         {
           "offset": 0,
@@ -68,7 +73,12 @@ exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
       lg={
         {
           "offset": 0,
@@ -112,7 +122,12 @@ exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
       lg={
         {
           "offset": 0,
@@ -126,11 +141,6 @@ exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
         }
       }
     >
-      <h2
-        className="course-list-title"
-      >
-         
-      </h2>
       <WidgetSidebarSlot />
     </Col>
   </Row>
@@ -161,7 +171,12 @@ exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
       lg={
         {
           "offset": 0,
@@ -175,11 +190,6 @@ exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
         }
       }
     >
-      <h2
-        className="course-list-title"
-      >
-         
-      </h2>
       <WidgetSidebarSlot />
     </Col>
   </Row>

src/containers/Dashboard/index.scss

@@ -6,6 +6,14 @@
 
 .sidebar-column {
   padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
+
+  &.not-collapsed {
+    padding-top: map-get($spacers, 2);
+
+    & >:first-child {
+      margin-top: map-get($spacers, 5\.5);
+    }
+  }
 }
 
 @include media-breakpoint-down(lg) {

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap

@@ -55,11 +55,11 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
     onClose={[MockFunction closeConfirmModal]}
     title=""
   >
-    <h1
-      className="text-center p-3"
+    <h2
+      className="text-center p-3 h1"
     >
       Confirm your email
-    </h1>
+    </h2>
     <p
       className="text-center"
     >

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.jsx

@@ -64,7 +64,7 @@ export const ConfirmEmailBanner = () => {
           </Button>
         )}
       >
-        <h1 className="text-center p-3">{formatMessage(messages.confirmEmailModalHeader)}</h1>
+        <h2 className="text-center p-3 h1">{formatMessage(messages.confirmEmailModalHeader)}</h2>
         <p className="text-center">{formatMessage(messages.confirmEmailModalBody)}</p>
       </MarketingModal>
     </>