Card heading level should be a prop (TagDetail renders section h2 followed by ProjectCard h2s)
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 68/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- typescript
調査の方向性
名前付きの ProjectCard、PersonCard、HelpWantedCard、TagDetail、PeopleIndex、HelpWantedIndex のエントリポイントを特定し、見出しの文脈を確認するために plans/a11y-mechanical.md と issue #156 を読んでください。まず既存の見出しレベルと呼び出し箇所を確認します。完了の条件は、cards が提案されたデフォルト値を受け入れ、TagDetail がセクションから項目への見出しを生成し、既存の利用を壊さずにインデックスの動作が確認されていることです。
索引モデルが issue の本文から書いたものです。
説明
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).
- 主要言語
- TypeScript
- スター
- 1
- フォーク
- 1
- 平均マージ
- 1日 20時間
- マージ済み PR（30日）
- 25
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
CodeForPhilly/codeforphilly-ng のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
-
MarkdownEditor toolbar: use Radix Toolbar from radix-ui instead of the hand-rolled roving tabindex オープンenhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
CodeForPhilly/codeforphilly-ng の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
bcgov/bc-wallet-mobile#4761 · コメント 1 件 ·
-
external-issue to-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
area-deployment area-integrations triage:bot-seen
難易度 2/5 半日 初心者へのやさしさ 86/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
-
refactor
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100