Context
The shared cards render a fixed heading level: ProjectCard renders h2, PersonCard and HelpWantedCard render h3. PR #157 worked around this on the index screens by adding sr-only <h2>Results</h2> headings above the h3 cards rather than changing the cards, because each card is also used in a second context where its fixed level is correct.
Problem
The fixed level is still wrong somewhere. TagDetail renders a section <h2> ("Projects", "Help wanted", "Members") and then a list of ProjectCards, each of which contributes another h2 — so the section heading and every card title sit at the same level, and the document outline reads as a flat run of h2s instead of section → items. Any future screen that composes cards under a section heading hits the same problem.
Proposal
Give the three cards a headingLevel prop (2 | 3 | 4, defaulting to today's level so nothing changes at existing call sites), rendered via a small Heading helper or createElement(h${level}). Then TagDetail passes headingLevel={3} to ProjectCard, and the sr-only "Results" headings on PeopleIndex / HelpWantedIndex can be revisited (the cards could render h2 directly there).
Related: issue #156 (CardTitle semantics) covers the design-decision side of card headings.
Deferred from plans/a11y-mechanical.md (PR #157).
Context
The shared cards render a fixed heading level:
ProjectCardrendersh2,PersonCardandHelpWantedCardrenderh3. PR #157 worked around this on the index screens by adding sr-only<h2>Results</h2>headings above theh3cards rather than changing the cards, because each card is also used in a second context where its fixed level is correct.Problem
The fixed level is still wrong somewhere.
TagDetailrenders a section<h2>("Projects", "Help wanted", "Members") and then a list ofProjectCards, each of which contributes anotherh2— so the section heading and every card title sit at the same level, and the document outline reads as a flat run of h2s instead of section → items. Any future screen that composes cards under a section heading hits the same problem.Proposal
Give the three cards a
headingLevelprop (2 | 3 | 4, defaulting to today's level so nothing changes at existing call sites), rendered via a smallHeadinghelper orcreateElement(h${level}). ThenTagDetailpassesheadingLevel={3}toProjectCard, and the sr-only "Results" headings onPeopleIndex/HelpWantedIndexcan be revisited (the cards could renderh2directly there).Related: issue #156 (CardTitle semantics) covers the design-decision side of card headings.
Deferred from
plans/a11y-mechanical.md(PR #157).