CODEWITHSUNDEEP
reactjscomponents
L-Lisa
L-Lisa

Reputation: 11

Made styled span into an Emoji component and I get warnings for not wrapping the emoji in a span. How does this work?

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?

One of the components creating a warning: 

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

The styled component component : import styled from "styled-components"

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

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

Upvotes: 1

Views: 474

Answers (1)

GJEF
GJEF

Reputation: 21

Use it this way:

For example:

<span role="img" aria-label="Lion face">&#129409;</span>

With the above method, you wouldn't get an error message.

Upvotes: 0

Related Questions