React, using emojis in a drop down

Question

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".

I have the following render method for a select option:

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut">🍩</option>
                    <option value="cookie">🍪</option>
                    <option value="hotdog">🌭</option>
                    <option value="bacon">🥓</option>
                    <option value="hamburger">🍔</option>
                    <option value="brocolli">🥦</option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}

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.

Line 18: Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji

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.

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?

Thing is, I used emojis elsewhere and I got no warnings or any problems whatsoever.

Answer 1

Add in select <span role="img" aria-label="xxxxx"> like this

 <select name="goodies" id="goodies">
    <option value="donut">
       <span role="img" aria-label="donut">🍩</span> 
   </option>
   ....
  </select>

Answer 2

Update: You might wanna create a component for Emoji like following with <option> tag in the Emoji component

    const Emoji = props => (
  <option
    className="emoji"
    role="img"
    aria-label={props.label ? props.label : ""}
    aria-hidden={props.label ? "false" : "true"}
    value={props.label}
  >
    {props.symbol}
  </option>
)

class MyComponent extends React.Component {
  render() {
    return (    
      <div> 
        <form onSubmit={this.createPlayers} ref="form">
            <label htmlFor="goodies">Choose a Goody!</label>
            <select onChange={(e)=>{console.log(e.target.value)}} name="goodies" id="goodies">
               <Emoji label="donut" symbol="🍩" />
               <Emoji label="cookie" symbol="🍪" />  
               <Emoji label="hotdog" symbol="🌭" />   
               <Emoji label="bacon" symbol="🥓" />  
               <Emoji label="hamburger" symbol="🍔" />   
               <Emoji label="brocolli" symbol="🥦" />                    
            </select>
            <button type="submit">Play!</button>
        </form>
      </div>
          
    )
  }
}

ReactDOM.render(<MyComponent />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>