Сделал стилизованный промежуток в компонент Emoji, и я получаю предупреждения за то, что не оборачиваю эмодзи в промежуток. Как это работает?

Question

Согласно предупреждению, то, как я это сделал, не идеально с точки зрения доступности. Но как это сделать лучше, в компоненте есть роль, aria-label и span. Как мне сделать это правильно?

Один из компонентов, создающих предупреждение:

 <span
      type='button'
      onClick={() => setShowShoppingList(!showShoppingList)}>
        <Emoji ariaLabel="arrow-down">↓</Emoji> Reasons to Celebrate <Emoji ariaLabel="champagne-bottle">?</Emoji>
    </span>

Стилизованный компонент компонента: импорт в стиле из "styled-components"

export const Emoji = styled.span.attrs(({ariaLabel}) =>({
    role: "img",
    "aria-label": ariaLabel,
}))`
    font-size: 50px;
`

Предупреждение: строка 23:74: смайлики должны быть обернуты, иметь role = "img" и иметь доступное описание с меткой aria или label-aria jby-a11y / available-emoji. Строка 31:13: смайлики быть обернутым, иметь role = "img" и иметь доступное описание с меткой aria или меткой aria by jsx-a11y / available-emoji