florianeckerstorfer / remark-a11y-emoji Goto Github PK

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

License: MIT License

JavaScript 100.00%

remark-plugin remark emoji rehype a11y

remark-a11y-emoji's Introduction

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.

Installation
Configuration
Configuration with Gatsby
Code of Conduct
Contributing
License
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:

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

Alternatively see the GitHub documentation on creating a pull request.

License

See LICENSE

Change log

See CHANGELOG

remark-a11y-emoji's People

Contributors

Stargazers

Watchers

Forkers

amirahaile 634750802 jameshfisher eramdam

remark-a11y-emoji's Issues

Unexpected token 'export' - After upgrading to v4

Text with inline emoji is wrapped in <undefined>

When I use this plugin on a paragraph that contains emoji, the output is wrapped in <undefined> tags.

Example:

A line of text with 😀 inline 🎉 emoji

Rendered HTML:

<p>
  <undefined>
    A line of text with <span role="img" aria-label="grinning face">😀</span> inline <span role="img" aria-label="party popper">🎉</span> emoji
  </undefined>
</p>

However, emoji on a line of their own are not wrapped in those undefined tags:

👍

<p>
  <span role="img" aria-label="thumbs up">👍</span>
</p>

Context:

Next.js 9.4.4
next-mdx-enhanced 3.0.0
@fec/remark-a11y-emoji 1.0.0

How does this plugin improve accessibility ?

Hello,

I would like to know how does that plugin is adding anything to the UX of users using assistive technologies?

I always believed that aria-label should be used on icons (or icon-like images as small SVG). But emojis are not just plain images and should already have a description based on the Unicode description and CLDR name (which are in english but should be translated to user language I guess).

I'm don't understand so why this plugin is necessary.

I'm pretty sure, there is a good explanation of why this plugin is necessary and maybe this explanation should be in the README.md of the project for people like me who don't have a good enough accessibility background.

Thank you!

`aria-label` for new emojis not displayed due to outdated dependency

Hi maintainer,

When new emojis such as 🫡 or 🫨 are used, it seems that the output would not contain the proper aria-label for them. Investigating further, it seems to be because the dependent package gemoji (with version specifier "^6.1.0") is outdated. The latest version as of this writing is 8.1.0.

Would it be possible for you to update the version of such package? Alternatively, if possible at all, would it be possible to make gemoji a peer dependency.

Thanks for your work!

remark@next (13)

Hi!

remark is switching to a new parser internally (micromark, see remarkjs/remark#536 for more info).
From a quick glance at the code, it seems this plugin should be fine. However, it would be good to check that in the future (there is 13.0.0-alpha.0 published now, and one or two more will come before the release)