🐛 BUG: footnotes in markdown generate a <h2 id="footnote-label" class="sr-only">Footnotes</h2> that cannot be translated or removed

[gtnbssn]

What version of astro are you using?

1.0.0-beta.12

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Footnotes in Mardown are managed through remark-gfm. I got pretty confused looking at the chain of things happening during the transformation, but ultimately it will create a <h2 id="footnote-label" class="sr-only">Footnotes</h2> at the beginning of the section.

This is an issue for internationalization as we need to be able to (at least) translate this to the site's language, if not customize this html.

Remark-rehype takes an option for this: https://github.com/remarkjs/remark-rehype#optionsfootnotelabel

Note that the documentation mentions "Affects screen readers. Change it when the markdown is not in English."

But this is not reachable through the astro config file. It is possible to add this option right after this:

astro/packages/markdown/remark/src/index.ts

Line 69 in becdf3e

passThrough: ['raw', 'mdxTextExpression', 'mdxJsxTextElement', 'mdxJsxFlowElement'],

and customize this label. It looks like it wouldn't be too hard to add this in the markdown rendering options, but there might be some caveats here. Maybe all options offered by remark-rehype should be made available.

I am also wondering about the sr-only class here. Given what the documentation is saying, i am wondering if this title is specifically added for screen readers, and if it is expected that this would be hidden otherwise through css. I find it a bit obvious that this section contains footnotes and would rather do away with this title entirely. But I don't use a screen reader and it might very well be that it helps in this case.

I can try to write a PR for making the remark-rehype options available, but am not 100% sure what the general direction should be!

Link to Minimal Reproducible Example

https://stackblitz.com/github/yqniarrrp?file=src/pages/index.md

Participation

• I am willing to submit a pull request for this issue.

[gtnbssn]

So, about the sr-only class: this is indeed to hide this title from screen-readers. I think this comes from the way markdown is managed in github.

Here is an example: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/src/pages/2016-04-15---hello-world-kitchen-sink/index.md you can see in the css that this h2 will be hidden, and not through display:none, so i think precisely to trick screen readers into reading it although it is not visible on a screen.

That is a Gastby example, but rendered in github, here is the version rendered by Gatsby for comparison: https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ it doesn't have this h2 at all.

This is where this h2 is added for us:

https://github.com/syntax-tree/mdast-util-to-hast/blob/dfd724a5e62fc270e71bc2d5a2e4471be0c5ef5b/lib/footer.js#L104-L125

This is the part that tests for the options to make it translatable:

https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/index.js#L121-L122

It just tests if the value is falsey, so setting the option to an empty string will show the English version.

I guess i am going down a pretty deep rabbit hole here, but it could be that having an aria-label on the section rather than this extra h2 that requires some css hacks would be a better solution. I'll suggest this on the mdast-util-to-hast repo.

[gtnbssn]

One more thing: confusingly there is also a micromark-extension-gfm package in the dependencies of remark-gfm, that will pull a micromark-extension-gfm-footnote package which does not seem to be used to transform the footnotes.