# @fec/remark-a11y-emoji

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

Latest version **4.0.2** (published 2023-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fec/remark-a11y-emoji
pnpm add @fec/remark-a11y-emoji
yarn add @fec/remark-a11y-emoji
bun add @fec/remark-a11y-emoji
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2023-11-15 |
| First published | 2019-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=16.0 |
| Dependencies | 4 |
| Unpacked size | 290.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Florian Eckerstofer |
| Maintainers | florianeckerstorfer |
| Keywords | remark, a11y, emoji, gatsby, gatsby-plugin |

## Links

- npm: https://www.npmjs.com/package/@fec/remark-a11y-emoji
- npm.io page: https://npm.io/package/@fec/remark-a11y-emoji

## Dependencies (4)

- [gemoji](https://npm.io/package/gemoji.md) ^6.1.0
- [emoji-regex](https://npm.io/package/emoji-regex.md) ^10.0.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3
- [mdast-util-find-and-replace](https://npm.io/package/mdast-util-find-and-replace.md) ^1.1.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.0.2 (latest) — 2023-11-15
- 4.0.1 — 2023-11-15
- 4.0.0 — 2023-11-13
- 3.1.0 — 2021-03-07
- 3.0.0 — 2020-12-01
- 2.0.0 — 2020-09-27
- 1.0.0 — 2019-12-15

## README

# remark-a11y-emoji

[![Unit tests](https://github.com/florianeckerstorfer/remark-a11y-emoji/actions/workflows/test.yml/badge.svg)](https://github.com/florianeckerstorfer/remark-a11y-emoji/actions/workflows/test.yml)

Plugin for [Remark](https://remark.js.org) 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:

```html
inline <span role="img" aria-label="party popper">🎉</span> emoji
```

`remark-a11y-emoji` also works with [Gatsby](https://www.gatsbyjs.com).

Made by 👨‍💻[Florian Eckerstorfer](https://florian.ec) in beautiful 🎡 Vienna, Europe.

## Table of Contents

1. [Installation](#installation)
2. [Configuration](#configuration)
3. [Configuration with Gatsby](#configuration-with-gatsby)
4. [Code of Conduct](#code-of-conduct)
5. [Contributing](#contributing)
6. [License](#license)
7. [Change-log](#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.

```bash
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](https://github.com/syntax-tree/hast), [rehype](https://github.com/rehypejs/rehype)), which you can serialize to HTML with [rehype-stringify](https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify):

```js
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

```javascript
module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // ...
          '@fec/remark-a11y-emoji/gatsby',
        ],
      },
    },
  ],
};
```

## Code of Conduct

See [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md)

## 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](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).

## License

See [LICENSE](LICENSE.md)

## Change log

See [CHANGELOG](CHANGELOG.md)

---
_Source: https://npm.io/package/@fec/remark-a11y-emoji · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._