@fec/remark-a11y-emoji
v4.0.2
Published
Remark plugin to add a label to emoji and make them accessible.
Downloads
7,518
Maintainers
Readme
remark-a11y-emoji
Plugin for Remark to make emoji accessible. This plugin wraps emoji in a <span>
and sets the name of the emoji as aria-label
. For example, the input inline 🎉 emoji
becomes:
inline <span role="img" aria-label="party popper">🎉</span> emoji
remark-a11y-emoji
also works with Gatsby.
Made by 👨💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.
Table of Contents
Installation
You need to install @fec/remark-a11y-emoji
with NPM or Yarn. Since this is a plugin for Remark, I assume you already have Remark installed and configured.
npm install -D @fec/remark-a11y-emoji
yarn add --dev @fec/remark-a11y-emoji
Configuration
You can use @fec/remark-a11y-emoji
like any other Remark plugin. The plugin produces an AST (hast, rehype), which you can serialize to HTML with rehype-stringify:
import remark from 'remark';
import a11yEmoji from '@fec/remark-a11y-emoji';
import rehypeStringify from 'rehype-stringify';
import remarkRehype from 'remark-rehype';
const processor = remark()
.use(a11yEmoji)
.use(remarkRehype)
.use(rehypeStringify);
Configuration with Gatsby
module.exports = {
// ...
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
// ...
'@fec/remark-a11y-emoji/gatsby',
],
},
},
],
};
Code of Conduct
See CODE_OF_CONDUCT
Contributing
To contribute to @fec/remark-a11y-emoji
, follow these steps:
- Fork this repository.
- Create a branch:
git checkout -b <branch_name>
. - Install dependencies:
npm install
- Make your changes (and don't forget to update the tests)
- Don't forgot to run the tests:
npm test
- Commit your changes:
git commit -m '<commit_message>'
- Push to the original branch:
git push origin <project_name>/<location>
- Create the pull request.
Alternatively see the GitHub documentation on creating a pull request.
License
See LICENSE
Change log
See CHANGELOG