@fec/remark-a11y-emoji

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

1. Installation
2. Configuration
3. Configuration with Gatsby
4. Code of Conduct
5. Contributing
6. License
7. Change-log

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:

1. Fork this repository.
2. Create a branch: git checkout -b <branch_name>.
3. Install dependencies: npm install
4. Make your changes (and don't forget to update the tests)
5. Don't forgot to run the tests: npm test
6. Commit your changes: git commit -m '<commit_message>'
7. Push to the original branch: git push origin <project_name>/<location>
8. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.

License

See LICENSE

Change log

See CHANGELOG