json-schema-org / json-schema-org/website

🐛 Bug: Heading anchor link reverts to default browser styling after click

Open
#2,497 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 Bug Status: Triage
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
  1. Go to https://json-schema.org/tools
  2. Observe the "JSON Schema Tooling" heading — styled normally (light/white, bold, no underline)
  3. Click directly on the heading text
  4. 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:
Image

After Clicking:
Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.