时间戳

首页 > 解决方案 > 将样式化的 span 制作为 Emoji 组件，我收到警告，因为我没有将 emoji 包装在 span 中。这是如何运作的？

reactjs - 将样式化的 span 制作为 Emoji 组件，我收到警告，因为我没有将 emoji 包装在 span 中。这是如何运作的？

问题描述

根据警告，从可访问性的角度来看，我这样做的方式并不理想。但是应该怎么做更好呢，组件里面有一个role，aria-label和span。我该如何做对？

创建警告的组件之一：

 <span
      type='button'
      onClick={() => setShowShoppingList(!showShoppingList)}>
        <Emoji ariaLabel="arrow-down">↓&lt;/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-labelledby jsx-a11y/accessible-emoji 的可访问描述 第 31:13 行：应包含表情符号在 中，具有 role="img"，并具有使用 aria-label 或 aria-labelledby jsx-a11y/accessible-emoji 的可访问描述

标签： reactjscomponents

解决方案

推荐阅读