[#19105] Pick heading levels for structure, not size

[codyrancher]

Summary

Fixes #19105

Occurred changes and/or fixed issues

• New RcHeading: renders an h2 with a look set by :size="1" to :size="6".
• The headings behind the 15 heading-order baseline entries use it, one level below the page title at the same size.
• baseline.json loses those 15 entries. The Move namespace dialog, a newer heading-order violation on master, is converted too.

Technical notes summary

• Always an h2: every heading it replaces is a page section or a dialog title. Size is in its scoped CSS, so global h1-h6 styles and other headings are untouched.
• RcItemCard rendering h2 made six other h4s skip a level (flagged by the a11y run), so they changed too: IngressConfiguration and the five Extensions page dialogs.

Areas or cases that should be tested

Nothing to install. axe reports no heading-order violation, and headings look unchanged.

• Preferences, About, Global Settings > Home Links and Branding.
• API Keys > Create, Secret create, Pod Security Admission create, Kubecost chart detail, Cluster Tools.
• Change Password, API key delete, Add Project Member, Move namespace, Import Extension Catalog, and the Extensions page dialogs.

npx jest --ci pkg/rancher-components/src/components/RcHeading pkg/rancher-components/src/components/RcItemCard shell/components/__tests__/CruResource.test.ts shell/components/__tests__/PodSecurityAdmission.test.ts shell/components/form/__tests__/KeyValue.test.ts

Areas which could experience regressions

• KeyValue, RcItemCard and CruResource titles now render as h2 everywhere those components are used.
• The subtype tile title margin moved from the shared .title h5 rule to CruResource's scoped styles.

Screenshot/Video

Before - level badges: Preferences goes h1 to h4, and the dialog titles itself h4:

reproduce-issue-19105.webm

After - the same walk, same sizes, headings labelled RcHeading, no level skipped:

fixed-issue-19105.webm

Every replaced heading, master vs branch - 45 of 45 pixel-identical:

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

[github-actions]

🔄 Auto-Retry Failed Run

The Tests workflow failed for the commits below and has been automatically retried.
Follow up on a retried run through its link if needed.

Commit	Workflow run	Retried at
bd76193	34652005661	2026-09-11 22:39 UTC
e6390ed	34652604000	2026-09-11 22:45 UTC
83b66bc	34660580461	2026-09-12 00:51 UTC
e73439f	34663129998	2026-09-12 01:28 UTC
13e9d05	34895910012	2026-09-14 21:45 UTC
0049fab	34904876238	2026-09-14 23:17 UTC
38d2a33	34910138201	2026-09-15 00:35 UTC

[marcelofukumoto]

Approved A-

[marcelofukumoto]

Approved - grade A-

No test run - decided on the review grade alone.

Suggestions (1)

• pkg/rancher-components/src/components/RcSection/RcSection.vue - An explicit headingLevel is silently dropped for everything below a mode="no-header" section: the provide falls back to sectionLevel (the inherited level) instead of the resolved headingLevel, so the prop only ever affects a header this section does not render. A caller that reaches for headingLevel to root a subtree - the one case where the surrounding structure cannot say what the level is - gets no effect and no warning. Using headingLevel.value is a no-op for every current caller (with no prop the two are the same value) and makes the prop mean the same thing in both modes.

Nits (2)

• shell/assets/styles/base/_typography.scss - This reset is the one line in the block whose reason is not visible from the code: it exists because the tag and the class are chosen independently, so a section nested six deep renders <h6 class="text-h4"> and the H6 rule further down would uppercase it. Without a note, a future tidy-up reads it as a redundant none and deletes it. Everything else in this file already carries its why.
• shell/components/ResourceSummary.vue - .text-h1 is exactly the thing this PR adds - heading size with no outline level - and CruResource, SelectIconGrid and token.vue all take it as a class. Here the same look is re-declared in SCSS instead (@include h-css; font-size: 24px), so the count's size no longer tracks H1/.text-h1 if the scale is ever retuned. Adding the class is harmless on its own (identical declarations); the local @include h-css and font-size can then go, leaving just the margin: 0.