fix(ui): give the pages a heading hierarchy - #1588
Open
culfin wants to merge 2 commits into
Open
Conversation
The list heading and every entry in it were both `h5`:
<h5 className="fs-5 text-nowrap mb-3 mb-md-0"> ← "All Questions"
<h5 className="text-wrap text-break"> ← every question title
Same level, so nothing tells a screen reader which of them names the page and
which are its entries. Jumping by heading walks a flat list where a structure
was meant. And `/questions` — the busiest page of the forum — had no `h1` at
all; `grep "<h1" ui/src` finds exactly one across the whole interface, on the
question detail page.
- The list heading is `h1` where it names the page (`source === "questions"`,
the only place with no other heading above it) and `h2` everywhere else.
- Entries drop to `h3`, one level below.
- The two pages that embed the list and titled themselves `h3` — tag detail
and linked questions — become `h1`.
`fs-5` and `fs-3` carry the sizes the tags had before, so nothing changes on
screen. Verified with prettier, eslint and tsc.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Three more pages carry their title as `h3` and have no `h1` at all. The groups below them jump further than one level — `h6` on the user page, `h5` on the badge page — so they become `h2`. `fs-3`, `fs-6` and `fs-5` carry the sizes the old tags had, so nothing changes on screen. Still without any heading, and therefore not in here: the settings pages and the search results. Those need wording and an i18n key, which is a different kind of decision than renaming a tag. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
culfin
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The question list heading and every entry in it are both
h5, and most pageshave no
h1at all.Visible on this project's own instance
And in the source, one
h1in the entire interface — on the question detailpage:
Why it matters
Jumping by heading is one of the two ways people who do not see the page move
around it. With the list heading and its entries on the same level, that walk
is a flat list where a structure was meant; with no
h1, there is nothing thatnames the page. WCAG 1.3.1.
The change
QuestionListheading,source === "questions"h5h1QuestionListheading, elsewhereh5h2QuestionListentriesh5h3Tags/Detail,Questions/Linkedpage titlesh3h1Tags,Users,Badgespage titlesh3h1Usersgroups (h6),Badgesgroups (h5)h2source === "questions"is the one place where this heading names the page;the others bring their own title above it.
fs-5,fs-3andfs-6carry the sizes the old tags had, so nothingchanges on screen. Checked with prettier, eslint and tsc.
Still open
The settings pages and the search results have no heading at all — not a wrong
level, none. Adding one means choosing wording and an i18n key across 45
language files, a different kind of decision than renaming a tag.
Supersedes #1590, which was the second half of this work as a separate pull
request.
🤖 Generated with Claude Code