Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

rehype-accessible-emojis

Package Overview
Dependencies
4
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

rehype-accessible-emojis

Rehype plugin to make emojis accessible, wrapping emojis in <span> with image role and the emojis name in aria-label>

    0.3.2latest
    GitHub

Version published
Maintainers
1
Weekly downloads
673
decreased by-27.71%

Weekly downloads

Readme

Source

rehype-accessible-emojis

Written in Typescript

As I couldn't get gatsby-remark-a11y-emoji working with gatsby-plugin-mdx I made this rehype version to make emojis accessible by wrapping them in a <span role="image"> with aria-label set to the emojis description based on gemoji.

So

😅

turns into

<span role="img" aria-label="smiling face with open mouth &amp; cold sweat"> 😅 </span>

so screenreaders and other assistive technology can understand the emojis and act accordingly by for example reading the aria-label.

Install

yarn add -D rehype-accessible-emojis # or npm i -D rehype-accessible-emojis

Usage

Using Rehype

Given an example.html like

<h1>Hello World!</h1> <p>👋 Hi, I love emojis a lot 🤓</p>

and example.js like

import vfile from 'to-vfile' import rehype from 'rehype' import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis' rehype() .use(rehypeAccessibleEmojis) .process(vfile.readSync('example.html'), (_, file) => { console.log(String(file)) })

running node example results in

<h1>Hello World!</h1> <p> <span role="image" aria-label="waving hand">👋</span> Hi, I love emojis a lot <span role="image" aria-label="nerd face">🤓</span> </p>

Using gatsby-plugin-mdx

// gatsby-config.js { resolve: `gatsby-plugin-mdx`, options: { rehypePlugins: [require(`rehype-accessible-emojis`).rehypeAccessibleEmojis], }, }

Options

options.ignore (Array, default: ['title', 'script', 'style', 'svg', 'math'])
Tag-names of parents to ignore, to not wrap an emoji within a <script> for example.
Will be merged with the defaults.

Mentioned in

License

MIT © Can Rau

Keywords

FAQs

Last updated on 10 Jan 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc