json-schema-org / json-schema-org/website
🐛 Bug: Heading anchor link reverts to default browser styling after click
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 169
- Forks
- 484
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 6
Description
Describe the bug
On the Tools page, clicking a section heading (e.g. "JSON Schema Tooling") changes its styling to a blue color with an underline and a visible pilcrow (¶) symbol. This is the site's intentional "active section" indicator (from components/Headlines.tsx, applied when a heading's slug matches the current URL's #hash), but visually it closely resembles broken or unstyled default browser link styling, which can make it look like a bug at first glance.
Steps To Reproduce
- Go to https://json-schema.org/tools
- Observe the "JSON Schema Tooling" heading — styled normally (light/white, bold, no underline)
- Click directly on the heading text
- Observe the heading now shows the "active section" style: blue text, underline, and a visible pilcrow
Expected Behavior
The active-section indicator should be visually distinct from a "broken" or default unstyled link, so users don't mistake intentional behavior for a bug. Possible improvements: use a color less similar to standard link-blue, and/or avoid underlining the full heading text (only the pilcrow icon).
Screenshots
Before Clicking:
After Clicking:
Device Information [optional]
OS: macOS
Browser: Chrome
version: 152.0.7977.83
Are you working on this issue?
Yes
Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)
No
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in components/Headlines.tsx and reproduce the heading behavior on the Tools page by clicking a section heading. Inspect the active-section styling applied when the heading slug matches the URL hash, then confirm the result clearly differs from default link styling and verify the behavior in Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100