From c55c75edeb6d1e7a0d5f844ff1fe3fddf5dc4eeb Mon Sep 17 00:00:00 2001 From: gtnbssn Date: Thu, 5 May 2022 11:51:43 +0800 Subject: [PATCH 1/2] Usage of remark-rehype options This documents how to use the changes made in https://github.com/withastro/astro/pull/3297 in order to close https://github.com/withastro/astro/issues/3163 --- src/pages/en/guides/markdown-content.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/pages/en/guides/markdown-content.md b/src/pages/en/guides/markdown-content.md index 87c9b32b05ee3..480aa01e17959 100644 --- a/src/pages/en/guides/markdown-content.md +++ b/src/pages/en/guides/markdown-content.md @@ -438,3 +438,21 @@ When using Prism, you'll need to add a stylesheet to your project for syntax hig 1. Loading this [into your page's ``](https://docs.astro.build/en/core-concepts/astro-pages/#page-html) via a `` tag. You can also visit the [list of languages supported by Prism](https://prismjs.com/#supported-languages) for options and usage. + +### Remark-rehype options and footnotes accessibility + +[GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) allows you to author footnotes. For accessibility reasons, this will add an `H2` element with the word "Footnotes", as well as `aria-label`s in the back links that say "Back to content". You might want to translate this to the language of your site. The Markdown is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options), including some to translate this content. + +You can use remark-rehype options in your config file like so: + +```js +// astro.config.mjs +export default { + markdown: { + remarkRehype: { + footnoteLabel: 'Catatan kaki', + footnoteBackLabel: 'Kembali ke konten', + }, + }, +}; +``` From f73d41dad78f6b12a129203b4fbe2b3eb7ba7883 Mon Sep 17 00:00:00 2001 From: gtnbssn Date: Mon, 9 May 2022 13:18:35 +0800 Subject: [PATCH 2/2] How to use css with the sr-only class --- src/pages/en/guides/markdown-content.md | 31 ++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/pages/en/guides/markdown-content.md b/src/pages/en/guides/markdown-content.md index 480aa01e17959..d7c6de29e7b07 100644 --- a/src/pages/en/guides/markdown-content.md +++ b/src/pages/en/guides/markdown-content.md @@ -441,7 +441,7 @@ You can also visit the [list of languages supported by Prism](https://prismjs.co ### Remark-rehype options and footnotes accessibility -[GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) allows you to author footnotes. For accessibility reasons, this will add an `H2` element with the word "Footnotes", as well as `aria-label`s in the back links that say "Back to content". You might want to translate this to the language of your site. The Markdown is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options), including some to translate this content. +[GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) allows you to author footnotes. For accessibility reasons, this will add an `h2` element with the word "Footnotes", as well as `aria-label`s in the back links that say "Back to content". You might want to translate this to the language of your site. The Markdown is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options), including some to translate this content. You can use remark-rehype options in your config file like so: @@ -456,3 +456,32 @@ export default { }, }; ``` + +#### CSS + +The created `h2` comes with a `sr-only` class. This is a widely accepted way of keeping things accessible while hiding content from visual users. You can add relevant css code to hide this class in your project, for instance: + +```css +.sr-only{ + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +``` + +If you are using tailwind you can add it in the safelist of your config file, this will ensure the class is present in the output stylesheet, even though it does not appear in the files you are authoring: + +```js +//tailwind.config.cjs +module.exports = { +//... + safelist: ['sr-only'], +//... +}; +```