title: Made styled span into an Emoji component and I get warnings for not wrapping the emoji in a span. How does this work?
body: <p>According to the warning the way I did it is not ideal out of accessibility perspective. But how should it be done better, there is a role, aria-label and span in the component. How do I make it right?</p>
  
  <p>One of the components creating a warning: </p>
  
  <pre><code> &lt;span
        type='button'
        onClick={() =&gt; setShowShoppingList(!showShoppingList)}&gt;
          &lt;Emoji ariaLabel="arrow-down"&gt;↓&lt;/Emoji&gt; Reasons to Celebrate &lt;Emoji ariaLabel="champagne-bottle"&gt;&lt;/Emoji&gt;
      &lt;/span&gt;
  </code></pre>
  
  <p>The styled component component  :
      import styled from "styled-components"</p>
  
  <pre><code>export const Emoji = styled.span.attrs(({ariaLabel}) =&gt;({
      role: "img",
      "aria-label": ariaLabel,
  }))`
      font-size: 50px;
  `
  </code></pre>
  
  <p>The warning:
    Line 23:74:  Emojis should be wrapped in , have role="img", and have an accessible description with aria-label or aria-labelledby  jsx-a11y/accessible-emoji
    Line 31:13:  Emojis should be wrapped in , have role="img", and have an accessible description with aria-label or aria-labelledby  jsx-a11y/accessible-emoji</p>