npm.io
4.0.2 • Published 3 years ago

@fec/remark-a11y-emoji

Licence
MIT
Version
4.0.2
Deps
4
Size
291 kB
Vulns
0
Weekly
0

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

Keywords