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

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

canrau

rehype-accessible-emojis

* by wrapping them in aria labeled 's

 * code mostly reused from https://gitlab.com/staltz/remark-linkify-regex

* DONE: improve so it won't wrap emojis in <scripts> etc

 * https://github.com/rehypejs/rehype/pull/30#issuecomment-570914503

 * https://github.com/syntax-tree/hast-util-find-and-replace/blob/master/index.js#L9

export declare type NodeWithChildren = Node & {

export declare const rehypeAccessibleEmojis: (options?: Options) => (ast: NodeWithChildren) => NodeWithChildren;

var __importDefault = (this && this.__importDefault) || function (mod) {

    return (mod && mod.__esModule) ? mod : { "default": mod };

Object.defineProperty(exports, "__esModule", { value: true });

const unist_util_flatmap_1 = __importDefault(require("unist-util-flatmap"));

const hast_util_is_element_1 = __importDefault(require("hast-util-is-element"));

const emoji_regex_1 = __importDefault(require("emoji-regex"));

const defaultIgnore = ['title', 'script', 'style', 'svg', 'math'];

function removeExtremes(regex, optionalFlags) {

    return new RegExp(regex.source.replace(/^\^/, '').replace(/\$$/, ''), optionalFlags || regex.flags);

function buildEmojiNode(emoji, children) {

    const description = gemoji.unicode[emoji]

        ? gemoji.unicode[emoji].description

            // set aria-hidden="true" if no description available

            ...(!!!description ? { ariaHidden: true } : {}),

        return buildTextNode(props.value);

        return buildEmojiNode(props.value, children);

    throw new Error('mdast hyperscript not supported for type ' + type);

    const regex = removeExtremes(emoji_regex_1.default());

    while ((output = regex.exec(oldText)) !== null) {

        if (startTextIdx !== endTextIdx) {

            newNodes.push(h('text', { value: oldText.slice(startTextIdx, endTextIdx) }));

        newNodes.push(h('emoji', { value: emoji }, [h('text', { value: emoji })]));

    const remainingText = oldText.slice(startTextIdx);

        newNodes.push(h('text', { value: remainingText }));

// from https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c

const unique = (array) => array.filter((item, index) => array.indexOf(item) === index);

exports.rehypeAccessibleEmojis = (options = defaultOptions) => (ast) => {

    const ignore = unique([...defaultIgnore, ...options.ignore]);

    unist_util_flatmap_1.default(ast, (node, _, parent) => {

        if (node.type !== 'text' || (parent && hast_util_is_element_1.default(parent, ignore))) {

exports.default = exports.rehypeAccessibleEmojis;

"description": "Rehype plugin to make emojis accessible, wrapping emojis in with image role and the emojis name in aria-label>",

"author": "CanRau <cansrau@gmail.com> (https://www.canrau.com)",

    "url": "https://github.com/GaiAma/Coding4GaiAma.git",

    "directory": "packages/rehype-accessible-emojis"

  "homepage": "https://github.com/GaiAma/Coding4GaiAma/tree/master/packages/rehype-accessible-emojis#readme",

As I couldn't get [gatsby-remark-a11y-emoji](https://github.com/florianeckerstorfer/gatsby-remark-a11y-emoji) working with [gatsby-plugin-mdx](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx#readme) I made this rehype version to make **emojis accessible** by wrapping them in a `` with `aria-label` set to the emojis description based on [gemoji](https://github.com/github/gemoji/).

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

import accessibleEmojis from 'rehype-accessible-emojis'

import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis'

  .process(vfile.readSync('example.html'), (_, file) => {

👋 Hi, I love emojis a lot

🤓

    rehypePlugins: [require(`rehype-accessible-emojis`)],

    rehypePlugins: [require(`rehype-accessible-emojis`).rehypeAccessibleEmojis],

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

- [Rehype's Plugin List](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md)

		{
		"name": "rehype-accessible-emojis",
		"version": "0.3.0",
		"version": "0.3.1",
		"description": "Rehype plugin to make emojis accessible, wrapping emojis in <span> with image role and the emojis name in aria-label>",
		@@ -5,0 +5,0 @@ "author": "CanRau <cansrau@gmail.com> (https://www.canrau.com)",

		@@ -48,6 +48,6 @@ # rehype-accessible-emojis
		import rehype from 'rehype'
		import accessibleEmojis from 'rehype-accessible-emojis'
		import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis'

		rehype()
		.use(accessibleEmojis)
		.use(rehypeAccessibleEmojis)
		.process(vfile.readSync('example.html'), (_, file) => {
		@@ -76,3 +76,3 @@ console.log(String(file))
		options: {
		rehypePlugins: [require(`rehype-accessible-emojis`)],
		rehypePlugins: [require(`rehype-accessible-emojis`).rehypeAccessibleEmojis],
		},
		@@ -79,0 +79,0 @@ }

Fixed alerts

Improved metrics

Worsened metrics

		@@ -22,2 +22,1 @@ /**
		export declare const rehypeAccessibleEmojis: (options?: Options) => (ast: NodeWithChildren) => NodeWithChildren;
		export default rehypeAccessibleEmojis;

		@@ -83,2 +83,1 @@ "use strict";
		};
		exports.default = exports.rehypeAccessibleEmojis;