Fix heading hierarchy and restore proper heading levels (#1261)

app/components/policy-card/index.gts

@@ -102,20 +102,20 @@ export default class PolicyCard extends Component<PolicyCardSignature> {
     {{! template-lint-disable link-rel-noopener no-triple-curlies require-input-label }}
     <div class='card w-100 my-2' {{this.setupOnInsert}}>
       <div class='card-body'>
-        <h3 class='card-title' data-test-policy-title>
+        <h2 class='card-title' data-test-policy-title>
           {{@policy.title}}
-        </h3>
+        </h2>
         {{#if this.policyIsJHU}}
-          <h6 class='card-subtitle mb-2' data-test-jhu-policy-deposit-expectation>
+          <h3 class='card-subtitle mb-2' data-test-jhu-policy-deposit-expectation>
             Expects deposit into an open access repository
-          </h6>
+          </h3>
         {{else}}
-          <h6 class='card-subtitle mb-2' data-test-policy-deposit-expectation>
+          <h3 class='card-subtitle mb-2' data-test-policy-deposit-expectation>
             Requires deposit into
             {{#each @policy.repositories as |repo index|}}
               {{if index ', '}}{{repo.name}}
             {{/each}}
-          </h6>
+          </h3>
         {{/if}}
         <p class='card-text mt-2' data-test-policy-description>
           {{{@policy.description}}}

app/components/workflow-grants/index.gts

@@ -217,9 +217,9 @@ export default class WorkflowGrants extends Component<WorkflowGrantsSignature> {
     </p>
 
     {{#if this._selectedGrants}}
-      <h5>
+      <h2 class='block-title'>
         Grants added to submission
-      </h5>
+      </h2>
       <SubmissionFundingTable @grants={{this._selectedGrants}} @remove={{this.removeGrant}} @setup={{this.setup}} />
       <button class='btn btn-outline-primary' type='button' {{on 'click' @back}}>
         Back
@@ -232,9 +232,9 @@ export default class WorkflowGrants extends Component<WorkflowGrantsSignature> {
     {{/if}}
 
     {{#if @submission.submitter.id}}
-      <h4>
+      <h2 class='subsection-title'>
         Available grants
-      </h4>
+      </h2>
 
       <p>
         {{#if this.contactUrl}}

app/components/workflow-repositories/index.gts

@@ -173,9 +173,9 @@ export default class WorkflowRepositories extends Component<WorkflowRepositories
   <template>
     <div {{this.setupReposOnInsert}}></div>
     {{#if @requiredRepositories}}
-      <h3 class='mt-3 font-weight-light' data-test-workflow-repositories-required>
+      <h2 class='section-title mt-3 font-weight-light' data-test-workflow-repositories-required>
         Required repositories
-      </h3>
+      </h2>
       <p class='lead text-muted'>
         Based on the grant and journal information provided, you are required to submit your manuscript to the
         repositories below. PASS will help you to create submissions for these in the following steps:
@@ -212,9 +212,9 @@ export default class WorkflowRepositories extends Component<WorkflowRepositories
     {{/if}}
 
     {{#if @optionalRepositories}}
-      <h4 class='mt-3 font-weight-light'>
+      <h2 class='subsection-title mt-3 font-weight-light'>
         Optional repositories
-      </h4>
+      </h2>
       <p class='lead text-muted'>
         Choose whether you want to submit to zero or more of the following repositories. Selecting the repositories
         below is optional.

app/components/workflow-review/index.gts

@@ -320,9 +320,9 @@ export default class WorkflowReview extends Component<WorkflowReviewSignature> {
           <div href='#' class='list-group-item flex-column align-items-start'>
             <div class='review-step-title d-flex flex-column w-100 border-bottom pb-2'>
               <div class='d-flex flex-row w-100 justify-content-between'>
-                <h4 class='mb-1' data-test-workflow-review-title>
+                <h2 class='subsection-title mb-1' data-test-workflow-review-title>
                   {{@publication.title}}
-                </h4>
+                </h2>
                 <small class='text-muted'>
                   {{! @glint-ignore - dateSubmitted is a legacy template property }}
                   {{@submission.dateSubmitted.date-time}}<br />

app/components/workflow-wrapper/index.gts

@@ -36,9 +36,9 @@ export default class WorkflowWrapper extends Component<WorkflowWrapperSignature>
         <div class='lds-dual-ring mx-auto'></div>
       </div>
       <div class='row justify-content-center mb-2'>
-        <h2 class='font-weight-light col-12 mb-0'>
+        <h1 class='page-heading font-weight-light col-12 mb-0'>
           New Submission
-        </h2>
+        </h1>
         <div class='font-weight-light col-12 publication-title'>
           {{@publication.title}}
         </div>
@@ -59,9 +59,9 @@ export default class WorkflowWrapper extends Component<WorkflowWrapperSignature>
       {{#if (and @submissionEvents @submission.isProxySubmission)}}
         {{#if @submission.id}}
           <div class='alert alert-info mt-3'>
-            <h3 class='mt-3 mb-0'>
+            <h2 class='section-title mt-3 mb-0'>
               Comments
-            </h3>
+            </h2>
             <hr class='mt-0' />
             <CommentingBlock @submissionEvents={{@submissionEvents}} />
           </div>

app/styles/app.css

@@ -14,6 +14,50 @@
   height: 100%;
 }
 
+/* Site name is a span */
+.brand-header-title {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 1.3rem !important;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.page-heading {
+  font-size: 1.4rem !important;
+  line-height: 1.2;
+}
+
+#dashboard-container .card-title {
+  font-size: 1.4rem !important;
+}
+
+/*
+ * Look of a section heading, independent of the semantic tag.
+ */
+.section-title {
+  font-size: 1.3rem !important;
+  line-height: 1.2;
+  color: inherit;
+}
+
+.subsection-title {
+  font-size: 1.5rem !important;
+  line-height: 1.2;
+  color: inherit;
+}
+
+.block-title {
+  font-size: 1.25rem !important;
+  line-height: 1.2;
+  color: inherit;
+}
+
+h2.card-title {
+  color: inherit;
+  font-size: 1.3rem !important;
+}
+
 .error-text {
   font-size: 2em !important;
   margin-bottom: 0;
@@ -157,13 +201,13 @@ th.table-header > i:not(.fa-sort-asc, .fa-sort-desc)::before {
   padding-left: 35px;
 }
 
-.policies-list h6 {
-  margin-bottom: 0.5em;
-  font-weight: bold;
+.card-subtitle {
+  font-size: 1.1em !important;
 }
 
-h6.card-subtitle {
-  font-size: 1.1em;
+.policies-list .card-subtitle {
+  margin-bottom: 0.5em;
+  font-weight: bold;
 }
 
 .line-height-45 {

app/templates/application.gts

@@ -23,14 +23,14 @@ interface Signature {
     <header id='brand-header' class='navbar navbar-expand-xs justify-content-center mb-0'>
       <div class={{if @controller.fullWidth 'container-fluid' 'container'}}>
         <a href='/' class='navbar-brand d-none d-sm-block'>
-          <h3 class='brand-header-title font-weight-light'>
+          <span class='brand-header-title font-weight-light'>
             Public Access Submission System
-          </h3>
+          </span>
         </a>
         <a href='/' class='navbar-brand custom-color d-xs-block d-sm-none'>
-          <h3 class='brand-header-title font-weight-light'>
+          <span class='brand-header-title font-weight-light'>
             P.A.S.S.
-          </h3>
+          </span>
         </a>
         {{#if @controller.logoUri}}
           <a href='{{@controller.homepage}}'>

app/templates/dashboard.gts

@@ -16,9 +16,9 @@ interface Signature {
     <div class='col-md-6 mt-4 mb-4'>
       <div class='card'>
         <div class='card-body'>
-          <h2 class='card-title font-weight-light'>
+          <h1 class='card-title font-weight-light'>
             Manage Publication Submissions
-          </h2>
+          </h1>
           <p class='card-text'>
             The submissions view allows you to:
           </p>
@@ -51,9 +51,9 @@ interface Signature {
     <div class='col-md-6 mb-4 mt-4'>
       <div class='card'>
         <div class='card-body'>
-          <h2 class='card-title font-weight-light'>
+          <h1 class='card-title font-weight-light'>
             Manage Grants Compliance
-          </h2>
+          </h1>
           <p class='card-text'>
             The grants view allows you to:
           </p>

app/templates/grants/detail.gts

@@ -106,9 +106,9 @@ interface Signature {
   </div>
   <div class='row'>
     <div class='col-12 table-container'>
-      <h3 class='font-weight-light'>
+      <h2 class='section-title font-weight-light'>
         Submissions for grant
-      </h3>
+      </h2>
       <div class='submission-table'>
         <PassTable
           @data={{@controller.queuedModel.submissions.data}}

app/templates/not-found-error.gts

@@ -15,7 +15,7 @@ interface Signature {
       <img src='{{@controller.icon}}' alt='Error icon' />
     </div>
     <div class='col my-auto'>
-      <h2>404: Page not found</h2>
+      <h1 class='page-heading'>404: Page not found</h1>
       <p class='helpful-text'>
         Looks like the page you're looking for does not exist. If you think there is a problem with the site, please
         {{#if @controller.contactUrl}}

app/templates/submissions/detail.gts

@@ -70,9 +70,9 @@ interface Signature {
         <div href='#' class='list-group-item flex-column align-items-start'>
           <div class='submission-details-title border-bottom d-flex flex-column w-100'>
             <div class='d-flex w-100 justify-content-between'>
-              <h5 class='mb-1'>
+              <h2 class='block-title mb-1'>
                 {{@controller.model.sub.publication.title}}
-              </h5>
+              </h2>
               {{#if @controller.model.sub.submittedDate}}
                 <small class='text-muted text-end'>
                   Submitted

tests/integration/components/workflow-grants-test.ts

@@ -99,7 +99,7 @@ module('Integration | Component | workflow grants', (hooks) => {
 
     await settled();
 
-    const selectedRows = this.element.querySelector('h5')!.nextElementSibling!.querySelectorAll('tbody tr');
+    const selectedRows = this.element.querySelector('h2.block-title')!.nextElementSibling!.querySelectorAll('tbody tr');
     assert.strictEqual(selectedRows.length, 1, 'Should be 1 grant in this table');
     assert.ok(selectedRows[0]!.textContent!.includes('Remove'), 'Should have a "Remove" button');
     assert.ok(selectedRows[0]!.textContent!.includes('Moo 2'));
@@ -152,7 +152,7 @@ module('Integration | Component | workflow grants', (hooks) => {
 
     await click(rows[0]!);
 
-    const selectedRows = this.element.querySelector('h5')!.nextElementSibling!.querySelectorAll('tbody tr');
+    const selectedRows = this.element.querySelector('h2.block-title')!.nextElementSibling!.querySelectorAll('tbody tr');
     assert.strictEqual(selectedRows.length, 1);
     assert.ok(selectedRows[0]!.textContent!.includes('Moo 1'), 'Only "Moo 1" should be selected');
 
@@ -202,7 +202,7 @@ module('Integration | Component | workflow grants', (hooks) => {
 
     await click('#grants-selection-table table tbody tr:nth-child(2)');
 
-    const selectedRows = this.element.querySelector('h5')!.nextElementSibling!.querySelectorAll('tbody tr');
+    const selectedRows = this.element.querySelector('h2.block-title')!.nextElementSibling!.querySelectorAll('tbody tr');
     assert.ok(selectedRows[0]!.textContent!.includes('Moo 2'));
 
     assert.strictEqual(this.submission.grants.length, 1, 'There should be one grant attached to the submission');