fix: remove heading level skips from the heading outline#185
Open
adrianschmidt wants to merge 1 commit into
Open
fix: remove heading level skips from the heading outline#185adrianschmidt wants to merge 1 commit into
adrianschmidt wants to merge 1 commit into
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
📝 WalkthroughWalkthroughIntroduces a ChangesHeading outline fix
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The heading outline of the generated docs skipped levels (h1 -> h3 -> h5), which violates axe's heading-order rule and makes screen-reader navigation harder, and the debug route rendered examples with no heading context at all, so no example markup heading level could be correct on both pages. - The "Examples" section heading is now an h2 instead of an h3, but is still sized like an h3 (the other section headings are unchanged, since they only follow h3 or lower headings). - Example titles are now h3 instead of h5, but are still sized like h5 via custom properties that the playground sets on the markdown component. - The debug route now renders the same heading context as the component page: the component name as a small h2 and the example title as a small h3. With this, example markup using h4 captions is correct on both the component page and the debug page. fix: jgroth#184
adrianschmidt
force-pushed
the
fix/heading-outline
branch
from
ba55589 to
b11ba6a
Compare
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.
Fixes #184. Related: #31.
What
The heading outline of a generated component page skipped levels (h1 → h3 "Examples" → h5 example titles), which violates axe's heading-order rule and makes screen-reader navigation harder. The
#/debug/<tag>route had the opposite problem: no heading context at all. Together this meant no example markup heading level could be correct on both pages (details in #184).How
The fix separates heading level (document structure) from appearance (font size) — the visual design is unchanged:
.docs-layout-section-heading. The other section headings (Properties, Events, …) are deliberately left as h3: they only ever follow h3-or-lower headings, so they don't skip, and raising them would create h2 → h4 skips against their h4 children.'##### 'prefix in the playground is now'### ', which is also what a comment in First line of text in example files automatically becomes an H5. Better if it's left for the users to decide. #31 suggested). They keep their old h5 size via CSS custom properties that the playground sets onkompendium-markdown(--kompendium-markdown-h3-*); the fallbacks matchtypography.scss, so markdown rendered anywhere else is unaffected.With this outline (h1 → h2 Examples → h3 example title), example markup using h4 captions is correct on both the component page and the debug page.
Notes
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Style