export function Emoji({ icon, label }) {return <span aria-hidden={!label} aria-label={label} role="img">{icon}</span>}
If you include a label, it will set aria-hidden
to false, and will fill in the aria-label with the intended task or action you are conveying with the emoji.
<Emoji icon='🛒' label='Add To Cart' />
This will apply aria-hidden
, telling screen readers they can skip it without missing any important information.
<Emoji icon='🙃' />