fix(a11y): stop docset grids skipping a heading level - #12594
Conversation
|
This pull request is part of a Mergify stack:
|
Merge Protections🟢 All 7 merge protections satisfied — ready to merge. Show 7 satisfied protections🟢 ⛓️ Depends-On RequirementsRequirement based on the presence of
🟢 🤖 Continuous Integration
🟢 👀 Review Requirements
🟢 Enforce conventional commitMake sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 🔎 Reviews
🟢 📕 PR description
🟢 🚦 Auto-queueWhen all merge protections are satisfied, this pull request will be queued automatically. |
There was a problem hiding this comment.
Pull request overview
Adjusts Docset card title markup to preserve a correct heading hierarchy in docset grids, improving the document outline for screen readers and other tooling.
Changes:
- Default
Docsetcard titles toh3(instead ofh4) and make the heading level configurable via aheadingLevelprop. - Set
headingLevel={4}for the CI Insights “Components” grid, since it is nested under an###heading.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/content/docs/ci-insights.mdx | Sets headingLevel={4} for the “Components” grid docset cards to avoid outline/structure issues under an ### heading. |
| src/components/DocsetGrid/Docset.astro | Introduces configurable heading level for card titles and updates styling to support both h3 and h4. |
Suppressed comments (2)
src/components/DocsetGrid/Docset.astro:33
- The card title is rendered as an h3/h4, but it contains a wrapper for the icon. Headings should only contain phrasing content; a block-levelinside a heading is invalid HTML and can confuse accessibility tooling. Use a (or other phrasing element) for the icon wrapper instead.
This issue also appears on line 34 of the same file.
{productIconName && (
<div class="docset-icon" data-product={productKey}>
<ProductIcon name={productIconName} />
</div>
)}
src/components/DocsetGrid/Docset.astro:38
- The h3/h4 heading contains a wrapper for the lucide/simple-icons icon. Ainside a heading is invalid HTML (headings should contain phrasing content only). Use a wrapper (and keep the same class/data attributes) to preserve styling while keeping markup valid.
{!productIconName && icon && (
<div class="docset-icon" data-product={productKey}>
<Icon name={icon} />
</div>
)}
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
4244760 to
76b1d20
Compare
Revision history
|
`getOgImageUrl` strips the leading and trailing slashes off the pathname to build the image filename. For the homepage that pathname is `/`, so stripping left an empty string and the lookup missed — every docs page had an OpenGraph image and the homepage shipped `<meta property="og:image">` with no content. The homepage's collection id is `index`, which is what `getStaticPaths` names its image, so fall back to that when the slug comes out empty. Covered by a regression test that fails against the old expression. The generated-image set comes from the content collection and needs the Astro build pipeline, so the test stubs it and exercises the derivation, which is the half that was wrong. Change-Id: Ifb9a23ea2caa20d28489a4f21363d85ed5e3342c
Docset cards rendered their title as `h4`. Almost every grid sits directly under an `##`, so the outline jumped h2 to h4 — including on the homepage, whose whole body is the "Products" grid. Screen readers and anything parsing the document outline read that as a missing level. Default the card heading to `h3` and make it a prop, because one grid does belong at h4: the "Components" grid in `ci-insights.mdx` is nested under an `### Components`, where h3 would make the cards siblings of their own section heading instead of children. Change-Id: Ie01f4c2b03f1f2b7f798ae89b056135a5b00800e
76b1d20 to
0ac1500
Compare
Merge Queue Status
This pull request spent 3 minutes 45 seconds in the queue, including 2 minutes 59 seconds running CI. Required conditions to merge
|
…12595) The Mergify OpenAPI 3.1 document is already deployed — it is what the API Reference pages are generated from — but only at `/api-schemas.json`, a filename that exists nowhere outside this repository. Every OpenAPI client, SDK generator and crawler probes `/openapi.json`, so nothing finds it and the docs read as a site with no API at all. Serve the same bytes at `/openapi.json`. The route does not transform the document: the spec is synced from the engine repository, and two spellings of it that could disagree would be worse than one obscure path. Alongside it, three other entry points that were undiscoverable: - `<link rel="service-desc">` in every page head, the IANA relation for "the description of this site's API" (RFC 8631), plus one for `llms.txt`. - `robots.txt` had no `Sitemap:` line, so crawlers had to guess `sitemap-index.xml` rather than be told. - `/developers` is the path people and tools guess for a developer portal and was a 404; it now redirects to the API reference. Depends-On: #12594
Docset cards rendered their title as
h4. Almost every grid sits directlyunder an
##, so the outline jumped h2 to h4 — including on the homepage,whose whole body is the "Products" grid. Screen readers and anything parsing
the document outline read that as a missing level.
Default the card heading to
h3and make it a prop, because one grid doesbelong at h4: the "Components" grid in
ci-insights.mdxis nested under an### Components, where h3 would make the cards siblings of their own sectionheading instead of children.
Depends-On: #12593