[a11y] Fix overlapping inline code background in headings - #90
Conversation
GitHub Actions
Inactive
There was a problem hiding this comment.
Pull request overview
Fixes an accessibility styling issue where inline <code> inside headings visually overlaps adjacent heading text when the heading wraps onto multiple lines.
Changes:
- Updates
.Proseheading inline-code styles to better participate in line layout and avoid overlap. - Adds a changeset for a patch release of
@primer/doctocat-nextjs.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/theme/css/prose.module.css | Adjusts inline <code> styling specifically within headings to prevent background overlap on wrapped headings. |
| .changeset/quiet-readers-refuse.md | Records the patch-level change for release notes/versioning. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| line-height: 1; | ||
| vertical-align: baseline; | ||
| margin-block: var(--base-size-4); | ||
| box-decoration-break: clone; |
There was a problem hiding this comment.
box-decoration-break: clone only affects fragmented inline boxes; with display: inline-block the element typically won’t fragment across lines, so this property may be ineffective. Consider either removing box-decoration-break or switching display to an inline value that can fragment (if the intent is per-line background/padding when the <code> content itself wraps).
| box-decoration-break: clone; |
GitHub Actions
Inactive
| line-height: 1; | ||
| vertical-align: baseline; |
There was a problem hiding this comment.
Mostly curious... are these doing anything specific? They don't seem to do anything when you disable them but I'm probably missing something.
There was a problem hiding this comment.
These are mostly safeguards to ensure the code pill’s height stays predictable and doesn’t increase unexpectedly if the heading or future code styles use a different/larger line-height. I think it's ok to remove these for now.
GitHub Actions
Inactive
Fixes https://github.com/github/accessibility-audits/issues/15032
Adjusts inline
<code>styling within headings to prevent background overlap on wrapped headings.The solution is to consider the entire code element for the headings' line height and to add a small block margin.