Building an accessible emoji component for my MDX blog
I, like a lot of folks these days make heavy use of emoji's in text communication throughout the day. I was about to add an emoji within a new post on this site and remembered that there are some limitations of how emojis work on the web, requiring a bit more work.
Since my blog is built on top of MDX, I built a small React component that takes a label
and a symbol
as props and returns markup to be used by screen readers.
Usage:
jsx
<Emoji label="bacon" symbol="🥓" />
Which ouputs:
html
<span role="img" aria-label="bacon">🥓</span>