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>