Homepage has no h1 heading

[false200]

The homepage has no h1. "Bundle the web." is an h2 in components/HomePage/Hero/index.jsx.

Bad for screen readers and heading outline.

Fix: Title → h1

Can I work on this?

[avivkeller]

Bad for screen readers and heading outline.

How? We use a custom template so it renders differently?

[false200]

I just checked the rendered page in devtools, the main title is still an h2, no h1 anywhere. So the custom template doesn't seem to change that.

[moshams272]

Actually, that's from nodejs/doc-kit. As in its parser:

if (headingNodes.length === 0 && tree.children.length > 0) {
  tree.children.unshift(createTree('heading', { depth: 1 }, []));
}
...
....
visit(subTree, UNIST.isYamlNode, node => visitYAML(node, metadata));

It search for an h1 (that happens before the html render), and as we use in the home page no explicit heading, so it creates an empty heading, and forget to insert it from the title frontmatter, like this:

I think for here we should make it h1, but for nodejs/doc-kit I think we should discuss that there, WDUT Aviv?!

[avivkeller]

Technically, according to the doc-kit spec, every page needs an ATX H1 heading, so I think doc-kit is probably behaving correctly?

I think the best solution would be to fix the heading here. We are already discussing some spec changes for doc-kit.

[moshams272]

Nice, just to ensure that you got my POV:
doc-kit search for headings in the markdown phase before compile the mdx(like <Hero>), so after editing the hero section, we'll have 2 h1(the one as for searching the md heading and not found then create empty one and the one that contains "Bundle the web.") 🙃

[false200]

Yeahh, after digging into this more (and the double h1 point from moshams272) I think the minimal fix here would be, add # Bundle the web. to index.md so doc kit gets a real atx h1 per spec and stops injecting an empty one, change the hero title from h2 to a styled p so we keep the same look without a second heading, hide the markdown h1 with sr only so it doesn't show twice on screen and wrap {children} in div classname="content" in the home layout so that css applies.
That gives one proper h1 for screen readers, no duplicate visible title and no two h1s if we only flip hero to h1.

[moshams272]

We could wait for this upstream PR 👀

[false200]

We could wait for this upstream PR 👀

Perfect.

[moshams272]

@false200 PR was merged, If you can review that PR and know what we exactly need and open a PR here with description as I forget ;)