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

[dougchestnut]

Description

Addresses accessibility and semantic heading hierarchy issues identified in eclipse-pass/main#1261.

Changes

• Updated page-level headings to <h1> across templates (dashboard, not-found-error, workflow-wrapper).
• Replaced header tags in brand banner with <span> (brand-header-title).
• Adjusted section and block level headings (<h2>, <h3>) throughout workflow and detail pages (grants/detail, submissions/detail, workflow-grants, workflow-repositories, workflow-review, policy-card).
• Added typography utility classes in app.css (.brand-header-title, .page-heading, .section-title, .subsection-title, .block-title) to decouple semantic structure from visual presentation and preserve visual styling.
• Updated integration tests to match revised heading structure (workflow-grants-test.ts).

Issue

Fixes eclipse-pass/main#1261

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[markpatton]

Looks good for me when I test locally. The failing integration tests are probably caused because the selectors for various html elements are no longer correct.

[jaredgalanis]

Thanks for taking this on — the semantic retagging is sound on almost every route, and I verified the lint story and CSS cascade locally. A few things need attention before merge, though, including two deterministic CI breaks.

Blocking

1. The acceptance suite will fail deterministically. The testcafe page models in pass-acceptance-testing select headings by tag name:

• Dashboard.js:21 — Selector('h2').withText('Manage Publication Submissions') no longer matches (now h1). This is dashboardPage.verify(), the first step after login in every test, so the whole suite times out; the CI retry mechanism won't help since it's not flakiness.
• SubmissionDetails.js:22 — Selector('h5').withText(...) (now h2.block-title) breaks verifyTitle.

Coordinated selector updates need to land in pass-acceptance-testing alongside this PR.

2. A silent false-negative in the policies page model. SubmissionPolicies.js:30/37 select h3[data-test-policy-title] (now h2). verifyPolicyExists fails outright, but verifyPolicyNotExists becomes an always-pass — if only the "exists" selector gets updated, a future regression that renders the wrong policy card would go undetected. Both need updating (or better, drop the tag and select on the data-test-policy-title attribute alone so this can't recur).

3. The dashboard still violates the issue's goal. It now renders two h1 elements (the two card titles, dashboard.gts:19 and :54) and no page-level h1, so axe/Lighthouse "one h1" checks still flag the default route. Every other touched route converges nicely on one h1 + h2 sections — suggest a single page h1 here (visible or visually-hidden) with the cards as h2.

Visual/CSS regressions (verified against the cascade in a local build)

4. The new type scale is inverted. .subsection-title (1.5rem !important) renders larger than .section-title (1.3rem) and larger than the h1 .page-heading (1.4rem). Concretely: on the repositories step, "Optional repositories" visually dominates "Required repositories" directly above it; on the review step the h2 publication title outsizes the page's h1 "New Submission". With the tag distinction gone, font size is now the only visual hierarchy cue — and it points the wrong way.

5. h1 renders at two different sizes depending on route. Untouched routes (grants/submissions index + detail, thanks) keep the global h1 { 1.7rem !important } while the PR's new h1s are pinned to 1.4rem via .page-heading / #dashboard-container .card-title. Navigating between routes makes the top-level heading visibly shrink/grow. Consider adjusting the existing global h1/h2/h3 scale (app.css ~402–412) once instead of layering per-element !important classes on top of it.

6. Latent branding-font regression. branding.css applies the institutional headline font only to h1–h5, so retagging the brand title from h3 to span drops the headline typeface from "Public Access Submission System" for any deployment whose branding uses a distinct --font-headline (the new .brand-header-title rule sets size/weight but no font-family). Invisible with the default stylesheet because its two fonts are identical. The subtitle h6→h3 conversely gains the headline font.

7. Fixed sizing replaces Bootstrap's responsive scaling. The old h4s sized responsively (calc(1.275rem + 0.3vw) ≈ 1.34rem at mobile widths); .subsection-title's fixed 1.5rem applies at all viewports, enlarging these headings up to ~12% below the 1200px breakpoint. Only visible on mobile/tablet, so desktop QA will miss it.

🤖 Generated with Claude Code

[jaredgalanis]

@dougchestnut, thank you for doing this work! Just flagging here that while I did have an agent generate the above comment I did run through and manually validate the concerns expressed therein.