@fec/remark-a11y-emoji

Remark plugin to add a label to emoji and make them accessible.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@fec/remark-a11y-emoji
4.0.25 months ago4 years agoMinified + gzip package size for @fec/remark-a11y-emoji in KB

Readme

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 CODEOFCONDUCT

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