Skip to content

Remark Plugin to make Emoji in Markdown accessible. Wraps Emoji in a <span>-Tag with role and aria-label attributes.

License

Notifications You must be signed in to change notification settings

florianeckerstorfer/remark-a11y-emoji

Repository files navigation

remark-a11y-emoji

Unit tests

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

About

Remark Plugin to make Emoji in Markdown accessible. Wraps Emoji in a <span>-Tag with role and aria-label attributes.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks