gtnbssn
commented
2 years ago 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:
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.
What version of
astroare 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: https://github.com/withastro/astro/blob/becdf3e923df1cd604b9157a8d6c2d0bd0b9c24b/packages/markdown/remark/src/index.ts#L69 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-onlyclass 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