title: React, using emojis in a drop down
body: <p>I've been working on a little game in react and part of the game allows for the player to set some settings before starting.  It's a turn-based tag game, four players chase different tokens around the map, while avoiding the one player labeled "it".</p>
  
  <p>I have the following render method for a select option:</p>
  
  <pre class="lang-js prettyprint-override"><code>render() {
      return (
          &lt;div&gt;
              &lt;form onSubmit={this.createPlayers} ref="form"&gt;
                  &lt;label htmlFor="goodies"&gt;Choose a Goody!&lt;/label&gt;
                  &lt;select name="goodies" id="goodies"&gt;
                      &lt;option value="donut"&gt;&lt;/option&gt;
                      &lt;option value="cookie"&gt;&lt;/option&gt;
                      &lt;option value="hotdog"&gt;&lt;/option&gt;
                      &lt;option value="bacon"&gt;&lt;/option&gt;
                      &lt;option value="hamburger"&gt;&lt;/option&gt;
                      &lt;option value="brocolli"&gt;&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;button type="submit"&gt;Play!&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>And I get a large warning saying I need to wrap them in span elements, add some aria labels and give them a role of error.</p>
  
  <p><code>Line 18:  Emojis should be wrapped in &lt;span&gt;, have role="img", and have an accessible description with aria-label or aria-labelledby  jsx-a11y/accessible-emoji</code></p>
  
  <p>I do that, and then the JSX refuses to compile because it's expect a string for each option.  It won't let me put a span between the option tags.</p>
  
  <p>I'd really like to get this warning to go away, but when I try to do what it asks, the JSX won't compile.  Is there something I have to do to make this work without the warning?</p>
  
  <p>Thing is, I used emojis elsewhere and I got no warnings or any problems whatsoever.</p>