CodeForPhilly / CodeForPhilly/codeforphilly-ng

Card heading level should be a prop (TagDetail renders section h2 followed by ProjectCard h2s)

Open
#170 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
5d 3h
Merged PRs (30d)
9

Description

## 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 `

Results

` 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 `

` ("Projects", "Help wanted", "Members") and then a list of `ProjectCard`s, 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).

Contributor guide

No contributing guide indexed for this repository

Research direction

Locate the named ProjectCard, PersonCard, HelpWantedCard, TagDetail, PeopleIndex, and HelpWantedIndex entry points, then read plans/a11y-mechanical.md and issue #156 for the heading context. Verify the existing heading levels and call sites first; done means the cards accept the proposed defaults, TagDetail produces section-to-item headings, and the index behavior is checked without breaking existing uses.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.